<script setup>
/*
 * MelissaConfiguracoes — Configs do layout Melissa.
 * Layout 2-col seguindo blueprint melissa-page-blueprint.md (estrutura
 * da MelissaAgenda) + visual de aside da /configuracoes/ (accordion com
 * grupos e cards de seções).
 *
 *   ┌──────────────────────────────────────────────────────────┐
 *   │  Header (Menu mobile + título + close)                   │
 *   ├────────────┬─────────────────────────────────────────────┤
 *   │  ASIDE     │  MAIN                                       │
 *   │ ~300px     │  Conteúdo da seção ativa                    │
 *   │            │  (Aparência / Fundo / Relógio / Cronômetro) │
 *   │ Accordion  │                                             │
 *   │ + cards    │                                             │
 *   └────────────┴─────────────────────────────────────────────┘
 *
 * Aside é teleportada pra drawer off-canvas em <lg.
 *
 * Refs/setters chegam via inject('melissaSettings') — escreve direto
 * nas mesmas refs do MelissaLayout (sem duplicar estado). Persistência
 * ainda é responsabilidade do MelissaLayout (watchers já existentes).
 */
import { computed, defineAsyncComponent, inject, ref, watch, onMounted, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { TOQUES } from './melissaToques';

const props = defineProps({
    // Key da rota /melissa/:secao — usada pra pré-selecionar uma seção interna
    // (ex: 'perfil' abre direto em "Meu Perfil"). 'aparencia' = comportamento default.
    secaoRota: { type: String, default: 'aparencia' }
});
const emit = defineEmits(['close']);

// Aliases "bonitos" pros slugs principais — URL fica /melissa/perfil em vez
// de /melissa/cfg-perfil. Demais seções de config usam a key direta como
// slug (ex: cfg-precificacao → /melissa/cfg-precificacao). Bidirecional:
// rotaToSecao() lê alias OU key direta; secaoToRota() devolve alias se
// existir, senão a key como-é.
const ROUTE_ALIASES = {
    aparencia: 'aparencia',
    perfil:    'cfg-perfil',
    plano:     'cfg-plano',
    negocio:   'cfg-negocio',
    seguranca: 'cfg-seguranca',
    bloqueios: 'cfg-bloqueios'
};
// URLs antigas (/melissa/fundo, /melissa/relogio, /melissa/cronometro)
// agora caem no slug unificado "aparencia" — pagina Layout Melissa
// concentra os 4 blocos em uma unica tela.
const DEPRECATED_ALIASES = {
    fundo:      'aparencia',
    relogio:    'aparencia',
    cronometro: 'aparencia'
};
const SECAO_ALIASES = Object.fromEntries(
    Object.entries(ROUTE_ALIASES).map(([slug, key]) => [key, slug])
);

function rotaToSecao(rota) {
    if (!rota) return 'aparencia';
    const r = String(rota).toLowerCase();
    if (ROUTE_ALIASES[r]) return ROUTE_ALIASES[r];
    if (DEPRECATED_ALIASES[r]) return DEPRECATED_ALIASES[r];
    if (INLINE_KEYS.has(r)) return r;
    if (COMPONENT_MAP[r]) return r;
    return 'aparencia';
}
function secaoToRota(key) {
    if (!key) return 'aparencia';
    return SECAO_ALIASES[key] || key;
}


// ── Componentes externos embedados (todas as páginas de /configuracoes/) ─
// Usa defineAsyncComponent pra lazy-load — só carrega quando o user clica.
// Mantém o user dentro do overlay Melissa em vez de navegar pra fora.
const COMPONENT_MAP = {
    'cfg-agenda':              defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesAgendaPage.vue')),
    'cfg-bloqueios':           defineAsyncComponent(() => import('@/layout/configuracoes/BloqueiosPage.vue')),
    'cfg-agendador':           defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesAgendadorPage.vue')),
    'cfg-pagamento':           defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesPagamentoPage.vue')),
    'cfg-precificacao':        defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesPrecificacaoPage.vue')),
    'cfg-descontos':           defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesDescontosPage.vue')),
    'cfg-excecoes':            defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesExcecoesFinanceirasPage.vue')),
    'cfg-convenios':           defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConveniosPage.vue')),
    'cfg-wa':                  defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesWhatsappChooserPage.vue')),
    'cfg-wa-templates':        defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesWhatsappTemplatesPage.vue')),
    'cfg-conversas-tags':      defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConversasTagsPage.vue')),
    'cfg-conversas-autoreply': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConversasAutoreplyPage.vue')),
    'cfg-conversas-optouts':   defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConversasOptoutsPage.vue')),
    'cfg-conversas-sla':       defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConversasSlaPage.vue')),
    'cfg-conversas-bots':      defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConversasBotsPage.vue')),
    'cfg-lembretes':           defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesLembretesSessaoPage.vue')),
    'cfg-creditos-wa':         defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesCreditosWhatsappPage.vue')),
    'cfg-sms':                 defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesSmsPage.vue')),
    'cfg-email-templates':     defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesEmailTemplatesPage.vue')),
    'cfg-empresa':             defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesMinhaEmpresaPage.vue')),
    'cfg-recursos-extras':     defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesRecursosExtrasPage.vue')),
    'cfg-auditoria':           defineAsyncComponent(() => import('@/layout/configuracoes/AuditoriaPage.vue')),
    // Conta (páginas pessoais que vivem em /account/*)
    'cfg-perfil':              defineAsyncComponent(() => import('@/views/pages/account/ProfilePage.vue')),
    'cfg-plano':               defineAsyncComponent(() => import('@/views/pages/billing/TherapistMeuPlanoPage.vue')),
    'cfg-negocio':             defineAsyncComponent(() => import('@/views/pages/account/Negociopage.vue')),
    'cfg-seguranca':           defineAsyncComponent(() => import('@/views/pages/auth/SecurityPage.vue'))
};

// Keys que renderizam controles inline definidos neste arquivo (Layout Melissa).
// Hoje ha apenas 1: pagina unificada que concentra Aparencia + Fundo
// + Relogio + Cronometro nos 4 cards stackeados.
const INLINE_KEYS = new Set(['aparencia']);

const settings = inject('melissaSettings', null);
if (!settings) {
    console.warn('[MelissaConfiguracoes] inject melissaSettings ausente — montagem fora do MelissaLayout?');
}

const {
    layoutConfig,
    isDarkTheme,
    activeSurface,
    PRIMARY_COLORS,
    SURFACES,
    setPrimary,
    setSurface,
    setDark,
    bgUrl,
    overlayOpacity,
    bgImageOpacity,
    onFileChange,
    clearBg,
    use24h,
    toqueTermino,
    testarToque
} = settings || {};

// ── Catálogo de seções ─────────────────────────────────────────
// Espelha a estrutura da /configuracoes/ (ConfiguracoesPage.vue).
// Todas as keys são INTERNAS — controles inline (Layout Melissa) ou
// componentes embedados (COMPONENT_MAP). Nada navega pra fora.
const grupos = [
    {
        key: 'layout-melissa',
        label: 'Layout Melissa',
        desc: 'Aparência, plano de fundo, relógio e cronômetro do resumo.',
        icon: 'pi pi-palette',
        items: [
            { key: 'aparencia', label: 'Layout Melissa', desc: 'Tema, cor primária, surface, plano de fundo, relógio e cronômetro — tudo numa tela só.', icon: 'pi pi-palette' }
        ]
    },
    {
        key: 'conta',
        label: 'Conta',
        desc: 'Perfil pessoal, plano contratado, dados do negócio e segurança.',
        icon: 'pi pi-user',
        items: [
            { key: 'cfg-perfil',    label: 'Meu Perfil',  desc: 'Nome, avatar, redes sociais e preferências de aparência.', icon: 'pi pi-user' },
            { key: 'cfg-plano',     label: 'Meu Plano',   desc: 'Plano contratado, limites de uso e fatura.',                icon: 'pi pi-credit-card' },
            { key: 'cfg-negocio',   label: 'Meu Negócio', desc: 'Dados do negócio, faturamento e branding.',                 icon: 'pi pi-briefcase' },
            { key: 'cfg-seguranca', label: 'Segurança',   desc: 'Senha, dispositivos confiáveis e sessões ativas.',          icon: 'pi pi-shield' }
        ]
    },
    {
        key: 'agenda',
        label: 'Agenda',
        desc: 'Horários, bloqueios e agendador público para pacientes.',
        icon: 'pi pi-calendar',
        items: [
            { key: 'cfg-agenda',    label: 'Agenda',           desc: 'Horários semanais, exceções, duração e intervalo padrão.', icon: 'pi pi-calendar' },
            { key: 'cfg-bloqueios', label: 'Bloqueios',        desc: 'Feriados nacionais, municipais e períodos bloqueados.',   icon: 'pi pi-ban' },
            { key: 'cfg-agendador', label: 'Agendador Online', desc: 'Link público para pacientes solicitarem horários.',       icon: 'pi pi-calendar-clock' }
        ]
    },
    {
        key: 'financeiro',
        label: 'Financeiro',
        desc: 'Formas de pagamento, valores, descontos e convênios.',
        icon: 'pi pi-wallet',
        items: [
            { key: 'cfg-pagamento',    label: 'Pagamento',              desc: 'Formas de pagamento: Pix, depósito, dinheiro, cartão, convênio.', icon: 'pi pi-wallet' },
            { key: 'cfg-precificacao', label: 'Precificação',           desc: 'Valor padrão da sessão e preços por tipo de compromisso.',       icon: 'pi pi-tag' },
            { key: 'cfg-descontos',    label: 'Descontos por Paciente', desc: 'Descontos recorrentes aplicados automaticamente.',              icon: 'pi pi-percentage' },
            { key: 'cfg-excecoes',     label: 'Exceções Financeiras',   desc: 'O que cobrar em faltas, cancelamentos e situações excepcionais.', icon: 'pi pi-exclamation-triangle' },
            { key: 'cfg-convenios',    label: 'Convênios',              desc: 'Cadastre os convênios que você atende e seus valores.',          icon: 'pi pi-id-card' }
        ]
    },
    {
        key: 'whatsapp',
        label: 'WhatsApp & Conversas',
        desc: 'Canal, tags, auto-reply, lembretes e créditos.',
        icon: 'pi pi-whatsapp',
        items: [
            { key: 'cfg-wa',                  label: 'Canal WhatsApp',      desc: 'Escolha o canal (oficial AgenciaPSI ou pessoal) e configure a integração.', icon: 'pi pi-whatsapp' },
            { key: 'cfg-wa-templates',        label: 'Templates WhatsApp',  desc: 'Personalize os textos enviados ou volte ao padrão da plataforma.',          icon: 'pi pi-file-edit' },
            { key: 'cfg-conversas-tags',      label: 'Tags de Conversa',    desc: 'Etiquetas custom pra classificar threads no CRM (urgente, remarcação…).',  icon: 'pi pi-tag' },
            { key: 'cfg-conversas-autoreply', label: 'Auto-reply WhatsApp', desc: 'Resposta automática quando paciente escreve fora do horário.',             icon: 'pi pi-reply' },
            { key: 'cfg-conversas-optouts',   label: 'Opt-outs (LGPD)',     desc: 'Números que pediram pra não receber mensagens. Direito de oposição LGPD.', icon: 'pi pi-ban' },
            { key: 'cfg-conversas-sla',       label: 'SLA de resposta',     desc: 'Tempo máximo pra responder. Alerta quando estourar.',                       icon: 'pi pi-stopwatch' },
            { key: 'cfg-conversas-bots',      label: 'Bot de triagem',      desc: 'Coleta nome e motivo via WhatsApp antes do fluxo humano.',                 icon: 'pi pi-android' },
            { key: 'cfg-lembretes',           label: 'Lembretes de Sessão', desc: 'WhatsApp automático 24h e 2h antes das sessões agendadas.',               icon: 'pi pi-bell' },
            { key: 'cfg-creditos-wa',         label: 'Créditos WhatsApp',   desc: 'Compre pacotes de mensagens, veja saldo e extrato.',                        icon: 'pi pi-credit-card' }
        ]
    },
    {
        key: 'comunicacao',
        label: 'Comunicação',
        desc: 'SMS e templates de e-mail enviados aos pacientes.',
        icon: 'pi pi-send',
        items: [
            { key: 'cfg-sms',             label: 'SMS',                 desc: 'Gerencie créditos SMS e personalize as mensagens enviadas.', icon: 'pi pi-comment' },
            { key: 'cfg-email-templates', label: 'Templates de E-mail', desc: 'Personalize os e-mails enviados aos pacientes.',             icon: 'pi pi-envelope' }
        ]
    },
    {
        key: 'plataforma',
        label: 'Empresa & Plataforma',
        desc: 'Dados da empresa, recursos extras e auditoria.',
        icon: 'pi pi-building',
        items: [
            { key: 'cfg-empresa',         label: 'Minha Empresa',   desc: 'CNPJ, endereço, logomarca e redes sociais.',          icon: 'pi pi-building' },
            { key: 'cfg-recursos-extras', label: 'Recursos Extras', desc: 'Amplíe as funcionalidades com recursos adicionais.', icon: 'pi pi-box' },
            { key: 'cfg-auditoria',       label: 'Auditoria',       desc: 'Registro imutável de operações (LGPD Art. 37).',     icon: 'pi pi-shield' }
        ]
    }
];
const secoesFlat = computed(() => grupos.flatMap((g) => g.items));

const router = useRouter();
const route = useRoute();

const secaoAtiva = ref(rotaToSecao(props.secaoRota));
const secaoAtivaInfo = computed(() => secoesFlat.value.find((s) => s.key === secaoAtiva.value) || secoesFlat.value[0]);

// Accordion: começa com o grupo da seção ativa aberto
const grupoDaSecao = (key) => grupos.find((g) => g.items.some((i) => i.key === key))?.key;
const openGroups = ref([grupoDaSecao(secaoAtiva.value)]);

// Sincroniza com mudanças de rota (deep-link, navegação dentro do MelissaLayout
// trocando entre /melissa/perfil ↔ /melissa/plano sem desmontar)
watch(() => props.secaoRota, (v) => {
    const k = rotaToSecao(v);
    if (!k || k === secaoAtiva.value) return;
    secaoAtiva.value = k;
    const gk = grupoDaSecao(k);
    if (gk && !openGroups.value.includes(gk)) openGroups.value = [...openGroups.value, gk];
});

function selecionar(item) {
    secaoAtiva.value = item.key;
    fecharDrawer();
    const gk = grupoDaSecao(item.key);
    if (gk && !openGroups.value.includes(gk)) openGroups.value = [...openGroups.value, gk];
    // Atualiza a URL pra refletir a seção atual — sem isso, /melissa/aparencia
    // ficava fixo no path enquanto o user navegava em outras seções da config.
    const slug = secaoToRota(item.key);
    if (route.params?.secao !== slug) {
        router.push({ name: 'Melissa', params: { secao: slug } });
    }
}

// Componente embedado da seção ativa (null → renderiza inline do Layout Melissa)
const embedComp = computed(() => COMPONENT_MAP[secaoAtiva.value] || null);
const isInline = computed(() => INLINE_KEYS.has(secaoAtiva.value));

// ── Breakpoints + drawer (blueprint §2/§3) ─────────────────
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; }

