<script setup>
/*
 * MelissaPaciente — Pagina nativa Melissa pra Prontuario do Paciente.
 *
 * FASE 1 (foundation): chrome glass + drawer mobile + sidebar (avatar +
 * acoes + nav 7 tabs) + main com 7 abas placeholders. Os composables
 * de dados (usePatientDetail/Sessions/Financial/Messages/Documents) ja
 * carregam o paciente quando :patientId muda.
 *
 * Fase 1 NAO substitui ainda o PatientProntuario.vue legado (3593L) —
 * os 4 callsites continuam funcionando. Vai sendo migrado nas fases
 * 2-8 (cada tab uma sessao dedicada).
 *
 * Layout:
 *   - sidebar (320px, ESQUERDA, drawer no mobile) — header avatar +
 *     acoes rapidas + nav 7 tabs + sub-nav perfil
 *   - main (flex 1) — tab content
 *
 * Prefixo CSS: .mpa-* (Melissa PAciente).
 */
import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
import { useToast } from 'primevue/usetoast';
import MelissaConfigList from './MelissaConfigList.vue';
import { usePatientDetail } from '@/features/patients/composables/usePatientDetail';
import { usePatientSessions } from '@/features/patients/composables/usePatientSessions';
import { usePatientFinancial } from '@/features/patients/composables/usePatientFinancial';
import { usePatientMessages } from '@/features/patients/composables/usePatientMessages';
import { usePatientDocuments } from '@/features/patients/composables/usePatientDocuments';
import {
    pickField,
    calcAge,
    fmtRelative,
    fmtDateBR,
    fmtDateTimeBR,
    fmtCurrency,
    fmtHourShort,
    fmtDayShort,
    fmtCPF,
    fmtRG,
    fmtGender,
    fmtMarital,
    fmtPhoneMobile,
    sessionDuration,
    recordStatus,
    RECORD_STATUS_LABEL,
    fmtPaymentMethod,
    STATUS_LABEL,
    STATUS_SEVERITY,
    tagStyle as tagStyleHelper
} from '@/features/patients/utils/patientFormatters';
// Tag/Skeleton: auto via PrimeVueResolver

const props = defineProps({
    patientId: { type: String, default: '' }
});
const emit = defineEmits(['close', 'edit', 'add-financial', 'open-whatsapp']);

const toast = useToast();

// ── Composables de dados ───────────────────────────────────
const detail = usePatientDetail();
const sessionsHook = usePatientSessions();
const financialHook = usePatientFinancial();
const messagesHook = usePatientMessages();
const documentsHook = usePatientDocuments();

// ── 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 (default) e lista de configs
const cfgOpen = ref(false);
function toggleCfg() { cfgOpen.value = !cfgOpen.value; }
function fecharCfg() { cfgOpen.value = false; }

// ── Tabs ───────────────────────────────────────────────────
const TABS = [
    { key: 'overview',  label: 'Visão Geral', icon: 'pi pi-chart-line', color: '#a855f7' },
    { key: 'perfil',    label: 'Perfil',      icon: 'pi pi-user',       color: '#3b82f6' },
    { key: 'pron',      label: 'Prontuário',  icon: 'pi pi-file-edit',  color: '#06b6d4' },
    { key: 'agenda',    label: 'Agenda',      icon: 'pi pi-calendar',   color: '#10b981' },
    { key: 'financ',    label: 'Financeiro',  icon: 'pi pi-wallet',     color: '#f59e0b' },
    { key: 'doc',       label: 'Documentos',  icon: 'pi pi-folder',     color: '#f97316' },
    { key: 'conv',      label: 'Conversas',   icon: 'pi pi-whatsapp',   color: '#22c55e' }
];
const activeTab = ref('overview');
function selectTab(key) {
    activeTab.value = key;
    if (isMobile.value) drawerOpen.value = false;
}

// Filtros da aba Prontuario (MVP — usa session.observacoes como evolucao)
const pronFilter = ref('com-evolucao'); // com-evolucao | todas | realiz | falt | cancel
const PRON_FILTERS = [
    { value: 'com-evolucao', label: 'Com evolução', icon: 'pi pi-file-edit' },
    { value: 'todas',        label: 'Todas',        icon: 'pi pi-list' },
    { value: 'realiz',       label: 'Realizadas',   icon: 'pi pi-check-circle' },
    { value: 'falt',         label: 'Faltas',       icon: 'pi pi-user-minus' },
    { value: 'cancel',       label: 'Cancelamentos', icon: 'pi pi-ban' }
];

// Filtros da aba Agenda (lista cronologica + agrupamento por mes)
const agendaFilter = ref('all'); // all | future | past | realiz | falt | cancel
const AGENDA_FILTERS = [
    { value: 'all',     label: 'Todas',      icon: 'pi pi-list' },
    { value: 'future',  label: 'Próximas',   icon: 'pi pi-calendar-plus' },
    { value: 'past',    label: 'Passadas',   icon: 'pi pi-history' },
    { value: 'realiz',  label: 'Realizadas', icon: 'pi pi-check-circle' },
    { value: 'falt',    label: 'Faltas',     icon: 'pi pi-user-minus' },
    { value: 'cancel',  label: 'Canceladas', icon: 'pi pi-ban' }
];

// Sub-nav da aba Perfil
const PROFILE_SECTIONS = [
    { key: 'pessoais',  label: 'Informações Pessoais', icon: 'pi pi-pencil' },
    { key: 'endereco',  label: 'Endereço',             icon: 'pi pi-map-marker' },
    { key: 'adicional', label: 'Dados Adicionais',     icon: 'pi pi-tags' },
    { key: 'resp',      label: 'Responsável',          icon: 'pi pi-users' },
    { key: 'anot',      label: 'Anotações',            icon: 'pi pi-file-edit' },
    { key: 'sess',      label: 'Sessões',              icon: 'pi pi-calendar' }
];
const activeProfileSection = ref('pessoais');
function scrollToProfileSection(key) {
    activeProfileSection.value = key;
    if (isMobile.value) drawerOpen.value = false;
    nextTick(() => {
        const el = document.getElementById(`mpa-perfil-${key}`);
        if (el && typeof el.scrollIntoView === 'function') {
            el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    });
}

// ── Helpers de exibicao ────────────────────────────────────
function dash(v) {
    const s = String(v ?? '').trim();
    return s || '—';
}

const patientData = computed(() => detail.patient.value || {});
const nomeCompleto = computed(() => patientData.value?.nome_completo || patientData.value?.nome || 'Paciente');
const avatarUrl = computed(() =>
    patientData.value?.avatar_url || patientData.value?.avatar || null
);
const avatarInitials = computed(() => {
    const parts = String(nomeCompleto.value || '').trim().split(/\s+/).filter(Boolean);
    if (!parts.length) return '·';
    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
});

const ageLabel = computed(() => {
    const age = calcAge(patientData.value?.data_nascimento);
    return age == null ? '' : `${age} anos`;
});

const convenio = computed(() => patientData.value?.convenio || patientData.value?.plano_saude || '');
const statusPaciente = computed(() => patientData.value?.status || '');
const riscoElevado = computed(() => !!patientData.value?.risco_elevado);

function tagStyle(t) {
    return tagStyleHelper(t);
}

// ── Field computeds (cobre snake_case e camelCase do schema) ─
const birthValue          = computed(() => pickField(patientData.value, ['data_nascimento', 'birth_date']));
const telefone            = computed(() => pickField(patientData.value, ['telefone', 'phone']));
const telefoneAlternativo = computed(() => pickField(patientData.value, ['telefone_alternativo', 'phone_alt', 'phoneAlt']));
const emailPrincipal      = computed(() => pickField(patientData.value, ['email_principal', 'email']));
const emailAlternativo    = computed(() => pickField(patientData.value, ['email_alternativo', 'email_alt', 'emailAlt']));
const genero              = computed(() => pickField(patientData.value, ['genero', 'gender']));
const estadoCivil         = computed(() => pickField(patientData.value, ['estado_civil', 'marital_status']));
const naturalidade        = computed(() => pickField(patientData.value, ['naturalidade', 'birthplace', 'place_of_birth']));
const ondeNosConheceu     = computed(() => pickField(patientData.value, ['onde_nos_conheceu', 'lead_source']));
const encaminhadoPor      = computed(() => pickField(patientData.value, ['encaminhado_por', 'referred_by']));
const observacoes         = computed(() => pickField(patientData.value, ['observacoes', 'notes_short']));
const notasInternas       = computed(() => pickField(patientData.value, ['notas_internas', 'notes']));

// Endereço
const cep         = computed(() => pickField(patientData.value, ['cep', 'postal_code']));
const pais        = computed(() => pickField(patientData.value, ['pais', 'country']));
const cidade      = computed(() => pickField(patientData.value, ['cidade', 'city']));
const estado      = computed(() => pickField(patientData.value, ['estado', 'state']));
const endereco    = computed(() => pickField(patientData.value, ['endereco', 'address_line']));
const numero      = computed(() => pickField(patientData.value, ['numero', 'address_number']));
const bairro      = computed(() => pickField(patientData.value, ['bairro', 'neighborhood']));
const complemento = computed(() => pickField(patientData.value, ['complemento', 'address_complement']));

// Dados Adicionais
const escolaridade    = computed(() => pickField(patientData.value, ['escolaridade', 'education', 'education_level']));
const profissao       = computed(() => pickField(patientData.value, ['profissao', 'profession']));
const nomeParente     = computed(() => pickField(patientData.value, ['nome_parente', 'relative_name']));
const grauParentesco  = computed(() => pickField(patientData.value, ['grau_parentesco', 'relative_relation']));
const telefoneParente = computed(() => pickField(patientData.value, ['telefone_parente', 'relative_phone']));

// Responsável (pra menores)
const nomeResponsavel       = computed(() => pickField(patientData.value, ['nome_responsavel', 'guardian_name']));
const cpfResponsavel        = computed(() => pickField(patientData.value, ['cpf_responsavel', 'guardian_cpf']));
const telefoneResponsavel   = computed(() => pickField(patientData.value, ['telefone_responsavel', 'guardian_phone']));
const observacaoResponsavel = computed(() => pickField(patientData.value, ['observacao_responsavel', 'guardian_note']));

// Grupos como string label (Origem na Informacoes Pessoais)
const groupNames = computed(() => detail.groups.value.map((g) => g?.name).filter(Boolean));
const groupLabel = computed(() => groupNames.value.length ? groupNames.value.join(', ') : '—');
const groupCountLabel = computed(() => groupNames.value.length <= 1 ? 'Grupo' : 'Grupos');

// ── Tab Agenda: filtros + agrupamento por mes ──────────────
const agendaSessoesFiltradas = computed(() => {
    const list = sessionsHook.sessions.value;
    const now = Date.now();
    switch (agendaFilter.value) {
        case 'future': return list.filter((s) => s.inicio_em && new Date(s.inicio_em).getTime() > now);
        case 'past':   return list.filter((s) => s.inicio_em && new Date(s.inicio_em).getTime() <= now);
        case 'realiz': return list.filter((s) => /realiz|present/i.test(String(s.status || '')));
        case 'falt':   return list.filter((s) => /falt/i.test(String(s.status || ''))) ;
        case 'cancel': return list.filter((s) => /cancel|remarca/i.test(String(s.status || '')));
        default:       return list;
    }
});
// Agrupa por "Mes de YYYY" mantendo ordem DESC (mais recente primeiro)
const agendaAgrupadas = computed(() => {
    const groups = [];
    let key = null;
    for (const ev of agendaSessoesFiltradas.value) {
        if (!ev.inicio_em) continue;
        const d = new Date(ev.inicio_em);
        const k = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
        if (k !== key) {
            key = k;
            groups.push({
                key: k,
                label: d.toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' })
                    .replace(/(^|\s)\S/g, (l) => l.toUpperCase()),
                items: []
            });
        }
        groups[groups.length - 1].items.push(ev);
    }
    return groups;
});

// Handler de mutacao financeira: marcar pago / reverter
async function markRecordPaid(record) {
    const result = await financialHook.markPaid(record.id);
    if (result.ok) {
        toast.add({ severity: 'success', summary: 'Lançamento marcado como pago', life: 2200 });
    } else {
        toast.add({
            severity: 'error',
            summary: 'Falha ao marcar pago',
            detail: result.error || 'Erro inesperado',
            life: 4000
        });
    }
}
async function revertRecordPaid(record) {
    const result = await financialHook.markUnpaid(record.id);
    if (result.ok) {
        toast.add({ severity: 'success', summary: 'Pagamento revertido', life: 2200 });
    } else {
        toast.add({
            severity: 'error',
            summary: 'Falha ao reverter',
            detail: result.error || 'Erro inesperado',
            life: 4000
        });
    }
}

// Handler de mutacao de status (Realizada / Falta / Cancelar)
async function updateSessionStatus(ev, novoStatus, msg) {
    const result = await sessionsHook.updateStatus(ev.id, novoStatus);
    if (result.ok) {
        toast.add({ severity: 'success', summary: msg, life: 2200 });
    } else {
        toast.add({
            severity: 'error',
            summary: 'Falha ao atualizar',
            detail: result.error || 'Erro inesperado',
            life: 4000
        });
    }
}

// ── Tab Prontuario: lista filtrada de sessoes ──────────────
// MVP enquanto anamnese/evolucao_clinica nao existem no schema:
// usa agenda_eventos.observacoes como nota evolutiva.
const pronSessions = computed(() => {
    const all = sessionsHook.sessions.value;
    if (pronFilter.value === 'todas') return all;
    if (pronFilter.value === 'com-evolucao') {
        return all.filter((s) => s.observacoes && String(s.observacoes).trim());
    }
    if (pronFilter.value === 'realiz') {
        return all.filter((s) => /realiz|present/i.test(String(s.status || '')));
    }
    if (pronFilter.value === 'falt') {
        return all.filter((s) => /falt/i.test(String(s.status || '')));
    }
    if (pronFilter.value === 'cancel') {
        return all.filter((s) => /cancel|remarca/i.test(String(s.status || '')));
    }
    return all;
});
const pronSessionsCount = computed(() => pronSessions.value.length);
const sessoesComEvolucao = computed(() =>
    sessionsHook.sessions.value.filter((s) => s.observacoes && String(s.observacoes).trim()).length
);

// ── KPIs Visao Geral (Fase 2) ──────────────────────────────
const kpiSessoes = computed(() => sessionsHook.totalSessoes.value);
const kpiRealizadas = computed(() => sessionsHook.totalRealizadas.value);
const kpiMensagens = computed(() => messagesHook.messages.value.length);
const kpiDocumentos = computed(() => documentsHook.total.value);

// ── Acoes ──────────────────────────────────────────────────
function close() { emit('close'); }
function editPatient() { emit('edit', props.patientId); }
function addFinancial() { emit('add-financial', props.patientId); }
function openWhatsapp() { emit('open-whatsapp', props.patientId); }

// ── Load data quando patientId muda ────────────────────────
async function loadAll(id) {
    if (!id) return;
    await Promise.all([
        detail.load(id),
        sessionsHook.load(id),
        financialHook.load(id),
        messagesHook.load(id),
        documentsHook.load(id)
    ]);
}

watch(() => props.patientId, async (id) => {
    activeTab.value = 'overview';
    activeProfileSection.value = 'pessoais';
    await loadAll(id);
}, { immediate: true });

// ── Lifecycle (matchMedia) ─────────────────────────────────
onMounted(() => {
    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); }
    }
});

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