onMounted(() => {
    if (typeof window !== 'undefined' && window.matchMedia) {
        _mqMobile = window.matchMedia('(max-width: 1023px)');
        isMobile.value = _mqMobile.matches;
        _mqMobile.addEventListener('change', _onMqMobileChange);
    }
});
onBeforeUnmount(() => {
    if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
});

// ── Helpers de display ──────────────────────────────────────
const overlayPct = computed(() => Math.round((overlayOpacity?.value ?? 0) * 100));
const bgImagePct = computed(() => Math.round((bgImageOpacity?.value ?? 1) * 100));
const TOQUES_LIST = TOQUES;

// File input local (o do MelissaLayout vive dentro do popover de canto e
// pode estar null quando esta página é aberta sem o popover)
const fileInputRef = ref(null);
function pickFile() { fileInputRef.value?.click(); }

function resetCores() {
    setPrimary?.('noir');
    setSurface?.(isDarkTheme?.value ? 'zinc' : 'slate');
}
</script>

<template>
    <!-- Drawer host (multi-root, sibling do .mcfg-page — blueprint §2) -->
    <aside
        class="mcfg-mobile-drawer"
        :class="{ 'is-open': drawerOpen }"
        v-show="isMobile"
        aria-label="Seções de configuração"
    >
        <div id="mcfg-mobile-drawer-target" class="mcfg-mobile-drawer__scroll" />
    </aside>
    <Transition name="mcfg-drawer-fade">
        <div
            v-if="isMobile && drawerOpen"
            class="mcfg-mobile-drawer__backdrop"
            @click="fecharDrawer"
        />
    </Transition>

    <section class="mcfg-page">
        <header class="mcfg-page__head">
            <button
                class="mcfg-menu-btn mcfg-menu-btn--mobile-only"
                v-tooltip.bottom="'Seções'"
                @click="toggleDrawer"
            >
                <i class="pi pi-bars" />
                <span>Seções</span>
            </button>
            <div class="mcfg-page__title">
                <i class="pi pi-cog text-slate-300" />
                <span>Configurações do Melissa</span>
                <span class="mcfg-page__sep" aria-hidden="true">·</span>
                <span class="mcfg-page__sub">{{ secaoAtivaInfo?.label }}</span>
            </div>
            <div class="mcfg-page__actions">
                <button class="mcfg-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
                    <i class="pi pi-times" />
                </button>
            </div>
        </header>

        <div class="mcfg-body">
            <!-- ═══ ASIDE — Accordion de grupos + cards de seções ═══ -->
            <Teleport to="#mcfg-mobile-drawer-target" :disabled="!isMobile">
                <aside class="mcfg-side">
                    <Accordion v-model:value="openGroups" multiple class="mcfg-accordion">
                        <AccordionPanel v-for="g in grupos" :key="g.key" :value="g.key">
                            <AccordionHeader>
                                <div class="mcfg-grp-head">
                                    <i :class="g.icon" class="mcfg-grp-icon" />
                                    <div class="mcfg-grp-text">
                                        <span class="mcfg-grp-label">{{ g.label }}</span>
                                        <span class="mcfg-grp-desc">{{ g.desc }}</span>
                                    </div>
                                    <span class="mcfg-grp-badge">{{ g.items.length }}</span>
                                </div>
                            </AccordionHeader>
                            <AccordionContent>
                                <div class="mcfg-nav-list">
                                    <button
                                        v-for="s in g.items"
                                        :key="s.key"
                                        type="button"
                                        class="mcfg-nav-item"
                                        :class="{ 'is-active': secaoAtiva === s.key }"
                                        @click="selecionar(s)"
                                    >
                                        <i :class="s.icon" class="mcfg-nav-item__icon" />
                                        <div class="mcfg-nav-item__text">
                                            <span class="mcfg-nav-item__label">{{ s.label }}</span>
                                            <span class="mcfg-nav-item__desc">{{ s.desc }}</span>
                                        </div>
                                    </button>
                                </div>
                            </AccordionContent>
                        </AccordionPanel>
                    </Accordion>
                </aside>
            </Teleport>

            <!-- ═══ MAIN — Conteúdo da seção ativa ═══ -->
            <div class="mcfg-main" :class="{ 'is-embed': !isInline }">
                <!-- Hero compacto (mostra contexto da seção quando embed; o Layout
                     Melissa inline mostra título/ações nos próprios cards) -->
                <div v-if="!isInline && secaoAtivaInfo" class="mcfg-embed-hero">
                    <div class="mcfg-embed-hero__icon">
                        <i :class="secaoAtivaInfo.icon" />
                    </div>
                    <div class="mcfg-embed-hero__text">
                        <div class="mcfg-embed-hero__title">{{ secaoAtivaInfo.label }}</div>
                        <div class="mcfg-embed-hero__desc">{{ secaoAtivaInfo.desc }}</div>
                    </div>
                    <!-- Teleport target pros componentes externos que injetam
                         ações no header da ConfiguracoesPage tradicional. -->
                    <div id="cfg-page-actions" class="mcfg-embed-hero__actions"></div>
                </div>

                <div class="mcfg-main__inner">

                    <!-- ──── Layout Melissa unificado: Aparência + Fundo + Relógio + Cronômetro ──── -->
                    <template v-if="secaoAtiva === 'aparencia'">
                    <div class="mcfg-w">
                        <div class="mcfg-w__head">
                            <span class="mcfg-w__title"><i class="pi pi-palette" /> Aparência</span>
                            <button class="mcfg-w__action" v-tooltip.left="'Voltar ao padrão (noir)'" @click="resetCores">
                                <i class="pi pi-refresh" />
                                <span>Padrão</span>
                            </button>
                        </div>

                        <div class="mcfg-field">
                            <label class="mcfg-field__label">Tema</label>
                            <div class="mcfg-segmented">
                                <button class="mcfg-seg__btn" :class="{ 'is-active': !isDarkTheme }" @click="setDark(false)">
                                    <i class="pi pi-sun" /><span>Claro</span>
                                </button>
                                <button class="mcfg-seg__btn" :class="{ 'is-active': isDarkTheme }" @click="setDark(true)">
                                    <i class="pi pi-moon" /><span>Escuro</span>
                                </button>
                            </div>
                            <div class="mcfg-field__hint">Vale pra todo o app, não só pra esta tela.</div>
                        </div>

                        <div class="mcfg-field">
                            <label class="mcfg-field__label">
                                Cor primária
                                <span class="mcfg-field__current">{{ layoutConfig?.primary || 'noir' }}</span>
                            </label>
                            <div class="mcfg-swatches">
                                <button
                                    v-for="pc in PRIMARY_COLORS"
                                    :key="pc.name"
                                    class="mcfg-swatch"
                                    :class="{ 'is-active': layoutConfig?.primary === pc.name }"
                                    :style="{ backgroundColor: pc.swatch === 'currentColor' ? 'var(--m-text)' : pc.swatch }"
                                    v-tooltip.bottom="pc.name"
                                    @click="setPrimary(pc.name)"
                                />
                            </div>
                        </div>

                        <div class="mcfg-field">
                            <label class="mcfg-field__label">
                                Surface
                                <span class="mcfg-field__current">{{ activeSurface || '—' }}</span>
                            </label>
                            <div class="mcfg-swatches">
                                <button
                                    v-for="sf in SURFACES"
                                    :key="sf.name"
                                    class="mcfg-swatch"
                                    :class="{ 'is-active': activeSurface === sf.name }"
                                    :style="{ backgroundColor: sf.palette['500'] }"
                                    v-tooltip.bottom="sf.name"
                                    @click="setSurface(sf.name)"
                                />
                            </div>
                            <div class="mcfg-field__hint">Tom de fundo das superfícies (cards, dialogs, header dialog).</div>
                        </div>
                    </div>

                    <!-- ──── Plano de fundo ──── -->
                    <div class="mcfg-w">
                        <div class="mcfg-w__head">
                            <span class="mcfg-w__title"><i class="pi pi-image" /> Plano de fundo</span>
                            <button v-if="bgUrl" class="mcfg-w__action mcfg-w__action--danger" v-tooltip.left="'Voltar ao gradiente padrão'" @click="clearBg">
                                <i class="pi pi-times" />
                                <span>Remover</span>
                            </button>
                        </div>

                        <div class="mcfg-field">
                            <label class="mcfg-field__label">Imagem</label>
                            <div class="mcfg-bg-pick">
                                <div class="mcfg-bg-preview" :class="{ 'is-empty': !bgUrl }">
                                    <img v-if="bgUrl" :src="bgUrl" alt="Plano de fundo atual" />
                                    <i v-else class="pi pi-image" />
                                </div>
                                <div class="mcfg-bg-pick__actions">
                                    <button class="mcfg-btn mcfg-btn--primary" @click="pickFile">
                                        <i class="pi pi-upload" />
                                        <span>{{ bgUrl ? 'Trocar imagem' : 'Enviar imagem' }}</span>
                                    </button>
                                    <input ref="fileInputRef" type="file" accept="image/*" hidden @change="onFileChange" />
                                    <div class="mcfg-field__hint">JPG, PNG ou WEBP. Máximo 2 MB.</div>
                                </div>
                            </div>
                        </div>

                        <div class="mcfg-field">
                            <label class="mcfg-field__label">
                                Opacidade do escurecedor
                                <span class="mcfg-field__current">{{ overlayPct }}%</span>
                            </label>
                            <input
                                v-model.number="overlayOpacity"
                                type="range"
                                min="0"
                                max="0.8"
                                step="0.01"
                                class="mcfg-slider"
                            />
                            <div class="mcfg-field__hint">Filme escuro sobre o fundo — destaca o conteúdo.</div>
                        </div>

                        <div v-if="bgUrl" class="mcfg-field">
                            <label class="mcfg-field__label">
                                Opacidade da imagem
                                <span class="mcfg-field__current">{{ bgImagePct }}%</span>
                            </label>
                            <input
                                v-model.number="bgImageOpacity"
                                type="range"
                                min="0.05"
                                max="1"
                                step="0.01"
                                class="mcfg-slider"
                            />
                            <div class="mcfg-field__hint">Mistura a foto com o gradiente do tema.</div>
                        </div>
                    </div>

                    <!-- ──── Relógio ──── -->
                    <div class="mcfg-w">
                        <div class="mcfg-w__head">
                            <span class="mcfg-w__title"><i class="pi pi-clock" /> Relógio</span>
                        </div>
                        <div class="mcfg-field">
                            <label class="mcfg-field__label">Formato da hora</label>
                            <div class="mcfg-segmented">
                                <button class="mcfg-seg__btn" :class="{ 'is-active': use24h }" @click="use24h = true">
                                    <span>24 horas</span>
                                </button>
                                <button class="mcfg-seg__btn" :class="{ 'is-active': !use24h }" @click="use24h = false">
                                    <span>12 horas (AM/PM)</span>
                                </button>
                            </div>
                            <div class="mcfg-field__hint">Aparece no relógio gigante do resumo.</div>
                        </div>
                    </div>

                    <!-- ──── Cronômetro ──── -->
                    <div class="mcfg-w">
                        <div class="mcfg-w__head">
                            <span class="mcfg-w__title"><i class="pi pi-stopwatch" /> Cronômetro de sessão</span>
                        </div>
                        <div class="mcfg-field">
                            <label class="mcfg-field__label">Toque ao terminar</label>
                            <div class="mcfg-toque">
                                <select v-model="toqueTermino" class="mcfg-select">
                                    <option v-for="t in TOQUES_LIST" :key="t.id" :value="t.id">{{ t.label }}</option>
                                </select>
                                <button class="mcfg-btn" :disabled="toqueTermino === 'nenhum'" @click="testarToque">
                                    <i class="pi pi-volume-up" />
                                    <span>Testar</span>
                                </button>
                            </div>
                            <div class="mcfg-field__hint">Som ao final dos 50 minutos da sessão.</div>
                        </div>
                    </div>
                    </template>

                    <!-- ──── Embed dinâmico (páginas /configuracoes/*) ──── -->
                    <div v-else-if="embedComp" class="mcfg-embed-wrap">
                        <Suspense>
                            <template #default>
                                <component :is="embedComp" :key="secaoAtiva" />
                            </template>
                            <template #fallback>
                                <div class="mcfg-loading">
                                    <i class="pi pi-spin pi-spinner" />
                                    <span>Carregando…</span>
                                </div>
                            </template>
                        </Suspense>
                    </div>

                    <!-- Rodapé info — auto-save (só nos inlines) -->
                    <div v-if="isInline" class="mcfg-foot">
                        <i class="pi pi-check-circle" />
                        <span>Mudanças são salvas automaticamente.</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

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

/* ═════ Header ═════ */
.mcfg-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;
}
.mcfg-page__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 500;
}
.mcfg-page__title > span:not(.mcfg-page__sep):not(.mcfg-page__sub) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcfg-page__sep {
    color: var(--m-text-faint);
    font-weight: 400;
    margin: 0 -2px;
}
.mcfg-page__sub {
    color: var(--m-text-muted);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcfg-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.mcfg-close {
    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: 9px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 140ms ease;
}
.mcfg-close:hover { background: var(--m-bg-soft-hover); }
.mcfg-close > i { font-size: 0.85rem; }

.mcfg-menu-btn {
    display: none;
    height: 32px;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: var(--m-accent);
    border: 1px solid var(--m-accent);
    color: white;
    padding: 0 11px;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background-color 140ms ease, transform 140ms ease;
}
.mcfg-menu-btn:hover {
    background: color-mix(in srgb, var(--m-accent) 88%, white);
    transform: translateY(-1px);
}

/* ═════ Body 2-col ═════ */
.mcfg-body {
    flex: 1;
    display: flex;
    min-height: 0;
    position: relative;
}

/* ═════ COL 1: Aside ═════ */
.mcfg-side {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    overflow-y: auto;
    padding: 10px 8px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mcfg-side::-webkit-scrollbar { width: 5px; }
.mcfg-side::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }

/* Accordion — usando o componente do PrimeVue, neutralizando cores
   pra tema Melissa. Estilo enxuto pra evitar lag (sem transitions
   de box-shadow/color-mix, sem line-clamp em cada item). */
.mcfg-accordion :deep(.p-accordionpanel) {
    border: none;
    background: transparent;
}
.mcfg-accordion :deep(.p-accordionheader) {
    padding: 6px 8px;
    background: transparent;
    border: none;
    color: var(--m-text);
    border-radius: 8px;
}
.mcfg-accordion :deep(.p-accordionheader:hover) {
    background: var(--m-bg-soft-hover);
}
.mcfg-accordion :deep(.p-accordionheader-toggle-icon) {
    color: var(--m-text-muted);
    font-size: 0.72rem;
}
.mcfg-accordion :deep(.p-accordioncontent),
.mcfg-accordion :deep(.p-accordioncontent-content) {
    padding: 0;
    background: transparent;
    border: none;
}
.mcfg-accordion :deep(.p-accordioncontent-content) {
    padding: 2px 0 6px;
}

/* Header de grupo — icone inline + (label + desc) + badge */
.mcfg-grp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.mcfg-grp-icon {
    width: 18px;
    text-align: center;
    color: var(--p-primary-color);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.mcfg-grp-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}
.mcfg-grp-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--m-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcfg-grp-desc {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcfg-grp-badge {
    flex-shrink: 0;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    border-radius: 999px;
}

/* Sub-itens — botao com titulo + subtitulo */
.mcfg-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 24px;
    padding-right: 4px;
}
.mcfg-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--m-text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: 100%;
    min-height: 44px;
}
.mcfg-nav-item:hover {
    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
    color: var(--p-primary-color);
}
.mcfg-nav-item:hover .mcfg-nav-item__icon { color: var(--p-primary-color); }
.mcfg-nav-item.is-active {
    background: color-mix(in srgb, var(--p-primary-color) 16%, transparent);
    color: var(--p-primary-color);
}
.mcfg-nav-item.is-active .mcfg-nav-item__icon { color: var(--p-primary-color); }
.mcfg-nav-item__icon {
    width: 16px;
    text-align: center;
    color: var(--m-text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.mcfg-nav-item__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mcfg-nav-item__label {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcfg-nav-item__desc {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mcfg-nav-item:hover .mcfg-nav-item__desc,
.mcfg-nav-item.is-active .mcfg-nav-item__desc {
    color: color-mix(in srgb, var(--p-primary-color) 70%, var(--m-text-muted));
}

/* ═════ COL 2: Main ═════ */
.mcfg-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mcfg-main::-webkit-scrollbar { width: 6px; }
.mcfg-main::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }

.mcfg-main__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 22px 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Em modo embed (componentes /configuracoes/* aninhados), tira limites
   pra não esmagar layouts complexos. */
.mcfg-main.is-embed .mcfg-main__inner {
    max-width: none;
    padding: 0;
}

/* ── Hero compacto contextual quando embed ─────────────────────
   Substitui o hero da ConfiguracoesPage que não existe aqui (embedamos
   só a child sem o parent). Sticky no topo do scroll do .mcfg-main. */
.mcfg-embed-hero {
    position: sticky;
    top: 0;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--m-bg-medium);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--m-border);
    flex-shrink: 0;
}
.mcfg-embed-hero__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: var(--m-accent-soft);
    color: var(--m-accent);
    border-radius: 9px;
    flex-shrink: 0;
}
.mcfg-embed-hero__icon > i { font-size: 0.92rem; }
.mcfg-embed-hero__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mcfg-embed-hero__title {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--m-text);
    line-height: 1.2;
}
.mcfg-embed-hero__desc {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    line-height: 1.3;
}
.mcfg-embed-hero__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Wrapper que dá padding ao conteúdo embedado (espelha o
   `<div class="px-3 md:px-4 pb-5">` da ConfiguracoesPage). */
.mcfg-embed-wrap {
    padding: 16px 18px 28px;
}
@media (max-width: 1023px) {
    .mcfg-embed-wrap { padding: 12px 12px 24px; }
    .mcfg-embed-hero { padding: 10px 12px; }
}

/* Loading do Suspense quando o async component está carregando */
.mcfg-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--m-text-muted);
    font-size: 0.86rem;
}
.mcfg-loading > i { font-size: 1.2rem; color: var(--m-accent); }

/* ═════ Card "widget" (corpo da seção) ═════ */
.mcfg-w {
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mcfg-w__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mcfg-w__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.94rem;
    font-weight: 600;
}
.mcfg-w__title > i { color: var(--m-text-muted); font-size: 0.92rem; }

.mcfg-w__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.mcfg-w__action:hover { background: var(--m-bg-soft-hover); color: var(--m-text); }
.mcfg-w__action--danger:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: rgb(248, 113, 113);
}
.mcfg-w__action > i { font-size: 0.7rem; }

/* ═════ Field ═════ */
.mcfg-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mcfg-field__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--m-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mcfg-field__current {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.mcfg-field__hint {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    line-height: 1.4;
}

/* ═════ Segmented ═════ */
.mcfg-segmented {
    display: inline-flex;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
    width: fit-content;
}
.mcfg-seg__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 7px;
    background: transparent;
    border: none;
    color: var(--m-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    transition: background-color 140ms ease, color 140ms ease;
}
.mcfg-seg__btn:hover:not(.is-active) { color: var(--m-text); background: var(--m-bg-soft-hover); }
.mcfg-seg__btn.is-active {
    background: var(--m-accent-soft);
    color: var(--m-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-accent) 35%, transparent);
}
.mcfg-seg__btn > i { font-size: 0.78rem; }