</script>

<template>
    <Transition name="mpa-drawer-fade">
        <div
            v-show="isMobile && drawerOpen"
            class="mpa-mobile-drawer"
            :class="{ 'is-open': drawerOpen }"
        >
            <div id="mpa-mobile-drawer-target" class="mpa-mobile-drawer__scroll" />
        </div>
    </Transition>
    <Transition name="mpa-drawer-fade">
        <div
            v-show="isMobile && drawerOpen"
            class="mpa-mobile-drawer__backdrop"
            @click="fecharDrawer"
        />
    </Transition>

    <section class="mpa-page">
        <!-- ── Header ── -->
        <header class="mpa-page__head">
            <button
                class="mpa-menu-btn mpa-menu-btn--mobile-only"
                v-tooltip.bottom="'Ações & Navegação'"
                @click="toggleDrawer"
            >
                <i class="pi pi-bars" />
                <span>Menu</span>
            </button>
            <div class="mpa-page__title">
                <div v-if="avatarUrl" class="mpa-head__avatar">
                    <img :src="avatarUrl" alt="" />
                </div>
                <div v-else class="mpa-head__avatar mpa-head__avatar--initials">
                    <span>{{ avatarInitials }}</span>
                </div>
                <div class="mpa-head__id">
                    <div class="mpa-head__name">{{ dash(nomeCompleto) }}</div>
                    <div class="mpa-head__meta">
                        <span v-if="ageLabel">{{ ageLabel }}</span>
                        <span v-if="patientData.pronomes" class="mpa-head__sep">·</span>
                        <span v-if="patientData.pronomes">{{ patientData.pronomes }}</span>
                        <Tag v-if="statusPaciente" :value="statusPaciente" severity="success" class="mpa-head__tag" />
                        <Tag v-if="convenio" :value="convenio" severity="info" class="mpa-head__tag" />
                        <span v-if="riscoElevado" class="mpa-head__risk">
                            <i class="pi pi-exclamation-circle" />
                            risco
                        </span>
                    </div>
                </div>
            </div>
            <div class="mpa-page__actions">
                <button class="mpa-act-btn" v-tooltip.bottom="'Conversar via WhatsApp'" @click="openWhatsapp">
                    <i class="pi pi-whatsapp" />
                </button>
                <button class="mpa-act-btn" v-tooltip.bottom="'Editar paciente'" @click="editPatient">
                    <i class="pi pi-pencil" />
                </button>
                <button class="mpa-close" v-tooltip.bottom="'Voltar (Esc)'" @click="close">
                    <i class="pi pi-times" />
                </button>
            </div>
        </header>

        <!-- Banner de risco elevado (subheader) -->
        <div v-if="riscoElevado" class="mpa-subheader mpa-subheader--risk">
            <i class="pi pi-exclamation-triangle mpa-subheader__icon" />
            <span class="mpa-subheader__text">
                <strong>Risco elevado sinalizado</strong> — mantenha atenção redobrada na próxima sessão.
            </span>
        </div>

        <!-- Body 2-col -->
        <div class="mpa-body">
            <!-- ═══ COL 1: Sidebar — esquerda ═══ -->
            <Teleport to="#mpa-mobile-drawer-target" :disabled="!isMobile">
                <aside class="mpa-side">
                    <button class="mpa-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 mpa-cfg-btn__chev" />
                    </button>
                    <div v-if="cfgOpen" class="mpa-side__scroll mpa-side__scroll--cfg">
                        <MelissaConfigList @select="fecharCfg" />
                    </div>
                    <div v-else class="mpa-side__scroll">
                        <!-- Card: Acoes rapidas -->
                        <div class="mpa-w mpa-w--side">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon"><i class="pi pi-bolt" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">Ações rápidas</div>
                                    <div class="mpa-w__sub">Atalhos pra sessão atual</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <button type="button" class="mpa-quick-btn" @click="openWhatsapp">
                                    <i class="pi pi-whatsapp" :style="{ color: '#22c55e' }" />
                                    <span>Conversar</span>
                                </button>
                                <button type="button" class="mpa-quick-btn" @click="editPatient">
                                    <i class="pi pi-pencil" :style="{ color: '#3b82f6' }" />
                                    <span>Editar dados</span>
                                </button>
                                <button type="button" class="mpa-quick-btn" @click="addFinancial">
                                    <i class="pi pi-plus" :style="{ color: '#f59e0b' }" />
                                    <span>Lançamento</span>
                                </button>
                            </div>
                        </div>

                        <!-- Card: Navegacao (tabs) -->
                        <div class="mpa-w mpa-w--side">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon"><i class="pi pi-list" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">Navegação</div>
                                    <div class="mpa-w__sub">Click pra trocar de aba</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <button
                                    v-for="t in TABS"
                                    :key="t.key"
                                    type="button"
                                    class="mpa-tab-btn"
                                    :class="{ 'is-active': activeTab === t.key }"
                                    @click="selectTab(t.key)"
                                >
                                    <div
                                        class="mpa-tab-btn__icon"
                                        :style="{
                                            background: t.color + '22',
                                            color: t.color
                                        }"
                                    >
                                        <i :class="t.icon" />
                                    </div>
                                    <span class="mpa-tab-btn__label">{{ t.label }}</span>
                                    <i class="pi pi-chevron-right mpa-tab-btn__chev" />
                                </button>
                            </div>
                        </div>

                        <!-- Sub-nav Perfil (so quando aba Perfil ativa, desktop) -->
                        <div v-if="activeTab === 'perfil'" class="mpa-w mpa-w--side">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon"><i class="pi pi-user" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">Seções do perfil</div>
                                    <div class="mpa-w__sub">Acordeão</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <button
                                    v-for="s in PROFILE_SECTIONS"
                                    :key="s.key"
                                    type="button"
                                    class="mpa-tab-btn mpa-tab-btn--sub"
                                    :class="{ 'is-active': activeProfileSection === s.key }"
                                    @click="scrollToProfileSection(s.key)"
                                >
                                    <i :class="s.icon" class="mpa-tab-btn__sub-icon" />
                                    <span class="mpa-tab-btn__label">{{ s.label }}</span>
                                </button>
                            </div>
                        </div>

                        <!-- Tags + grupos (preview compacto) -->
                        <div v-if="detail.groups.value.length || detail.tags.value.length" class="mpa-w mpa-w--side">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon"><i class="pi pi-tag" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">Vínculos</div>
                                    <div class="mpa-w__sub">Grupos e tags</div>
                                </div>
                            </div>
                            <div class="mpa-w__body mpa-w__body--chips">
                                <span v-for="g in detail.groups.value" :key="`g-${g.id}`" class="mpa-chip mpa-chip--group">
                                    <i class="pi pi-th-large" />
                                    {{ g.name }}
                                </span>
                                <span v-for="t in detail.tags.value" :key="`t-${t.id}`" class="mpa-chip" :style="tagStyle(t)">
                                    {{ t.name }}
                                </span>
                            </div>
                        </div>
                    </div>
                </aside>
            </Teleport>

            <!-- ═══ COL 2: Main — tab content ═══ -->
            <div class="mpa-main">
                <!-- Loading -->
                <template v-if="detail.loading.value">
                    <div class="mpa-w" v-for="n in 3" :key="`sk-${n}`">
                        <div class="mpa-w__body">
                            <Skeleton width="40%" height="20px" class="mb-3" />
                            <Skeleton v-for="m in 3" :key="`sk-${n}-${m}`" width="100%" height="36px" class="mb-2" />
                        </div>
                    </div>
                </template>

                <!-- Erro -->
                <template v-else-if="detail.loadError.value">
                    <div class="mpa-error">
                        <i class="pi pi-exclamation-circle" />
                        <div>
                            <div class="mpa-error__title">Falha ao carregar</div>
                            <div class="mpa-error__detail">{{ detail.loadError.value }}</div>
                        </div>
                    </div>
                </template>

                <!-- Conteudo de cada aba -->
                <template v-else>
                    <!-- ABA: Visao Geral (Fase 2 — KPIs + Timeline + Mensagens + Notas) -->
                    <div v-if="activeTab === 'overview'" class="mpa-tab">
                        <!-- ── 4 KPI cards ──────────────────────── -->
                        <div class="mpa-kpis">
                            <!-- 01 Sessoes -->
                            <article class="mpa-kpi" style="--c:#4ade80">
                                <span class="mpa-kpi__num">01</span>
                                <header class="mpa-kpi__head">
                                    <div class="mpa-kpi__icon"><i class="pi pi-check-circle" /></div>
                                    <span class="mpa-kpi__tag">Sessões</span>
                                </header>
                                <div class="mpa-kpi__big">{{ kpiRealizadas }}</div>
                                <div class="mpa-kpi__cap">
                                    de {{ kpiSessoes }} totais
                                    <span v-if="sessionsHook.totalFaltas.value" class="mpa-kpi__cap-warn">
                                        · {{ sessionsHook.totalFaltas.value }}
                                        {{ sessionsHook.totalFaltas.value === 1 ? 'falta' : 'faltas' }}
                                    </span>
                                    <span v-if="sessionsHook.totalCanceladas.value" class="mpa-kpi__cap-dim">
                                        · {{ sessionsHook.totalCanceladas.value }} cancel.
                                    </span>
                                </div>
                            </article>

                            <!-- 02 Pagamento -->
                            <article
                                class="mpa-kpi"
                                :style="financialHook.statusFinanceiro.value.emDia === false
                                    ? '--c:#f87171'
                                    : '--c:var(--p-primary-color)'"
                            >
                                <span class="mpa-kpi__num">02</span>
                                <header class="mpa-kpi__head">
                                    <div class="mpa-kpi__icon"><i class="pi pi-wallet" /></div>
                                    <span class="mpa-kpi__tag">Pagamento</span>
                                </header>
                                <template v-if="financialHook.loading.value">
                                    <div class="mpa-kpi__big mpa-kpi__big--small">…</div>
                                    <div class="mpa-kpi__cap">Carregando</div>
                                </template>
                                <template v-else-if="!financialHook.records.value.length">
                                    <div class="mpa-kpi__big mpa-kpi__big--small">—</div>
                                    <div class="mpa-kpi__cap">Sem lançamentos</div>
                                </template>
                                <template v-else>
                                    <div class="mpa-kpi__big mpa-kpi__big--small">
                                        {{ financialHook.statusFinanceiro.value.emDia === false ? 'Em atraso' : 'Em dia' }}
                                    </div>
                                    <div class="mpa-kpi__cap">
                                        <template v-if="financialHook.statusFinanceiro.value.proxVenc">
                                            Próx. venc. {{ fmtDateBR(financialHook.statusFinanceiro.value.proxVenc.due_date) }}
                                            <span class="mpa-kpi__cap-dim">
                                                · {{ fmtRelative(financialHook.statusFinanceiro.value.proxVenc.due_date) }}
                                            </span>
                                        </template>
                                        <template v-else-if="financialHook.statusFinanceiro.value.totalPendente > 0">
                                            {{ fmtCurrency(financialHook.statusFinanceiro.value.totalPendente) }} pendente
                                        </template>
                                        <template v-else>Tudo quitado</template>
                                    </div>
                                </template>
                            </article>

                            <!-- 03 Proxima sessao -->
                            <article class="mpa-kpi" style="--c:#60a5fa">
                                <span class="mpa-kpi__num">03</span>
                                <header class="mpa-kpi__head">
                                    <div class="mpa-kpi__icon"><i class="pi pi-calendar-clock" /></div>
                                    <span class="mpa-kpi__tag">Próxima</span>
                                </header>
                                <template v-if="sessionsHook.proximaSessao.value">
                                    <div class="mpa-kpi__big mpa-kpi__big--small">
                                        {{ fmtRelative(sessionsHook.proximaSessao.value.inicio_em) }}
                                    </div>
                                    <div class="mpa-kpi__cap">
                                        {{ fmtDateTimeBR(sessionsHook.proximaSessao.value.inicio_em) }}
                                        <span v-if="sessionsHook.proximaSessao.value.modalidade" class="mpa-kpi__cap-dim">
                                            · {{ sessionsHook.proximaSessao.value.modalidade === 'online' ? 'Online' : 'Presencial' }}
                                        </span>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="mpa-kpi__big mpa-kpi__big--small">—</div>
                                    <div class="mpa-kpi__cap">Sem sessão futura agendada</div>
                                </template>
                            </article>

                            <!-- 04 Mensagens -->
                            <article class="mpa-kpi" style="--c:#34d399">
                                <span class="mpa-kpi__num">04</span>
                                <header class="mpa-kpi__head">
                                    <div class="mpa-kpi__icon"><i class="pi pi-comments" /></div>
                                    <span class="mpa-kpi__tag">Mensagens</span>
                                </header>
                                <template v-if="messagesHook.loading.value">
                                    <div class="mpa-kpi__big mpa-kpi__big--small">…</div>
                                    <div class="mpa-kpi__cap">Carregando</div>
                                </template>
                                <template v-else-if="messagesHook.ultimaMensagem.value">
                                    <div class="mpa-kpi__big mpa-kpi__big--small">
                                        {{ fmtRelative(messagesHook.ultimaMensagem.value.created_at) }}
                                    </div>
                                    <div class="mpa-kpi__cap">
                                        Última {{ messagesHook.ultimaMensagem.value.direction === 'inbound' ? 'recebida' : 'enviada' }}
                                        <span class="mpa-kpi__cap-dim">· {{ kpiMensagens }} no histórico</span>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="mpa-kpi__big mpa-kpi__big--small">—</div>
                                    <div class="mpa-kpi__cap">Nenhuma conversa registrada</div>
                                </template>
                            </article>
                        </div>

                        <!-- ── Grid 2-col: Timeline + Mensagens/Notas ── -->
                        <div class="mpa-grid">
                            <!-- Timeline -->
                            <section class="mpa-panel">
                                <header class="mpa-panel__head">
                                    <div class="mpa-panel__title"><i class="pi pi-history" /> Timeline de atendimentos</div>
                                    <span class="mpa-panel__badge">{{ sessionsHook.ultimasAtendidas.value.length }}</span>
                                </header>
                                <div class="mpa-panel__body">
                                    <div v-if="sessionsHook.loading.value" class="mpa-empty">Carregando…</div>
                                    <div v-else-if="!sessionsHook.ultimasAtendidas.value.length" class="mpa-empty mpa-empty--rich">
                                        <div class="mpa-empty__icon"><i class="pi pi-history" /></div>
                                        <div class="mpa-empty__title">Sem atendimentos registrados</div>
                                        <div class="mpa-empty__sub">As sessões realizadas aparecerão aqui em ordem cronológica.</div>
                                    </div>
                                    <ol v-else class="mpa-timeline">
                                        <li
                                            v-for="s in sessionsHook.ultimasAtendidas.value"
                                            :key="s.id"
                                            class="mpa-tl"
                                            :data-status="String(s.status || 'agendado').toLowerCase()"
                                        >
                                            <span class="mpa-tl__dot" />
                                            <div class="mpa-tl__main">
                                                <div class="mpa-tl__top">
                                                    <span class="mpa-tl__when">{{ fmtDateTimeBR(s.inicio_em) }}</span>
                                                    <span class="mpa-tl__rel">{{ fmtRelative(s.inicio_em) }}</span>
                                                </div>
                                                <div class="mpa-tl__row">
                                                    <Tag
                                                        :value="STATUS_LABEL[s.status] || s.status || '—'"
                                                        :severity="STATUS_SEVERITY[s.status] || 'info'"
                                                        class="mpa-tl__tag"
                                                    />
                                                    <span v-if="s.modalidade" class="mpa-tl__chip">
                                                        <i :class="s.modalidade === 'online' ? 'pi pi-video' : 'pi pi-map-marker'" />
                                                        {{ s.modalidade === 'online' ? 'Online' : 'Presencial' }}
                                                    </span>
                                                    <span v-if="sessionDuration(s.inicio_em, s.fim_em)" class="mpa-tl__chip mpa-tl__chip--dim">
                                                        <i class="pi pi-clock" />
                                                        {{ sessionDuration(s.inicio_em, s.fim_em) }}
                                                    </span>
                                                </div>
                                                <p v-if="s.observacoes" class="mpa-tl__note">{{ s.observacoes }}</p>
                                            </div>
                                        </li>
                                    </ol>
                                </div>
                            </section>

                            <!-- Coluna direita: Mensagens + Notas -->
                            <div class="mpa-grid__col">
                                <!-- Mensagens recentes -->
                                <section class="mpa-panel">
                                    <header class="mpa-panel__head">
                                        <div class="mpa-panel__title"><i class="pi pi-comments" /> Últimas mensagens</div>
                                        <span class="mpa-panel__badge">{{ kpiMensagens }}</span>
                                    </header>
                                    <div class="mpa-panel__body">
                                        <div v-if="messagesHook.loading.value" class="mpa-empty">Carregando…</div>
                                        <div v-else-if="!messagesHook.recentes.value.length" class="mpa-empty mpa-empty--rich">
                                            <div class="mpa-empty__icon"><i class="pi pi-comments" /></div>
                                            <div class="mpa-empty__title">Sem conversa registrada</div>
                                            <div class="mpa-empty__sub">As últimas mensagens aparecerão aqui.</div>
                                        </div>
                                        <ul v-else class="mpa-msgs">
                                            <li
                                                v-for="m in messagesHook.recentes.value"
                                                :key="m.id"
                                                class="mpa-msg"
                                                :class="m.direction === 'inbound' ? 'mpa-msg--in' : 'mpa-msg--out'"
                                            >
                                                <div class="mpa-msg__meta">
                                                    <i :class="m.direction === 'inbound' ? 'pi pi-arrow-down-left' : 'pi pi-arrow-up-right'" />
                                                    <span>{{ m.direction === 'inbound' ? 'Recebida' : 'Enviada' }}</span>
                                                    <span class="mpa-msg__sep">·</span>
                                                    <span>{{ fmtRelative(m.created_at) }}</span>
                                                </div>
                                                <p class="mpa-msg__body">{{ m.body || '—' }}</p>
                                            </li>
                                        </ul>
                                    </div>
                                </section>

                                <!-- Notas e observacoes -->
                                <section v-if="notasInternas || observacoes" class="mpa-panel">
                                    <header class="mpa-panel__head">
                                        <div class="mpa-panel__title"><i class="pi pi-file-edit" /> Notas e observações</div>
                                    </header>
                                    <div class="mpa-panel__body mpa-notes">
                                        <div v-if="observacoes" class="mpa-note">
                                            <p class="mpa-note__label">Observações gerais</p>
                                            <p class="mpa-note__text">{{ observacoes }}</p>
                                        </div>
                                        <div v-if="notasInternas" class="mpa-note">
                                            <p class="mpa-note__label">
                                                <i class="pi pi-lock" /> Internas
                                            </p>
                                            <p class="mpa-note__text">{{ notasInternas }}</p>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>

                    <!-- ABA: Perfil (Fase 3 — 6 sections stacked com anchors) -->
                    <div v-else-if="activeTab === 'perfil'" class="mpa-tab">
                        <!-- ── 1. Informacoes Pessoais ── -->
                        <section id="mpa-perfil-pessoais" class="mpa-w">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon mpa-w__icon--blue"><i class="pi pi-pencil" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">1. Informações Pessoais</div>
                                    <div class="mpa-w__sub">Cadastro, contato e origem</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <div class="mpa-fields-grid">
                                    <!-- Dados de cadastro -->
                                    <div class="mpa-fields">
                                        <p class="mpa-fields__label">Dados de cadastro</p>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Nome completo</span>
                                            <span class="mpa-field-row__v">{{ dash(nomeCompleto) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Data de nascimento</span>
                                            <span class="mpa-field-row__v">
                                                {{ fmtDateBR(birthValue) }}
                                                <span v-if="calcAge(birthValue) != null" class="mpa-field-row__v-dim">
                                                    ({{ calcAge(birthValue) }} a)
                                                </span>
                                            </span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Gênero</span>
                                            <span class="mpa-field-row__v">{{ fmtGender(genero) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Estado civil</span>
                                            <span class="mpa-field-row__v">{{ fmtMarital(estadoCivil) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">CPF</span>
                                            <span class="mpa-field-row__v mpa-field-row__v--mono">{{ fmtCPF(patientData.cpf) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">RG</span>
                                            <span class="mpa-field-row__v mpa-field-row__v--mono">{{ fmtRG(patientData.rg) }}</span>
                                        </div>
                                        <div class="mpa-field-row mpa-field-row--last">
                                            <span class="mpa-field-row__k">Naturalidade</span>
                                            <span class="mpa-field-row__v">{{ dash(naturalidade) }}</span>
                                        </div>
                                    </div>

                                    <!-- Contato + Origem -->
                                    <div class="mpa-fields-stack">
                                        <div class="mpa-fields">
                                            <p class="mpa-fields__label">Contato</p>
                                            <div class="mpa-field-row">
                                                <span class="mpa-field-row__k">Telefone / Celular</span>
                                                <a v-if="telefone" :href="`tel:${telefone}`" class="mpa-field-row__v mpa-field-row__v--link">
                                                    {{ fmtPhoneMobile(telefone) }}
                                                </a>
                                                <span v-else class="mpa-field-row__v">—</span>
                                            </div>
                                            <div class="mpa-field-row">
                                                <span class="mpa-field-row__k">Telefone alternativo</span>
                                                <a v-if="telefoneAlternativo" :href="`tel:${telefoneAlternativo}`" class="mpa-field-row__v mpa-field-row__v--link">
                                                    {{ fmtPhoneMobile(telefoneAlternativo) }}
                                                </a>
                                                <span v-else class="mpa-field-row__v">—</span>
                                            </div>
                                            <div class="mpa-field-row">
                                                <span class="mpa-field-row__k">E-mail principal</span>
                                                <a v-if="emailPrincipal" :href="`mailto:${emailPrincipal}`" class="mpa-field-row__v mpa-field-row__v--link mpa-field-row__v--truncate">
                                                    {{ emailPrincipal }}
                                                </a>
                                                <span v-else class="mpa-field-row__v">—</span>
                                            </div>
                                            <div class="mpa-field-row mpa-field-row--last">
                                                <span class="mpa-field-row__k">E-mail alternativo</span>
                                                <a v-if="emailAlternativo" :href="`mailto:${emailAlternativo}`" class="mpa-field-row__v mpa-field-row__v--link mpa-field-row__v--truncate">
                                                    {{ emailAlternativo }}
                                                </a>
                                                <span v-else class="mpa-field-row__v">—</span>
                                            </div>
                                        </div>

                                        <div class="mpa-fields">
                                            <p class="mpa-fields__label">Origem</p>
                                            <div class="mpa-field-row">
                                                <span class="mpa-field-row__k">{{ groupCountLabel }}</span>
                                                <span class="mpa-field-row__v">{{ groupLabel }}</span>
                                            </div>
                                            <div class="mpa-field-row mpa-field-row--align-start">
                                                <span class="mpa-field-row__k">Tags</span>
                                                <div class="mpa-field-row__chips">
                                                    <span v-for="t in detail.tags.value" :key="t.id" class="mpa-chip" :style="tagStyle(t)">
                                                        {{ t.name }}
                                                    </span>
                                                    <span v-if="!detail.tags.value.length" class="mpa-field-row__v">—</span>
                                                </div>
                                            </div>
                                            <div class="mpa-field-row">
                                                <span class="mpa-field-row__k">Onde nos conheceu?</span>
                                                <span class="mpa-field-row__v">{{ dash(ondeNosConheceu) }}</span>
                                            </div>
                                            <div class="mpa-field-row mpa-field-row--last">
                                                <span class="mpa-field-row__k">Encaminhado por</span>
                                                <span class="mpa-field-row__v">{{ dash(encaminhadoPor) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Observacoes (full-width quando preenchido) -->
                                <div v-if="observacoes" class="mpa-fields mpa-fields--full">
                                    <p class="mpa-fields__label">Observações</p>
                                    <p class="mpa-fields__textblock">{{ observacoes }}</p>
                                </div>
                            </div>
                        </section>

                        <!-- ── 2. Endereco ── -->
                        <section id="mpa-perfil-endereco" class="mpa-w">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon mpa-w__icon--blue"><i class="pi pi-map-marker" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">2. Endereço</div>
                                    <div class="mpa-w__sub">Localização do paciente</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <div class="mpa-fields">
                                    <p class="mpa-fields__label">Localização</p>
                                    <div class="mpa-field-grid-2">
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">CEP</span>
                                            <span class="mpa-field-row__v mpa-field-row__v--mono">{{ dash(cep) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">País</span>
                                            <span class="mpa-field-row__v">{{ dash(pais) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Cidade</span>
                                            <span class="mpa-field-row__v">{{ dash(cidade) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Estado</span>
                                            <span class="mpa-field-row__v">{{ dash(estado) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Endereço</span>
                                            <span class="mpa-field-row__v">{{ dash(endereco) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Número</span>
                                            <span class="mpa-field-row__v">{{ dash(numero) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Bairro</span>
                                            <span class="mpa-field-row__v">{{ dash(bairro) }}</span>
                                        </div>
                                        <div class="mpa-field-row mpa-field-row--last">
                                            <span class="mpa-field-row__k">Complemento</span>
                                            <span class="mpa-field-row__v">{{ dash(complemento) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- ── 3. Dados Adicionais ── -->
                        <section id="mpa-perfil-adicional" class="mpa-w">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon mpa-w__icon--blue"><i class="pi pi-tags" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">3. Dados Adicionais</div>
                                    <div class="mpa-w__sub">Formação e contato familiar</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <div class="mpa-fields">
                                    <p class="mpa-fields__label">Formação & família</p>
                                    <div class="mpa-field-grid-2">
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Escolaridade</span>
                                            <span class="mpa-field-row__v">{{ dash(escolaridade) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Profissão</span>
                                            <span class="mpa-field-row__v">{{ dash(profissao) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Nome de um parente</span>
                                            <span class="mpa-field-row__v">{{ dash(nomeParente) }}</span>
                                        </div>
                                        <div class="mpa-field-row">
                                            <span class="mpa-field-row__k">Grau de parentesco</span>
                                            <span class="mpa-field-row__v">{{ dash(grauParentesco) }}</span>
                                        </div>
                                        <div class="mpa-field-row mpa-field-row--last">
                                            <span class="mpa-field-row__k">Telefone do parente</span>
                                            <a v-if="telefoneParente" :href="`tel:${telefoneParente}`" class="mpa-field-row__v mpa-field-row__v--link">
                                                {{ fmtPhoneMobile(telefoneParente) }}
                                            </a>
                                            <span v-else class="mpa-field-row__v">—</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- ── 4. Responsavel ── -->
                        <section id="mpa-perfil-resp" class="mpa-w">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon mpa-w__icon--blue"><i class="pi pi-users" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">4. Responsável</div>
                                    <div class="mpa-w__sub">Para pacientes menores de idade</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <div class="mpa-fields">
                                    <p class="mpa-fields__label">Dados do responsável</p>
                                    <div class="mpa-field-row">
                                        <span class="mpa-field-row__k">Nome</span>
                                        <span class="mpa-field-row__v">{{ dash(nomeResponsavel) }}</span>
                                    </div>
                                    <div class="mpa-field-row">
                                        <span class="mpa-field-row__k">CPF</span>
                                        <span class="mpa-field-row__v mpa-field-row__v--mono">{{ fmtCPF(cpfResponsavel) }}</span>
                                    </div>
                                    <div class="mpa-field-row" :class="{ 'mpa-field-row--last': !observacaoResponsavel }">
                                        <span class="mpa-field-row__k">Telefone</span>
                                        <a v-if="telefoneResponsavel" :href="`tel:${telefoneResponsavel}`" class="mpa-field-row__v mpa-field-row__v--link">
                                            {{ fmtPhoneMobile(telefoneResponsavel) }}
                                        </a>
                                        <span v-else class="mpa-field-row__v">—</span>
                                    </div>
                                    <div v-if="observacaoResponsavel" class="mpa-field-block mpa-field-block--last">
                                        <p class="mpa-field-block__label">Observação</p>
                                        <p class="mpa-field-block__text">{{ observacaoResponsavel }}</p>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <!-- ── 5. Anotacoes Internas ── -->
                        <section id="mpa-perfil-anot" class="mpa-w">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon mpa-w__icon--blue"><i class="pi pi-file-edit" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">5. Anotações Internas</div>
                                    <div class="mpa-w__sub">Visível só pra você</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <div class="mpa-fields">
                                    <div class="mpa-fields__lock-hint">
                                        <i class="pi pi-lock" />
                                        Campo interno — não aparece no cadastro externo.
                                    </div>
                                    <p class="mpa-fields__textblock mpa-fields__textblock--min">
                                        {{ notasInternas ? notasInternas : '—' }}
                                    </p>
                                </div>
                            </div>
                        </section>

                        <!-- ── 6. Sessoes (mini lista — completa fica na aba Agenda) ── -->
                        <section id="mpa-perfil-sess" class="mpa-w">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon mpa-w__icon--blue"><i class="pi pi-calendar" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">6. Sessões</div>
                                    <div class="mpa-w__sub">{{ kpiSessoes }} no histórico — abertura completa na aba Agenda</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <div v-if="sessionsHook.loading.value" class="mpa-empty">
                                    <i class="pi pi-spin pi-spinner mr-2" /> Carregando sessões…
                                </div>
                                <div v-else-if="!sessionsHook.sessions.value.length" class="mpa-empty mpa-empty--rich">
                                    <div class="mpa-empty__icon"><i class="pi pi-calendar" /></div>
                                    <div class="mpa-empty__title">Nenhuma sessão</div>
                                    <div class="mpa-empty__sub">As sessões agendadas com este paciente aparecerão aqui.</div>
                                </div>
                                <div v-else class="mpa-sess-list">
                                    <div
                                        v-for="s in sessionsHook.sessions.value"
                                        :key="s.id"
                                        class="mpa-sess"
                                    >
                                        <div class="mpa-sess__main">
                                            <p class="mpa-sess__title">
                                                {{ s.titulo_custom || s.titulo || (s.tipo ? s.tipo : 'Sessão') }}
                                            </p>
                                            <div class="mpa-sess__meta">
                                                <span><i class="pi pi-calendar" />{{ fmtDateTimeBR(s.inicio_em) }}</span>
                                                <span v-if="sessionDuration(s.inicio_em, s.fim_em)">
                                                    <i class="pi pi-clock" />{{ sessionDuration(s.inicio_em, s.fim_em) }}
                                                </span>
                                                <span v-if="s.modalidade">
                                                    <i :class="s.modalidade === 'online' ? 'pi pi-video' : 'pi pi-map-marker'" />
                                                    {{ s.modalidade === 'online' ? 'Online' : 'Presencial' }}
                                                </span>
                                            </div>
                                            <p v-if="s.observacoes" class="mpa-sess__obs">{{ s.observacoes }}</p>
                                        </div>
                                        <Tag
                                            :value="STATUS_LABEL[s.status] || s.status || 'Agendado'"
                                            :severity="STATUS_SEVERITY[s.status] || 'info'"
                                            class="mpa-sess__tag"
                                        />
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>

                    <!-- ABA: Prontuario (Fase 4 MVP — evolucao via session.observacoes) -->
                    <div v-else-if="activeTab === 'pron'" class="mpa-tab">
                        <!-- Header explicativo -->
                        <div class="mpa-pron-hint">
                            <i class="pi pi-info-circle" />
                            <div>
                                <strong>Prontuário em construção.</strong>
                                Por enquanto mostra as <strong>observações que você anota nas sessões</strong>
                                como histórico evolutivo. Anamnese estruturada, plano terapêutico e
                                evolução por temas chegam quando o módulo clínico for liberado.
                            </div>
                        </div>

                        <!-- Mini-stats -->
                        <div class="mpa-pron-stats">
                            <article class="mpa-pron-stat" style="--c:#06b6d4">
                                <i class="pi pi-file-edit" />
                                <div>
                                    <div class="mpa-pron-stat__value">{{ sessoesComEvolucao }}</div>
                                    <div class="mpa-pron-stat__label">com evolução</div>
                                </div>
                            </article>
                            <article class="mpa-pron-stat" style="--c:#10b981">
                                <i class="pi pi-check-circle" />
                                <div>
                                    <div class="mpa-pron-stat__value">{{ sessionsHook.totalRealizadas.value }}</div>
                                    <div class="mpa-pron-stat__label">realizadas</div>
                                </div>
                            </article>
                            <article class="mpa-pron-stat" style="--c:#f87171">
                                <i class="pi pi-user-minus" />
                                <div>
                                    <div class="mpa-pron-stat__value">{{ sessionsHook.totalFaltas.value }}</div>
                                    <div class="mpa-pron-stat__label">faltas</div>
                                </div>
                            </article>
                            <article class="mpa-pron-stat" style="--c:#94a3b8">
                                <i class="pi pi-calendar" />
                                <div>
                                    <div class="mpa-pron-stat__value">{{ sessionsHook.totalSessoes.value }}</div>
                                    <div class="mpa-pron-stat__label">total</div>
                                </div>
                            </article>
                        </div>

                        <!-- Filtros -->
                        <div class="mpa-pron-filters" role="tablist">
                            <button
                                v-for="f in PRON_FILTERS"
                                :key="f.value"
                                type="button"
                                role="tab"
                                :aria-selected="pronFilter === f.value"
                                class="mpa-pron-filter"
                                :class="{ 'is-active': pronFilter === f.value }"
                                @click="pronFilter = f.value"
                            >
                                <i :class="f.icon" />
                                <span>{{ f.label }}</span>
                            </button>
                        </div>

                        <!-- Lista de evolução -->
                        <div v-if="sessionsHook.loading.value" class="mpa-empty">
                            <i class="pi pi-spin pi-spinner mr-2" /> Carregando…
                        </div>
                        <div v-else-if="!pronSessionsCount" class="mpa-empty mpa-empty--rich">
                            <div class="mpa-empty__icon"><i class="pi pi-file-edit" /></div>
                            <div class="mpa-empty__title">
                                <template v-if="!sessionsHook.sessions.value.length">
                                    Sem sessões registradas
                                </template>
                                <template v-else-if="pronFilter === 'com-evolucao'">
                                    Nenhuma sessão tem evolução escrita ainda
                                </template>
                                <template v-else>
                                    Nenhuma sessão neste filtro
                                </template>
                            </div>
                            <div class="mpa-empty__sub">
                                <template v-if="pronFilter === 'com-evolucao' && sessionsHook.sessions.value.length">
                                    Use o campo <strong>Observações</strong> ao editar uma sessão pra registrar
                                    como ela transcorreu — vai aparecer aqui como nota evolutiva.
                                </template>
                                <template v-else-if="!sessionsHook.sessions.value.length">
                                    Quando você atender este paciente, as sessões e evoluções aparecerão aqui.
                                </template>
                                <template v-else>
                                    Tente outro filtro acima ou veja "Todas" pra listar o histórico completo.
                                </template>
                            </div>
                        </div>
                        <div v-else class="mpa-pron-list">
                            <article
                                v-for="s in pronSessions"
                                :key="s.id"
                                class="mpa-pron-item"
                                :data-status="String(s.status || 'agendado').toLowerCase()"
                            >
                                <div class="mpa-pron-item__head">
                                    <div class="mpa-pron-item__when">
                                        <span class="mpa-pron-item__date">{{ fmtDateTimeBR(s.inicio_em) }}</span>
                                        <span class="mpa-pron-item__rel">{{ fmtRelative(s.inicio_em) }}</span>
                                    </div>
                                    <div class="mpa-pron-item__chips">
                                        <Tag
                                            :value="STATUS_LABEL[s.status] || s.status || 'Agendado'"
                                            :severity="STATUS_SEVERITY[s.status] || 'info'"
                                            class="mpa-pron-item__tag"
                                        />
                                        <span v-if="s.modalidade" class="mpa-tl__chip">
                                            <i :class="s.modalidade === 'online' ? 'pi pi-video' : 'pi pi-map-marker'" />
                                            {{ s.modalidade === 'online' ? 'Online' : 'Presencial' }}
                                        </span>
                                        <span v-if="sessionDuration(s.inicio_em, s.fim_em)" class="mpa-tl__chip mpa-tl__chip--dim">
                                            <i class="pi pi-clock" /> {{ sessionDuration(s.inicio_em, s.fim_em) }}
                                        </span>
                                    </div>
                                </div>
                                <div v-if="s.titulo_custom || s.titulo" class="mpa-pron-item__title">
                                    {{ s.titulo_custom || s.titulo }}
                                </div>
                                <div v-if="s.observacoes" class="mpa-pron-item__evol">
                                    <div class="mpa-pron-item__evol-label">
                                        <i class="pi pi-file-edit" />
                                        Evolução
                                    </div>
                                    <p class="mpa-pron-item__evol-text">{{ s.observacoes }}</p>
                                </div>
                                <div v-else class="mpa-pron-item__noevol">
                                    <i class="pi pi-circle" />
                                    Sem evolução registrada
                                </div>
                            </article>
                        </div>

                        <!-- Roadmap card "em breve" -->
                        <section class="mpa-w mpa-pron-roadmap">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon mpa-w__icon--cyan"><i class="pi pi-sparkles" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">Em breve no prontuário</div>
                                    <div class="mpa-w__sub">Roadmap clínico previsto</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <ul class="mpa-pron-roadmap__list">
                                    <li>
                                        <i class="pi pi-clipboard" />
                                        <div>
                                            <strong>Anamnese estruturada</strong>
                                            <span>Modelo configurável por terapeuta com seções (queixa, história, hipótese diagnóstica, objetivos).</span>
                                        </div>
                                    </li>
                                    <li>
                                        <i class="pi pi-bullseye" />
                                        <div>
                                            <strong>Plano terapêutico</strong>
                                            <span>Objetivos com prazo + acompanhamento de progresso ao longo das sessões.</span>
                                        </div>
                                    </li>
                                    <li>
                                        <i class="pi pi-tag" />
                                        <div>
                                            <strong>Evolução por temas</strong>
                                            <span>Tagging das notas pra cruzar evolução com objetivos e gerar relatórios.</span>
                                        </div>
                                    </li>
                                    <li>
                                        <i class="pi pi-shield" />
                                        <div>
                                            <strong>Assinatura digital + LGPD Art. 18</strong>
                                            <span>Notas imutáveis com hash de auditoria, exportação compatível CFP.</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </section>
                    </div>

                    <!-- ABA: Agenda (Fase 5 — KPIs + filtros + grupos por mes + acoes) -->
                    <div v-else-if="activeTab === 'agenda'" class="mpa-tab">
                        <!-- Loading -->
                        <div v-if="sessionsHook.loading.value" class="mpa-empty">
                            <i class="pi pi-spin pi-spinner mr-2" /> Carregando…
                        </div>

                        <template v-else>
                            <!-- KPIs (4) -->
                            <div class="mpa-kpis">
                                <article class="mpa-kpi" style="--c:var(--p-primary-color)">
                                    <span class="mpa-kpi__num">01</span>
                                    <header class="mpa-kpi__head">
                                        <div class="mpa-kpi__icon"><i class="pi pi-calendar" /></div>
                                        <span class="mpa-kpi__tag">Total</span>
                                    </header>
                                    <div class="mpa-kpi__big">{{ sessionsHook.totalSessoes.value }}</div>
                                    <div class="mpa-kpi__cap">sessões registradas</div>
                                </article>
                                <article class="mpa-kpi" style="--c:#4ade80">
                                    <span class="mpa-kpi__num">02</span>
                                    <header class="mpa-kpi__head">
                                        <div class="mpa-kpi__icon"><i class="pi pi-check-circle" /></div>
                                        <span class="mpa-kpi__tag">Realizadas</span>
                                    </header>
                                    <div class="mpa-kpi__big">{{ sessionsHook.totalRealizadas.value }}</div>
                                    <div class="mpa-kpi__cap">
                                        <template v-if="sessionsHook.totalSessoes.value">
                                            {{ Math.round((sessionsHook.totalRealizadas.value / sessionsHook.totalSessoes.value) * 100) }}% do total
                                        </template>
                                        <template v-else>—</template>
                                    </div>
                                </article>
                                <article
                                    class="mpa-kpi"
                                    :style="sessionsHook.totalFaltas.value > 0 ? '--c:#f87171' : '--c:#94a3b8'"
                                >
                                    <span class="mpa-kpi__num">03</span>
                                    <header class="mpa-kpi__head">
                                        <div class="mpa-kpi__icon"><i class="pi pi-user-minus" /></div>
                                        <span class="mpa-kpi__tag">Faltas</span>
                                    </header>
                                    <div class="mpa-kpi__big">{{ sessionsHook.totalFaltas.value }}</div>
                                    <div class="mpa-kpi__cap">
                                        <template v-if="sessionsHook.totalCanceladas.value">
                                            + {{ sessionsHook.totalCanceladas.value }} cancel.
                                        </template>
                                        <template v-else>nenhuma falta</template>
                                    </div>
                                </article>
                                <article class="mpa-kpi" style="--c:#60a5fa">
                                    <span class="mpa-kpi__num">04</span>
                                    <header class="mpa-kpi__head">
                                        <div class="mpa-kpi__icon"><i class="pi pi-calendar-clock" /></div>
                                        <span class="mpa-kpi__tag">Próxima</span>
                                    </header>
                                    <template v-if="sessionsHook.proximaSessao.value">
                                        <div class="mpa-kpi__big mpa-kpi__big--small">
                                            {{ fmtRelative(sessionsHook.proximaSessao.value.inicio_em) }}
                                        </div>
                                        <div class="mpa-kpi__cap">
                                            {{ fmtDateBR(sessionsHook.proximaSessao.value.inicio_em) }}
                                            · {{ fmtHourShort(sessionsHook.proximaSessao.value.inicio_em) }}
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div class="mpa-kpi__big mpa-kpi__big--small">—</div>
                                        <div class="mpa-kpi__cap">Sem futura</div>
                                    </template>
                                </article>
                            </div>

                            <!-- Filter chips -->
                            <div class="mpa-pron-filters" role="tablist">
                                <button
                                    v-for="f in AGENDA_FILTERS"
                                    :key="f.value"
                                    type="button"
                                    role="tab"
                                    :aria-selected="agendaFilter === f.value"
                                    class="mpa-pron-filter"
                                    :class="{ 'is-active': agendaFilter === f.value }"
                                    @click="agendaFilter = f.value"
                                >
                                    <i :class="f.icon" />
                                    <span>{{ f.label }}</span>
                                </button>
                            </div>

                            <!-- Empty state contextual -->
                            <div v-if="!agendaAgrupadas.length" class="mpa-empty mpa-empty--rich">
                                <div class="mpa-empty__icon"><i class="pi pi-calendar-times" /></div>
                                <div class="mpa-empty__title">
                                    {{ sessionsHook.sessions.value.length ? 'Nenhuma sessão neste filtro' : 'Sem sessões registradas' }}
                                </div>
                                <div class="mpa-empty__sub">
                                    <template v-if="sessionsHook.sessions.value.length">
                                        Tente outro filtro acima ou veja "Todas" pra listar o histórico completo.
                                    </template>
                                    <template v-else>
                                        As sessões agendadas e atendidas com este paciente aparecerão aqui.
                                    </template>
                                </div>
                            </div>

                            <!-- Grupos por mes -->
                            <section
                                v-for="g in agendaAgrupadas"
                                :key="g.key"
                                class="mpa-panel mpa-ag__group"
                            >
                                <header class="mpa-panel__head">
                                    <div class="mpa-panel__title"><i class="pi pi-calendar" /> {{ g.label }}</div>
                                    <span class="mpa-panel__badge">{{ g.items.length }}</span>
                                </header>
                                <ul class="mpa-ag__list">
                                    <li
                                        v-for="s in g.items"
                                        :key="s.id"
                                        class="mpa-ag__item"
                                        :data-status="String(s.status || 'agendado').toLowerCase()"
                                    >
                                        <!-- Coluna data -->
                                        <div class="mpa-ag__date">
                                            <span class="mpa-ag__date-dow">{{ fmtDayShort(s.inicio_em) }}</span>
                                            <span class="mpa-ag__date-day">{{ new Date(s.inicio_em).getDate() }}</span>
                                            <span class="mpa-ag__date-time">{{ fmtHourShort(s.inicio_em) }}</span>
                                        </div>
                                        <!-- Coluna main -->
                                        <div class="mpa-ag__main">
                                            <div class="mpa-ag__top">
                                                <Tag
                                                    :value="STATUS_LABEL[s.status] || s.status || 'Agendado'"
                                                    :severity="STATUS_SEVERITY[s.status] || 'info'"
                                                    class="mpa-ag__tag"
                                                />
                                                <span v-if="s.modalidade" class="mpa-tl__chip">
                                                    <i :class="s.modalidade === 'online' ? 'pi pi-video' : 'pi pi-map-marker'" />
                                                    {{ s.modalidade === 'online' ? 'Online' : 'Presencial' }}
                                                </span>
                                                <span v-if="sessionDuration(s.inicio_em, s.fim_em)" class="mpa-tl__chip mpa-tl__chip--dim">
                                                    <i class="pi pi-clock" />
                                                    {{ sessionDuration(s.inicio_em, s.fim_em) }}
                                                </span>
                                                <span class="mpa-ag__rel">{{ fmtRelative(s.inicio_em) }}</span>
                                            </div>
                                            <div v-if="s.titulo_custom || s.titulo" class="mpa-ag__title">
                                                {{ s.titulo_custom || s.titulo }}
                                            </div>
                                            <p v-if="s.observacoes" class="mpa-ag__note">{{ s.observacoes }}</p>
                                        </div>
                                        <!-- Coluna actions -->
                                        <div class="mpa-ag__actions">
                                            <button
                                                type="button"
                                                v-tooltip.left="'Marcar como realizada'"
                                                class="mpa-ag__act mpa-ag__act--ok"
                                                :disabled="sessionsHook.busy.value"
                                                @click="updateSessionStatus(s, 'realizado', 'Sessão marcada como realizada')"
                                            >
                                                <i class="pi pi-check-circle" />
                                            </button>
                                            <button
                                                type="button"
                                                v-tooltip.left="'Marcar como falta'"
                                                class="mpa-ag__act mpa-ag__act--warn"
                                                :disabled="sessionsHook.busy.value"
                                                @click="updateSessionStatus(s, 'faltou', 'Marcada como falta')"
                                            >
                                                <i class="pi pi-user-minus" />
                                            </button>
                                            <button
                                                type="button"
                                                v-tooltip.left="'Cancelar'"
                                                class="mpa-ag__act mpa-ag__act--danger"
                                                :disabled="sessionsHook.busy.value"
                                                @click="updateSessionStatus(s, 'cancelado', 'Sessão cancelada')"
                                            >
                                                <i class="pi pi-ban" />
                                            </button>
                                        </div>
                                    </li>
                                </ul>
                            </section>
                        </template>
                    </div>

                    <!-- ABA: Financeiro (Fase 6 — KPIs + tabela + mark paid) -->
                    <div v-else-if="activeTab === 'financ'" class="mpa-tab">
                        <!-- Loading -->
                        <div v-if="financialHook.loading.value" class="mpa-empty">
                            <i class="pi pi-spin pi-spinner mr-2" /> Carregando…
                        </div>

                        <!-- Empty state com CTA -->
                        <div v-else-if="!financialHook.records.value.length" class="mpa-empty mpa-empty--rich">
                            <div class="mpa-empty__icon"><i class="pi pi-wallet" /></div>
                            <div class="mpa-empty__title">Sem lançamentos financeiros</div>
                            <div class="mpa-empty__sub">
                                Adicione o primeiro lançamento de cobrança ou recebimento deste paciente.
                            </div>
                            <button type="button" class="mpa-quick-btn mpa-quick-btn--cta" @click="addFinancial">
                                <i class="pi pi-plus" :style="{ color: '#f59e0b' }" />
                                <span>Novo lançamento</span>
                            </button>
                        </div>

                        <template v-else>
                            <!-- 3 KPIs financeiros -->
                            <div class="mpa-kpis">
                                <article class="mpa-kpi" style="--c:#4ade80">
                                    <span class="mpa-kpi__num">01</span>
                                    <header class="mpa-kpi__head">
                                        <div class="mpa-kpi__icon"><i class="pi pi-check-circle" /></div>
                                        <span class="mpa-kpi__tag">Pago</span>
                                    </header>
                                    <div class="mpa-kpi__big mpa-kpi__big--small">
                                        {{ fmtCurrency(financialHook.statusFinanceiro.value.totalPago) }}
                                    </div>
                                    <div class="mpa-kpi__cap">
                                        {{ financialHook.records.value.filter((r) => !!r.paid_at).length }}
                                        {{ financialHook.records.value.filter((r) => !!r.paid_at).length === 1 ? 'lançamento' : 'lançamentos' }}
                                    </div>
                                </article>

                                <article class="mpa-kpi" style="--c:var(--p-primary-color)">
                                    <span class="mpa-kpi__num">02</span>
                                    <header class="mpa-kpi__head">
                                        <div class="mpa-kpi__icon"><i class="pi pi-clock" /></div>
                                        <span class="mpa-kpi__tag">Pendente</span>
                                    </header>
                                    <div class="mpa-kpi__big mpa-kpi__big--small">
                                        {{ fmtCurrency(financialHook.statusFinanceiro.value.totalPendente) }}
                                    </div>
                                    <div class="mpa-kpi__cap">
                                        <template v-if="financialHook.statusFinanceiro.value.proxVenc">
                                            Próx. venc. {{ fmtDateBR(financialHook.statusFinanceiro.value.proxVenc.due_date) }}
                                        </template>
                                        <template v-else>A receber</template>
                                    </div>
                                </article>

                                <article
                                    class="mpa-kpi"
                                    :style="financialHook.statusFinanceiro.value.vencidos > 0 ? '--c:#f87171' : '--c:#94a3b8'"
                                >
                                    <span class="mpa-kpi__num">03</span>
                                    <header class="mpa-kpi__head">
                                        <div class="mpa-kpi__icon"><i class="pi pi-exclamation-triangle" /></div>
                                        <span class="mpa-kpi__tag">Em atraso</span>
                                    </header>
                                    <div class="mpa-kpi__big">{{ financialHook.statusFinanceiro.value.vencidos }}</div>
                                    <div class="mpa-kpi__cap">
                                        {{ financialHook.statusFinanceiro.value.vencidos === 0
                                            ? 'Tudo em dia'
                                            : (financialHook.statusFinanceiro.value.vencidos === 1 ? 'lançamento vencido' : 'lançamentos vencidos') }}
                                    </div>
                                </article>
                            </div>

                            <!-- Tabela de lançamentos -->
                            <section class="mpa-panel">
                                <header class="mpa-panel__head">
                                    <div class="mpa-panel__title"><i class="pi pi-list" /> Lançamentos</div>
                                    <div class="mpa-fin__head-actions">
                                        <span class="mpa-panel__badge">{{ financialHook.recordsOrdenados.value.length }}</span>
                                        <button type="button" class="mpa-icon-btn-sm" v-tooltip.left="'Novo lançamento'" @click="addFinancial">
                                            <i class="pi pi-plus" />
                                        </button>
                                    </div>
                                </header>
                                <div class="mpa-fin__table" role="table">
                                    <div class="mpa-fin__row mpa-fin__row--head" role="row">
                                        <span role="columnheader">Vencimento</span>
                                        <span role="columnheader">Descrição</span>
                                        <span role="columnheader" class="mpa-fin__col-method">Forma</span>
                                        <span role="columnheader" class="mpa-fin__col-amount">Valor</span>
                                        <span role="columnheader" class="mpa-fin__col-status">Status</span>
                                        <span role="columnheader" class="mpa-fin__col-action"></span>
                                    </div>
                                    <div
                                        v-for="r in financialHook.recordsOrdenados.value"
                                        :key="r.id"
                                        class="mpa-fin__row"
                                        :data-status="recordStatus(r)"
                                        role="row"
                                    >
                                        <span class="mpa-fin__date" role="cell">
                                            <span class="mpa-fin__date-main">
                                                {{ r.due_date ? fmtDateBR(r.due_date) : fmtDateBR(r.created_at) }}
                                            </span>
                                            <span v-if="r.due_date" class="mpa-fin__date-rel">
                                                {{ fmtRelative(r.due_date) }}
                                            </span>
                                        </span>
                                        <span class="mpa-fin__desc" role="cell">
                                            {{ r.description || (r.category ? r.category : 'Lançamento') }}
                                        </span>
                                        <span class="mpa-fin__method" role="cell">
                                            {{ fmtPaymentMethod(r.payment_method) || '—' }}
                                        </span>
                                        <span class="mpa-fin__amount" role="cell">
                                            {{ fmtCurrency(Number(r.amount) || 0) }}
                                        </span>
                                        <span class="mpa-fin__status-cell" role="cell">
                                            <span class="mpa-fin__status" :data-status="recordStatus(r)">
                                                <span class="mpa-fin__status-dot" />
                                                {{ RECORD_STATUS_LABEL[recordStatus(r)] }}
                                            </span>
                                        </span>
                                        <span class="mpa-fin__action" role="cell">
                                            <!-- Marca como pago se ainda nao foi -->
                                            <button
                                                v-if="!r.paid_at"
                                                type="button"
                                                v-tooltip.left="'Marcar como pago'"
                                                class="mpa-ag__act mpa-ag__act--ok"
                                                :disabled="financialHook.busy.value"
                                                @click="markRecordPaid(r)"
                                            >
                                                <i class="pi pi-check" />
                                            </button>
                                            <!-- Reverte pagamento -->
                                            <button
                                                v-else
                                                type="button"
                                                v-tooltip.left="'Reverter pagamento'"
                                                class="mpa-ag__act mpa-ag__act--warn"
                                                :disabled="financialHook.busy.value"
                                                @click="revertRecordPaid(r)"
                                            >
                                                <i class="pi pi-undo" />
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </section>
                        </template>
                    </div>

                    <!-- ABA: Documentos -->
                    <div v-else-if="activeTab === 'doc'" class="mpa-tab">
                        <div class="mpa-w">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon mpa-w__icon--orange"><i class="pi pi-folder" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">Documentos — Fase 7</div>
                                    <div class="mpa-w__sub">Listagem completa + upload + preview</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <p class="mpa-placeholder">
                                    Em desenvolvimento — <strong>Fase 7</strong>. Total: <strong>{{ kpiDocumentos }}</strong> documentos.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- ABA: Conversas -->
                    <div v-else-if="activeTab === 'conv'" class="mpa-tab">
                        <div class="mpa-w">
                            <div class="mpa-w__head">
                                <div class="mpa-w__icon" style="background:#22c55e22;color:#22c55e"><i class="pi pi-whatsapp" /></div>
                                <div class="mpa-w__title">
                                    <div class="mpa-w__title-text">Conversas — Fase 7</div>
                                    <div class="mpa-w__sub">Thread completa + envio</div>
                                </div>
                            </div>
                            <div class="mpa-w__body">
                                <p class="mpa-placeholder">
                                    Em desenvolvimento — <strong>Fase 7</strong>. {{ messagesHook.totalIn.value }} recebidas
                                    / {{ messagesHook.totalOut.value }} enviadas.
                                </p>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </section>
</template>

<style scoped>
/* ═══════ Page chrome (espelha MelissaAgendador/Negocio) ═══════ */
.mpa-page {
    position: absolute;
    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) var(--m-config-aside-left, 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: mpa-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes mpa-page-enter {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

/* ═══════ Page chrome em desktop — fica do mesmo tamanho dos outros ═══════ */
@media (min-width: 1024px) {
    .mpa-page {
        right: max(6px, min(50%, calc(100% - 1006px)));
    }
}

.mpa-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;
}
.mpa-page__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.mpa-head__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.mpa-head__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mpa-head__avatar--initials {
    background: color-mix(in srgb, var(--p-primary-color) 18%, transparent);
    color: var(--p-primary-color);
    font-weight: 800;
    font-size: 0.92rem;
}
.mpa-head__id {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mpa-head__name {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--m-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mpa-head__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--m-text-muted);
}
.mpa-head__sep { opacity: 0.4; }
.mpa-head__tag {
    font-size: 0.66rem !important;
    margin-left: 2px;
}
.mpa-head__risk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(220, 38, 38, 0.12);
    color: rgb(220, 38, 38);
    border: 1px solid rgba(220, 38, 38, 0.35);
    font-size: 0.66rem;
    font-weight: 700;
}
.mpa-head__risk > i { font-size: 0.66rem; }

.mpa-page__actions { display: flex; align-items: center; gap: 6px; }
.mpa-act-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.mpa-act-btn:hover { background: var(--m-bg-soft-hover); }
.mpa-act-btn > i { font-size: 0.85rem; }

.mpa-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;
}
.mpa-close:hover { background: var(--m-bg-soft-hover); color: var(--m-text); }

.mpa-menu-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    border-radius: 8px;
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background-color 140ms ease;
}
.mpa-menu-btn:hover { background: var(--m-bg-soft-hover); }
.mpa-menu-btn > i { font-size: 0.78rem; color: var(--p-primary-color); }

.mpa-subheader {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    font-size: 0.78rem;
    color: var(--m-text-muted);
    line-height: 1.45;
    flex-shrink: 0;
}
.mpa-subheader--risk {
    background: rgba(220, 38, 38, 0.10);
    border-bottom-color: rgba(220, 38, 38, 0.30);
    color: rgb(180, 33, 33);
}
.mpa-subheader__icon { font-size: 0.92rem; flex-shrink: 0; margin-top: 1px; }
.mpa-subheader__text { flex: 1; min-width: 0; }
.mpa-subheader__text strong { font-weight: 700; color: var(--m-text); }
.mpa-subheader--risk .mpa-subheader__text strong { color: rgb(180, 33, 33); }

/* ═══════ Body 2-col ═══════ */
.mpa-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}
.mpa-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;
}
.mpa-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;
}
.mpa-side__scroll::-webkit-scrollbar { width: 5px; }
.mpa-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

.mpa-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;
}
.mpa-cfg-btn:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mpa-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);
}
.mpa-cfg-btn > i:first-child {
    color: var(--p-primary-color);
    font-size: 0.92rem;
}
.mpa-cfg-btn > span { flex: 1; }
.mpa-cfg-btn__chev {
    color: var(--m-text-muted);
    font-size: 0.7rem;
}
.mpa-side__scroll--cfg {
    padding: 8px;
    gap: 0;
}

.mpa-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;
}
.mpa-main::-webkit-scrollbar { width: 5px; }
.mpa-main::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

@media (min-width: 1024px) {
    .mpa-main {
        max-width: 1100px;
        margin: 0 auto;
        width: 100%;
    }
    .mpa-main > .mpa-w {
        height: auto;
        flex-shrink: 0;
    }
}

/* ═══════ Card-base ═══════ */
.mpa-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;
}
.mpa-w--side {
    background: var(--m-bg-medium);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}
.mpa-w__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--m-border);
}
.mpa-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);
}
.mpa-w__icon > i { font-size: 0.95rem; }
.mpa-w__icon--blue   { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #3b82f6; }
.mpa-w__icon--cyan   { background: color-mix(in srgb, #06b6d4 15%, transparent); color: #06b6d4; }
.mpa-w__icon--green  { background: color-mix(in srgb, #10b981 15%, transparent); color: #10b981; }
.mpa-w__icon--orange { background: color-mix(in srgb, #f97316 15%, transparent); color: #f97316; }
.mpa-w__title { flex: 1; min-width: 0; }
.mpa-w__title-text {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.2;
}
.mpa-w__sub {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.mpa-w__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mpa-w__body--chips {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}

/* ═══════ Quick-action btn (sidebar) ═══════ */
.mpa-quick-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mpa-quick-btn:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mpa-quick-btn > i { font-size: 0.92rem; flex-shrink: 0; }

/* ═══════ Tab btn (sidebar nav) ═══════ */
.mpa-tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mpa-tab-btn:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mpa-tab-btn.is-active {
    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: 700;
}
.mpa-tab-btn__icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    flex-shrink: 0;
}
.mpa-tab-btn__icon > i { font-size: 0.78rem; }
.mpa-tab-btn__label {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mpa-tab-btn__chev {
    color: var(--m-text-muted);
    font-size: 0.7rem;
    opacity: 0.5;
    flex-shrink: 0;
}
.mpa-tab-btn--sub {
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
}
.mpa-tab-btn--sub:hover {
    background: var(--m-bg-soft);
    border-color: var(--m-border);
}
.mpa-tab-btn--sub.is-active {
    background: color-mix(in srgb, var(--p-primary-color) 10%, transparent);
}
.mpa-tab-btn__sub-icon {
    color: var(--m-text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

/* ═══════ Chips (grupos / tags) ═══════ */
.mpa-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
}
.mpa-chip > i { font-size: 0.66rem; }
.mpa-chip--group {
    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
    color: var(--p-primary-color);
    border-color: color-mix(in srgb, var(--p-primary-color) 28%, transparent);
}

/* ═══════ KPIs (Visao Geral Fase 2 — 4 cards ricos) ═══════ */
.mpa-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.mpa-kpi {
    position: relative;
    padding: 14px 14px 12px;
    border-radius: 12px;
    background: var(--m-bg-soft);
    border: 1px solid color-mix(in srgb, var(--c, #6366f1) 28%, var(--m-border));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 110px;
}
.mpa-kpi::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--c, #6366f1) 0%, transparent 65%);
    opacity: 0.10;
    pointer-events: none;
}
.mpa-kpi__num {
    position: absolute;
    top: 8px;
    right: 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    color: var(--c, #6366f1);
    opacity: 0.45;
    font-weight: 800;
    pointer-events: none;
}
.mpa-kpi__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.mpa-kpi__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--c, #6366f1) 16%, transparent);
    color: var(--c, #6366f1);
    flex-shrink: 0;
}
.mpa-kpi__icon > i { font-size: 0.85rem; }
.mpa-kpi__tag {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--m-text-muted);
}
.mpa-kpi__big {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--m-text);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-top: auto;
}
.mpa-kpi__big--small { font-size: 1.1rem; }
.mpa-kpi__cap {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    margin-top: 4px;
    line-height: 1.4;
}
.mpa-kpi__cap-warn {
    color: rgb(245, 158, 11);
    font-weight: 600;
}
.mpa-kpi__cap-dim {
    opacity: 0.7;
}

/* ═══════ Grid 2-col (Timeline + Mensagens/Notas) ═══════ */
.mpa-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 900px) {
    .mpa-grid {
        grid-template-columns: 1.4fr 1fr;
    }
}
.mpa-grid__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ═══════ Painel base ═══════ */
.mpa-panel {
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mpa-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--m-border);
}
.mpa-panel__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--m-text);
}
.mpa-panel__title > i {
    color: var(--p-primary-color);
    font-size: 0.85rem;
}
.mpa-panel__badge {
    background: color-mix(in srgb, var(--p-primary-color) 16%, transparent);
    color: var(--p-primary-color);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 700;
}
.mpa-panel__body {
    padding: 12px 14px 14px;
    flex: 1;
    min-height: 0;
}

/* ═══════ Empty state ═══════ */
.mpa-empty {
    text-align: center;
    color: var(--m-text-muted);
    padding: 16px 0;
    font-size: 0.82rem;
}
.mpa-empty--rich {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 12px;
}
.mpa-empty__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--m-bg-medium);
    color: var(--m-text-muted);
    margin-bottom: 4px;
}
.mpa-empty__icon > i { font-size: 1rem; }
.mpa-empty__title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--m-text);
}
.mpa-empty__sub {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    line-height: 1.4;
    max-width: 280px;
}

/* ═══════ Timeline (sessoes atendidas) ═══════ */
.mpa-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
.mpa-timeline::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: 1.5px;
    background: var(--m-border);
}
.mpa-tl {
    position: relative;
    padding-left: 22px;
    padding-bottom: 14px;
}
.mpa-tl:last-child { padding-bottom: 0; }
.mpa-tl__dot {
    position: absolute;
    top: 6px;
    left: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--m-bg-medium);
    border: 2px solid var(--m-text-muted);
}
.mpa-tl[data-status*="realiz"] .mpa-tl__dot,
.mpa-tl[data-status*="present"] .mpa-tl__dot { border-color: rgb(34, 197, 94); }
.mpa-tl[data-status*="falt"] .mpa-tl__dot     { border-color: rgb(239, 68, 68); }
.mpa-tl[data-status*="cancel"] .mpa-tl__dot,
.mpa-tl[data-status*="remarc"] .mpa-tl__dot   { border-color: rgb(245, 158, 11); }
.mpa-tl__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mpa-tl__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.mpa-tl__when {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--m-text);
}
.mpa-tl__rel {
    font-size: 0.7rem;
    color: var(--m-text-muted);
}
.mpa-tl__row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mpa-tl__tag {
    font-size: 0.66rem !important;
}
.mpa-tl__chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--m-bg-medium);
    color: var(--m-text);
    font-size: 0.66rem;
    font-weight: 600;
}
.mpa-tl__chip > i { font-size: 0.62rem; opacity: 0.7; }
.mpa-tl__chip--dim {
    background: transparent;
    color: var(--m-text-muted);
    border: 1px solid var(--m-border);
}
.mpa-tl__note {
    font-size: 0.78rem;
    color: var(--m-text-muted);
    line-height: 1.4;
    padding: 6px 8px;
    border-left: 2px solid var(--m-border);
    background: var(--m-bg-medium);
    border-radius: 4px;
    margin-top: 4px;
}

/* ═══════ Mensagens recentes ═══════ */
.mpa-msgs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mpa-msg {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-left-width: 3px;
}
.mpa-msg--in {
    border-left-color: rgb(34, 197, 94);
}
.mpa-msg--out {
    border-left-color: rgb(96, 165, 250);
}
.mpa-msg__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    color: var(--m-text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.mpa-msg__meta > i { font-size: 0.62rem; opacity: 0.7; }
.mpa-msg__sep { opacity: 0.4; }
.mpa-msg__body {
    font-size: 0.82rem;
    color: var(--m-text);
    line-height: 1.45;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ═══════ Tab Perfil — fields stacked grid ═══════ */
.mpa-fields-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 720px) {
    .mpa-fields-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.mpa-fields-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.mpa-fields {
    border-radius: 10px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-medium);
    padding: 12px 14px;
}
.mpa-fields--full {
    margin-top: 12px;
    grid-column: 1 / -1;
}
.mpa-fields__label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--m-text-muted);
    margin-bottom: 8px;
    opacity: 0.85;
}
.mpa-fields__textblock {
    font-size: 0.85rem;
    color: var(--m-text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.mpa-fields__textblock--min { min-height: 3.5rem; }
.mpa-fields__lock-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--m-text-muted);
    opacity: 0.75;
    margin-bottom: 10px;
}
.mpa-fields__lock-hint > i { font-size: 0.66rem; }

/* Field row generico (k = label esq, v = valor dir) */
.mpa-field-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--m-border);
    font-size: 0.82rem;
}
.mpa-field-row--last { border-bottom: none; }
.mpa-field-row--align-start { align-items: flex-start; }
.mpa-field-row__k {
    color: var(--m-text-muted);
    flex-shrink: 0;
}
.mpa-field-row__v {
    color: var(--m-text);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.mpa-field-row__v--mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
}
.mpa-field-row__v--link {
    color: var(--p-primary-color);
    text-decoration: none;
}
.mpa-field-row__v--link:hover { text-decoration: underline; }
.mpa-field-row__v--truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.mpa-field-row__v-dim {
    color: var(--m-text-muted);
    font-weight: 400;
    margin-left: 4px;
}
.mpa-field-row__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

/* Grid 2-col pra blocos de endereco/dados (8 fields em 2 colunas) */
.mpa-field-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .mpa-field-grid-2 {
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
    }
    .mpa-field-grid-2 > .mpa-field-row {
        border-bottom: 1px solid var(--m-border);
    }
    /* Ultima da esq tira borda quando ultima do grid; --last e atribuida no template */
    .mpa-field-grid-2 > .mpa-field-row--last { border-bottom: none; }
}

/* Bloco textual full-width dentro de .mpa-fields (ex: Observacao Responsavel) */
.mpa-field-block {
    padding: 10px 0;
    border-top: 1px solid var(--m-border);
}
.mpa-field-block--last { border-bottom: none; }
.mpa-field-block__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--m-text-muted);
    margin-bottom: 4px;
}
.mpa-field-block__text {
    font-size: 0.82rem;
    color: var(--m-text);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Mini lista de sessoes (panel 6 da aba Perfil) */
.mpa-sess-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 2px;
}
.mpa-sess {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-medium);
}
.mpa-sess__main {
    flex: 1;
    min-width: 0;
}
.mpa-sess__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.2;
    margin-bottom: 4px;
}
.mpa-sess__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.72rem;
    color: var(--m-text-muted);
}
.mpa-sess__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mpa-sess__meta > span > i { font-size: 0.66rem; opacity: 0.6; }
.mpa-sess__obs {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    line-height: 1.4;
    margin-top: 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mpa-sess__tag {
    flex-shrink: 0;
    font-size: 0.66rem !important;
}

/* ═══════ Tab Financeiro (Fase 6) ═══════ */
.mpa-fin__head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mpa-icon-btn-sm {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    color: var(--p-primary-color);
    cursor: pointer;
    font-family: inherit;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mpa-icon-btn-sm:hover {
    background: color-mix(in srgb, var(--p-primary-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
}
.mpa-icon-btn-sm > i { font-size: 0.78rem; }

/* Quick btn variant CTA pra empty state */
.mpa-quick-btn--cta {
    margin: 12px auto 0;
    padding: 10px 16px;
    background: var(--m-bg-medium);
    border-color: var(--m-border-strong);
}

/* Tabela financeira */
.mpa-fin__table {
    display: flex;
    flex-direction: column;
}
.mpa-fin__row {
    display: grid;
    grid-template-columns: 110px 1fr 90px 100px 100px 36px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--m-border);
    font-size: 0.82rem;
    border-left: 3px solid transparent;
    transition: background-color 120ms ease;
}
.mpa-fin__row:first-child { border-top: none; }
.mpa-fin__row:hover:not(.mpa-fin__row--head) { background: var(--m-bg-medium); }
.mpa-fin__row[data-status="pago"]      { border-left-color: rgb(34, 197, 94); }
.mpa-fin__row[data-status="vencido"]   { border-left-color: rgb(239, 68, 68); }
.mpa-fin__row[data-status="pendente"]  { border-left-color: rgb(96, 165, 250); }

.mpa-fin__row--head {
    background: var(--m-bg-medium);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--m-text-muted);
    border-left-color: transparent !important;
}

.mpa-fin__date {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mpa-fin__date-main {
    font-weight: 700;
    color: var(--m-text);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
}
.mpa-fin__date-rel {
    font-size: 0.66rem;
    color: var(--m-text-muted);
}

.mpa-fin__desc {
    color: var(--m-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.mpa-fin__method {
    color: var(--m-text-muted);
    font-size: 0.74rem;
}
.mpa-fin__amount {
    font-weight: 800;
    color: var(--m-text);
    text-align: right;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.82rem;
}

.mpa-fin__col-amount  { text-align: right; }
.mpa-fin__col-method,
.mpa-fin__col-status,
.mpa-fin__col-action  { text-align: center; }

.mpa-fin__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
}
.mpa-fin__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.mpa-fin__status[data-status="pago"] {
    background: color-mix(in srgb, rgb(34, 197, 94) 12%, transparent);
    color: rgb(34, 197, 94);
    border-color: color-mix(in srgb, rgb(34, 197, 94) 35%, transparent);
}
.mpa-fin__status[data-status="vencido"] {
    background: color-mix(in srgb, rgb(239, 68, 68) 12%, transparent);
    color: rgb(239, 68, 68);
    border-color: color-mix(in srgb, rgb(239, 68, 68) 35%, transparent);
}
.mpa-fin__status[data-status="pendente"] {
    background: color-mix(in srgb, rgb(96, 165, 250) 12%, transparent);
    color: rgb(96, 165, 250);
    border-color: color-mix(in srgb, rgb(96, 165, 250) 35%, transparent);
}

.mpa-fin__action {
    display: flex;
    justify-content: center;
}

/* Mobile: stack tabela em cards 2-col */
@media (max-width: 720px) {
    .mpa-fin__row--head { display: none; }
    .mpa-fin__row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 4px 10px;
        padding: 12px 14px;
    }
    .mpa-fin__date {
        grid-row: 1;
        grid-column: 1;
    }
    .mpa-fin__amount {
        grid-row: 1;
        grid-column: 2;
        text-align: right;
    }
    .mpa-fin__desc {
        grid-row: 2;
        grid-column: 1 / -1;
        font-size: 0.78rem;
    }
    .mpa-fin__method {
        grid-row: 3;
        grid-column: 1;
    }
    .mpa-fin__status-cell {
        grid-row: 3;
        grid-column: 2;
        text-align: right;
    }
    .mpa-fin__action {
        grid-row: 4;
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* ═══════ Tab Agenda (Fase 5) ═══════ */
.mpa-ag__group + .mpa-ag__group { margin-top: 10px; }
.mpa-ag__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.mpa-ag__item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--m-border);
    border-left: 3px solid transparent;
    transition: background-color 120ms ease;
}
.mpa-ag__item:first-child { border-top: none; }
.mpa-ag__item:hover { background: var(--m-bg-medium); }
.mpa-ag__item[data-status*="realiz"],
.mpa-ag__item[data-status*="present"] { border-left-color: rgb(34, 197, 94); }
.mpa-ag__item[data-status*="falt"]    { border-left-color: rgb(239, 68, 68); }
.mpa-ag__item[data-status*="cancel"],
.mpa-ag__item[data-status*="remarc"]  { border-left-color: rgb(245, 158, 11); }
.mpa-ag__item[data-status*="agendado"] { border-left-color: rgb(96, 165, 250); }

/* Coluna data (esquerda) */
.mpa-ag__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    min-width: 56px;
}
.mpa-ag__date-dow {
    font-size: 0.62rem;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.mpa-ag__date-day {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--m-text);
    line-height: 1.05;
    margin: 2px 0;
    letter-spacing: -0.02em;
}
.mpa-ag__date-time {
    font-size: 0.66rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--m-text-muted);
    font-weight: 600;
    line-height: 1;
}

/* Coluna main (centro) */
.mpa-ag__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mpa-ag__top {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mpa-ag__tag { font-size: 0.66rem !important; }
.mpa-ag__rel {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--m-text-muted);
}
.mpa-ag__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--m-text);
}
.mpa-ag__note {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Coluna actions (direita) */
.mpa-ag__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.mpa-ag__act {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.mpa-ag__act > i { font-size: 0.85rem; }
.mpa-ag__act:hover:not(:disabled) {
    background: var(--m-bg-soft-hover);
    color: var(--m-text);
    border-color: var(--m-border-strong);
}
.mpa-ag__act:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mpa-ag__act--ok:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.12);
    color: rgb(34, 197, 94);
    border-color: rgba(34, 197, 94, 0.40);
}
.mpa-ag__act--warn:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.12);
    color: rgb(245, 158, 11);
    border-color: rgba(245, 158, 11, 0.40);
}
.mpa-ag__act--danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.12);
    color: rgb(239, 68, 68);
    border-color: rgba(239, 68, 68, 0.40);
}