/* ═════ Swatches ═════ */
.mcfg-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mcfg-swatch {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    padding: 0;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.mcfg-swatch:hover { transform: scale(1.1); }
.mcfg-swatch.is-active {
    transform: scale(1.1);
    box-shadow:
        0 0 0 2px var(--m-bg-medium),
        0 0 0 4px var(--p-primary-color);
}

/* ═════ Background pick ═════ */
.mcfg-bg-pick {
    display: flex;
    gap: 14px;
    align-items: stretch;
}
.mcfg-bg-preview {
    width: 140px;
    height: 90px;
    border-radius: 10px;
    border: 1px solid var(--m-border);
    overflow: hidden;
    background: var(--m-bg-medium);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.mcfg-bg-preview > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mcfg-bg-preview.is-empty > i {
    color: var(--m-text-faint);
    font-size: 1.6rem;
}
.mcfg-bg-pick__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

/* ═════ Slider ═════ */
.mcfg-slider {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--m-bg-medium);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    accent-color: var(--p-primary-color);
}
.mcfg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--p-primary-color);
    cursor: pointer;
    border: 2px solid var(--m-bg-medium);
}
.mcfg-slider::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--p-primary-color);
    cursor: pointer;
    border: 2px solid var(--m-bg-medium);
}

/* ═════ Toque ═════ */
.mcfg-toque {
    display: flex;
    gap: 8px;
}
.mcfg-select {
    flex: 1;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}