/* Mobile: stack date + main em coluna; actions vai pra baixo */
@media (max-width: 600px) {
    .mpa-ag__item {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
    }
    .mpa-ag__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
    .mpa-ag__rel {
        flex-basis: 100%;
        margin-left: 0;
        text-align: left;
    }
}

/* ═══════ Tab Prontuario (Fase 4 MVP) ═══════ */
.mpa-pron-hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, #06b6d4 9%, transparent);
    border: 1px solid color-mix(in srgb, #06b6d4 28%, transparent);
    color: var(--m-text);
    font-size: 0.78rem;
    line-height: 1.5;
}
.mpa-pron-hint > i {
    color: #06b6d4;
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.mpa-pron-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.mpa-pron-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    border-left: 3px solid var(--c, var(--p-primary-color));
}
.mpa-pron-stat > i {
    color: var(--c, var(--p-primary-color));
    font-size: 1.05rem;
    flex-shrink: 0;
}
.mpa-pron-stat__value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--m-text);
    line-height: 1.1;
}
.mpa-pron-stat__label {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.mpa-pron-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mpa-pron-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 120ms ease;
}
.mpa-pron-filter > i { font-size: 0.7rem; }
.mpa-pron-filter:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mpa-pron-filter.is-active {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}

.mpa-pron-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mpa-pron-item {
    border-radius: 12px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    padding: 12px 14px;
    border-left: 3px solid var(--m-text-muted);
    transition: border-color 120ms ease;
}
.mpa-pron-item[data-status*="realiz"],
.mpa-pron-item[data-status*="present"] { border-left-color: rgb(34, 197, 94); }
.mpa-pron-item[data-status*="falt"]    { border-left-color: rgb(239, 68, 68); }
.mpa-pron-item[data-status*="cancel"],
.mpa-pron-item[data-status*="remarc"]  { border-left-color: rgb(245, 158, 11); }
.mpa-pron-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.mpa-pron-item__when {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mpa-pron-item__date {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--m-text);
}
.mpa-pron-item__rel {
    font-size: 0.7rem;
    color: var(--m-text-muted);
}
.mpa-pron-item__chips {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.mpa-pron-item__tag { font-size: 0.66rem !important; }
.mpa-pron-item__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--m-text);
    margin-bottom: 6px;
}