.mcfg-select:focus { border-color: var(--m-border-strong); }

/* ═════ Botões genéricos ═════ */
.mcfg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    color: var(--m-text);
    transition: background-color 140ms ease, transform 140ms ease;
}
.mcfg-btn:hover:not(:disabled) { background: var(--m-bg-soft-hover); transform: translateY(-1px); }
.mcfg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mcfg-btn--primary {
    background: var(--m-accent);
    border-color: var(--m-accent);
    color: white;
}
.mcfg-btn--primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--m-accent) 88%, white);
}

/* ═════ Footer informativo ═════ */
.mcfg-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--m-bg-soft) 60%, transparent);
    border: 1px dashed var(--m-border);
    border-radius: 10px;
    color: var(--m-text-muted);
    font-size: 0.74rem;
}
.mcfg-foot > i { color: rgb(74, 222, 128); font-size: 0.85rem; }

/* ═════ Drawer mobile (blueprint) ═════ */
.mcfg-mobile-drawer {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(360px, 88vw);
    z-index: 80;
    background: var(--m-bg-medium);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-right: 1px solid var(--m-border);
    transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--m-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.mcfg-mobile-drawer.is-open { transform: translateX(0); }
.mcfg-mobile-drawer__scroll {
    height: 100%;
    overflow-y: auto;
    padding: 12px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mcfg-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
.mcfg-mobile-drawer__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}
/* Aside teleportada perde os adornos próprios dentro do drawer */
.mcfg-mobile-drawer__scroll .mcfg-side {
    width: 100%;
    height: auto;
    overflow: visible;
    border-right: none;
    background: transparent;
    padding: 0;
}
.mcfg-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;
}
.mcfg-drawer-fade-enter-active,
.mcfg-drawer-fade-leave-active { transition: opacity 200ms ease; }
.mcfg-drawer-fade-enter-from,
.mcfg-drawer-fade-leave-to { opacity: 0; }

/* Mobile (<lg) — central 100%, aside off-canvas */
@media (max-width: 1023px) {
    .mcfg-body { flex-direction: column; }
    .mcfg-main { width: 100%; }
    .mcfg-page__sep,
    .mcfg-page__title > i,
    .mcfg-page__title > span:first-of-type { display: none; }
    .mcfg-menu-btn--mobile-only { display: inline-flex; }
    .mcfg-main__inner { padding: 14px; }
    .mcfg-bg-pick { flex-direction: column; }
    .mcfg-bg-preview { width: 100%; height: 120px; }
    .mcfg-segmented { width: 100%; }
    .mcfg-seg__btn { flex: 1; justify-content: center; }
}
</style>