.mpa-pron-item__evol {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--m-bg-medium);
    border-left: 2px solid var(--p-primary-color);
}
.mpa-pron-item__evol-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--p-primary-color);
    margin-bottom: 4px;
}
.mpa-pron-item__evol-label > i { font-size: 0.62rem; }
.mpa-pron-item__evol-text {
    font-size: 0.85rem;
    color: var(--m-text);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.mpa-pron-item__noevol {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--m-text-muted);
    opacity: 0.65;
    font-style: italic;
}
.mpa-pron-item__noevol > i { font-size: 0.5rem; }

.mpa-pron-roadmap {
    margin-top: 6px;
    border-style: dashed;
    background: transparent;
}
.mpa-pron-roadmap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mpa-pron-roadmap__list > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--m-border);
}
.mpa-pron-roadmap__list > li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.mpa-pron-roadmap__list > li > i {
    color: var(--p-primary-color);
    font-size: 0.95rem;
    margin-top: 2px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.mpa-pron-roadmap__list > li > div {
    flex: 1;
    min-width: 0;
}
.mpa-pron-roadmap__list strong {
    display: block;
    font-size: 0.85rem;
    color: var(--m-text);
    margin-bottom: 2px;
}
.mpa-pron-roadmap__list span {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    line-height: 1.4;
}

/* ═══════ Notas e observacoes ═══════ */
.mpa-notes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mpa-note {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
}
.mpa-note__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--m-text-muted);
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mpa-note__label > i { font-size: 0.66rem; opacity: 0.7; }
.mpa-note__text {
    font-size: 0.82rem;
    color: var(--m-text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ═══════ Placeholder (em desenvolvimento) ═══════ */
.mpa-placeholder {
    font-size: 0.85rem;
    color: var(--m-text-muted);
    line-height: 1.55;
    padding: 6px 0;
}
.mpa-placeholder code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    background: var(--m-bg-medium);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--p-primary-color);
}

/* ═══════ Erro state ═══════ */
.mpa-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.30);
    color: rgb(180, 33, 33);
}
.mpa-error > i { font-size: 1.05rem; margin-top: 2px; flex-shrink: 0; }
.mpa-error__title {
    font-size: 0.88rem;
    font-weight: 700;
}
.mpa-error__detail {
    font-size: 0.78rem;
    margin-top: 2px;
    opacity: 0.85;
}

/* ═══════ Mobile drawer ═══════ */
.mpa-mobile-drawer {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(380px, 90vw);
    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;
}
.mpa-mobile-drawer.is-open { transform: translateX(0); }
.mpa-mobile-drawer__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;
}
.mpa-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mpa-mobile-drawer__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}
.mpa-mobile-drawer__scroll .mpa-side {
    width: 100%;
    border-right: none;
}

.mpa-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;
}
.mpa-drawer-fade-enter-active,
.mpa-drawer-fade-leave-active { transition: opacity 200ms ease; }
.mpa-drawer-fade-enter-from,
.mpa-drawer-fade-leave-to { opacity: 0; }

/* ═══════ Mobile (<1024px) ═══════ */
@media (max-width: 1023px) {
    .mpa-body { flex-direction: column; padding: 0; }
    .mpa-body > .mpa-side { display: none; }
    .mpa-main { width: 100%; padding: 8px; }
    .mpa-main .mpa-w {
        height: auto;
        flex: 0 0 auto;
        align-self: stretch;
    }
    .mpa-page__title { gap: 8px; }
    .mpa-head__avatar { width: 36px; height: 36px; }
    .mpa-head__name { font-size: 0.88rem; }
    .mpa-head__meta { font-size: 0.7rem; }
    .mpa-menu-btn { display: inline-flex; }
    .mpa-act-btn:nth-child(2) { display: none; }
    .mpa-kpis { grid-template-columns: 1fr 1fr; }
}
</style>
