<!--
|--------------------------------------------------------------------------
| Agência PSI
|--------------------------------------------------------------------------
| Criado e desenvolvido por Leonardo Nohama
|
| Tecnologia aplicada à escuta.
| Estrutura para o cuidado.
|
| Arquivo: src/views/pages/public/AgendadorPublicoPage.vue
| Data: 2026
| Local: São Carlos/SP — Brasil
|--------------------------------------------------------------------------
| © 2026 — Todos os direitos reservados
|--------------------------------------------------------------------------
-->
<script setup>
import { ref, computed, onMounted, watch, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { supabase } from '@/lib/supabase/client';

const route = useRoute();
const slug = computed(() => route.params.slug);

// ── Estado global ────────────────────────────────────────────────
const loadingCfg = ref(true);
const cfg = ref(null);
const notFound = ref(false);
const tela = ref('home');

// ── Dados do paciente ────────────────────────────────────────────
const form = ref({
    nome: '',
    email: '',
    celular: '',
    cpf: '',
    motivo: '',
    como_conheceu: '',
    aceite_lgpd: false,
    tipo: '',
    modalidade: ''
});

// ── Email já cadastrado ──────────────────────────────────────────
const emailJaCadastrado = ref(false);
const verificandoEmail = ref(false);
async function verificarEmail() {
    emailJaCadastrado.value = false;
    const email = form.value.email.trim();
    if (!email || !/^\S+@\S+\.\S+$/.test(email) || !slug.value) return;
    verificandoEmail.value = true;
    try {
        const { data } = await supabase.rpc('agendador_check_email', {
            p_slug: slug.value,
            p_email: email
        });
        emailJaCadastrado.value = !!data;
    } catch {
        /* silencioso */
    } finally {
        verificandoEmail.value = false;
    }
}

// ── Máscaras ─────────────────────────────────────────────────────
function maskPhone(e) {
    let v = e.target.value.replace(/\D/g, '').slice(0, 11);
    if (v.length > 7) v = `(${v.slice(0, 2)}) ${v.slice(2, 3)} ${v.slice(3, 7)}-${v.slice(7)}`;
    else if (v.length > 3) v = `(${v.slice(0, 2)}) ${v.slice(2)}`;
    else if (v.length > 0) v = `(${v}`;
    form.value.celular = v;
}
function maskCpf(e) {
    let v = e.target.value.replace(/\D/g, '').slice(0, 11);
    if (v.length > 9) v = `${v.slice(0, 3)}.${v.slice(3, 6)}.${v.slice(6, 9)}-${v.slice(9)}`;
    else if (v.length > 6) v = `${v.slice(0, 3)}.${v.slice(3, 6)}.${v.slice(6)}`;
    else if (v.length > 3) v = `${v.slice(0, 3)}.${v.slice(3)}`;
    form.value.cpf = v;
}

// ── Dialog endereço ──────────────────────────────────────────────
const enderecoDialogOpen = ref(false);

// ── Calendário ──────────────────────────────────────────────────
const hoje = new Date();
const calAno = ref(hoje.getFullYear());
const calMes = ref(hoje.getMonth() + 1);
const diasDisponiveis = ref([]);
const loadingDias = ref(false);
const dataSelecionada = ref(null);

// ── Horários ────────────────────────────────────────────────────
const slots = ref([]);
const loadingSlots = ref(false);
const horaSelecionada = ref(null);

// ── Checkout / envio ────────────────────────────────────────────
const enviando = ref(false);
const erroEnvio = ref('');
const solicitacaoId = ref(null);

// ── Pix countdown ───────────────────────────────────────────────
const pixSecs = ref(0);
const pixCopiado = ref(false);
let pixTimer = null;

// ── Erros de validação ───────────────────────────────────────────
const erros = ref({});

// ── HELPERS ─────────────────────────────────────────────────────
const MESES = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
const DIAS_ABR = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
const DIAS_LETRA = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];

function pad2(n) {
    return String(n).padStart(2, '0');
}

const hojeIso = `${hoje.getFullYear()}-${pad2(hoje.getMonth() + 1)}-${pad2(hoje.getDate())}`;

function fmtDataLabel(iso) {
    if (!iso) return '';
    const [y, m, d] = iso.split('-');
    const dow = new Date(+y, +m - 1, +d).getDay();
    return `${DIAS_ABR[dow]}, ${d}/${m}/${y}`;
}

function fmtHora(h) {
    return h ? String(h).slice(0, 5) : '';
}

const dataLabel = computed(() => fmtDataLabel(dataSelecionada.value));
const horaLabel = computed(() => fmtHora(horaSelecionada.value));
const corPrimaria = computed(() => cfg.value?.cor_primaria || '#4b6bff');

const manha = computed(() => slots.value.filter((s) => s.hora < '12:00' && s.disponivel));
const tarde = computed(() => slots.value.filter((s) => s.hora >= '12:00' && s.hora < '18:00' && s.disponivel));
const noite = computed(() => slots.value.filter((s) => s.hora >= '18:00' && s.disponivel));

const pixCountdown = computed(() => {
    const m = Math.floor(pixSecs.value / 60);
    const s = pixSecs.value % 60;
    return `${pad2(m)}:${pad2(s)}`;
});

// progresso do pix (0-1)
const pixProgress = computed(() => {
    const total = (cfg.value?.pix_countdown_minutos || 20) * 60;
    return total > 0 ? pixSecs.value / total : 0;
});

// Step indicator (1-4 para as telas de fluxo)
const stepMap = { nome: 1, data: 2, triagem: 3, checkout: 3 };
const stepTotal = computed(() => {
    const hasTriagem = cfg.value?.triagem_motivo || cfg.value?.triagem_como_conheceu;
    return hasTriagem ? 4 : 3;
});
const stepAtual = computed(() => {
    if (tela.value === 'checkout') return stepTotal.value;
    return stepMap[tela.value] || 0;
});
const showSteps = computed(() => ['nome', 'data', 'triagem', 'checkout'].includes(tela.value));

// ── Calendário: dias do mês ──────────────────────────────────────
const calDias = computed(() => {
    const disponiveisSet = new Set(diasDisponiveis.value.map((d) => d.data));
    const primeiro = new Date(calAno.value, calMes.value - 1, 1);
    const ultimo = new Date(calAno.value, calMes.value, 0).getDate();
    const inicioDow = primeiro.getDay();
    const cells = [];
    for (let i = 0; i < inicioDow; i++) cells.push(null);
    for (let d = 1; d <= ultimo; d++) {
        const iso = `${calAno.value}-${pad2(calMes.value)}-${pad2(d)}`;
        const isPast = iso < hojeIso;
        cells.push({ d, iso, disponivel: disponiveisSet.has(iso) && !isPast, isPast, isHoje: iso === hojeIso });
    }
    return cells;
});

const mesAtualOuFuturo = computed(() => {
    const agora = new Date();
    return calAno.value > agora.getFullYear() || (calAno.value === agora.getFullYear() && calMes.value > agora.getMonth() + 1);
});

// ── LOAD ─────────────────────────────────────────────────────────
async function loadConfig() {
    loadingCfg.value = true;
    try {
        const { data, error } = await supabase.from('agendador_configuracoes').select('*').eq('link_slug', slug.value).eq('ativo', true).maybeSingle();
        if (error) throw error;
        if (!data) {
            notFound.value = true;
            return;
        }
        cfg.value = data;
        document.title = data.nome_exibicao || 'Agendamento Online';
    } catch (e) {
        notFound.value = true;
        console.error('[agendador]', e);
    } finally {
        loadingCfg.value = false;
    }
}

async function loadDias() {
    if (!cfg.value) return;
    loadingDias.value = true;
    diasDisponiveis.value = [];
    try {
        const { data, error } = await supabase.rpc('agendador_dias_disponiveis', {
            p_slug: slug.value,
            p_ano: calAno.value,
            p_mes: calMes.value
        });
        if (error) throw error;
        diasDisponiveis.value = data || [];
    } catch (e) {
        console.error('[agendador] dias:', e);
    } finally {
        loadingDias.value = false;
    }
}

async function loadSlots(iso) {
    if (!cfg.value || !iso) return;
    loadingSlots.value = true;
    slots.value = [];
    horaSelecionada.value = null;
    try {
        const { data, error } = await supabase.rpc('agendador_slots_disponiveis', {
            p_slug: slug.value,
            p_data: iso
        });
        if (error) throw error;
        slots.value = (data || []).map((s) => ({ ...s, hora: fmtHora(s.hora) }));
    } catch (e) {
        console.error('[agendador] slots:', e);
    } finally {
        loadingSlots.value = false;
    }
}

// ── Calendário nav ────────────────────────────────────────────────
function mesAnterior() {
    if (calMes.value === 1) {
        calMes.value = 12;
        calAno.value--;
    } else calMes.value--;
    dataSelecionada.value = null;
    slots.value = [];
}
function mesSeguinte() {
    if (calMes.value === 12) {
        calMes.value = 1;
        calAno.value++;
    } else calMes.value++;
    dataSelecionada.value = null;
    slots.value = [];
}
function selecionarDia(cell) {
    if (!cell || !cell.disponivel) return;
    dataSelecionada.value = cell.iso;
    loadSlots(cell.iso);
}

watch([calAno, calMes], loadDias);

// ── Validações ────────────────────────────────────────────────────
function validarNome() {
    erros.value = {};
    const partes = form.value.nome.trim().split(/\s+/);
    if (partes.length < 2 || partes[0].length < 2) {
        erros.value.nome = 'Informe nome e sobrenome.';
        return false;
    }
    return true;
}
function validarDataHora() {
    erros.value = {};
    if (!dataSelecionada.value) {
        erros.value.data = 'Selecione uma data.';
        return false;
    }
    if (!horaSelecionada.value) {
        erros.value.hora = 'Selecione um horário.';
        return false;
    }
    return true;
}
function validarCheckout() {
    erros.value = {};
    const f = form.value;
    if (!/^\S+@\S+\.\S+$/.test(f.email)) {
        erros.value.email = 'E-mail inválido.';
        return false;
    }
    if (f.celular.replace(/\D/g, '').length < 10) {
        erros.value.celular = 'Celular inválido.';
        return false;
    }
    if (f.cpf.replace(/\D/g, '').length !== 11) {
        erros.value.cpf = 'CPF deve ter 11 dígitos.';
        return false;
    }
    if (cfg.value?.exigir_aceite_lgpd && !f.aceite_lgpd) {
        erros.value.lgpd = 'Aceite os termos para continuar.';
        return false;
    }
    return true;
}

// ── Fluxo ────────────────────────────────────────────────────────
function irPara(t) {
    erros.value = {};
    tela.value = t;
    // Pré-seleciona modalidade ao entrar na tela nome
    if (t === 'nome' && cfg.value?.modalidade !== 'ambos') {
        form.value.modalidade = cfg.value?.modalidade || 'presencial';
    } else if (t === 'nome' && !form.value.modalidade) {
        form.value.modalidade = 'presencial';
    }
    window.scrollTo({ top: 0, behavior: 'smooth' });
}
function continuarNome() {
    if (validarNome()) irPara('data');
}
function continuarData() {
    if (validarDataHora()) {
        if (cfg.value?.triagem_motivo || cfg.value?.triagem_como_conheceu) irPara('triagem');
        else irPara('checkout');
    }
}
function continuarTriagem() {
    irPara('checkout');
}

// ── Envio ─────────────────────────────────────────────────────────
async function enviarAgendamento() {
    if (!validarCheckout()) return;
    enviando.value = true;
    erroEnvio.value = '';
    try {
        const f = form.value;
        const nomePartes = f.nome.trim().split(/\s+/);
        const primeiroNome = nomePartes[0];
        const sobrenomeResto = nomePartes.slice(1).join(' ');
        const reservadoAte = new Date(Date.now() + (cfg.value.reserva_horas || 2) * 3600 * 1000).toISOString();
        const { data: sol, error: solErr } = await supabase
            .from('agendador_solicitacoes')
            .insert({
                owner_id: cfg.value.owner_id,
                tenant_id: cfg.value.tenant_id,
                paciente_nome: primeiroNome,
                paciente_sobrenome: sobrenomeResto,
                paciente_email: f.email.trim().toLowerCase(),
                paciente_celular: f.celular.replace(/\D/g, ''),
                paciente_cpf: f.cpf.replace(/\D/g, ''),
                tipo: f.tipo,
                modalidade: f.modalidade || (cfg.value.modalidade === 'ambos' ? 'presencial' : cfg.value.modalidade),
                data_solicitada: dataSelecionada.value,
                hora_solicitada: horaSelecionada.value,
                reservado_ate: reservadoAte,
                motivo: f.motivo || null,
                como_conheceu: f.como_conheceu || null,
                status: 'pendente'
            })
            .select('id')
            .single();
        if (solErr) throw solErr;
        solicitacaoId.value = sol.id;
        await supabase.auth.signInWithOtp({
            email: f.email.trim().toLowerCase(),
            options: { shouldCreateUser: true, data: { full_name: f.nome.trim(), phone: f.celular.replace(/\D/g, '') } }
        });
        if (cfg.value.pagamento_obrigatorio && cfg.value.pix_chave) {
            iniciarPix();
            irPara('pix');
        } else irPara('sucesso');
    } catch (e) {
        erroEnvio.value = e.message || 'Erro ao enviar. Tente novamente.';
    } finally {
        enviando.value = false;
    }
}

// ── Pix ──────────────────────────────────────────────────────────
function iniciarPix() {
    pixSecs.value = (cfg.value.pix_countdown_minutos || 20) * 60;
    clearInterval(pixTimer);
    pixTimer = setInterval(() => {
        if (pixSecs.value <= 0) {
            clearInterval(pixTimer);
            irPara('home');
        } else pixSecs.value--;
    }, 1000);
}
async function copiarPix() {
    try {
        await navigator.clipboard.writeText(cfg.value.pix_chave);
        pixCopiado.value = true;
        setTimeout(() => {
            pixCopiado.value = false;
        }, 2000);
    } catch {
        /* silencioso */
    }
}

onBeforeUnmount(() => clearInterval(pixTimer));

// ── Init ─────────────────────────────────────────────────────────
onMounted(async () => {
    await loadConfig();
    if (!notFound.value) await loadDias();
});

// tipo display
const tipoLabel = computed(
    () =>
        ({
            primeira: 'Primeira Entrevista',
            retorno: 'Retorno',
            reagendar: 'Reagendamento'
        })[form.value.tipo] || ''
);

// ── Dark mode (sem persistência) ─────────────────────────────────
const isDark = ref(false);
</script>

<template>
    <!-- ── ROOT ──────────────────────────────────────────────────── -->
    <div class="agd-root" :class="{ 'agd-dark': isDark }">
        <!-- ── FAB TEMA ───────────────────────────────────────────── -->
        <button class="agd-fab-tema" :title="isDark ? 'Modo claro' : 'Modo escuro'" @click="isDark = !isDark">
            <i :class="isDark ? 'pi pi-sun' : 'pi pi-moon'" />
        </button>

        <!-- ══ LOADING ══════════════════════════════════════════════ -->
        <div v-if="loadingCfg" class="agd-estado-central">
            <div class="agd-spin" />
            <p class="agd-spin-txt">Carregando...</p>
        </div>

        <!-- ══ NOT FOUND ════════════════════════════════════════════ -->
        <div v-else-if="notFound" class="agd-card agd-estado-central agd-notfound">
            <div class="agd-notfound-icon">
                <i class="pi pi-calendar-times text-3xl" />
            </div>
            <h2 class="agd-notfound-title">Link não encontrado</h2>
            <p class="agd-notfound-sub">O link que você acessou não existe ou foi desativado.</p>
        </div>

        <!-- ══ SHELL ════════════════════════════════════════════════ -->
        <div v-else class="agd-shell">
            <!-- ── CARD ─────────────────────────────────────────────── -->
            <div class="agd-card">
                <!-- HERO ─────────────────────────────────────────────── -->
                <div class="agd-hero" :style="{ '--cp': corPrimaria }">
                    <!-- blobs decorativos -->
                    <div class="agd-blobs" aria-hidden="true">
                        <div class="agd-blob agd-blob--1" />
                        <div class="agd-blob agd-blob--2" />
                        <div class="agd-blob agd-blob--3" />
                    </div>

                    <!-- logo / avatar -->
                    <div class="agd-hero-avatar">
                        <img v-if="cfg?.logomarca_url" :src="cfg.logomarca_url" :alt="cfg.nome_exibicao" class="w-full h-full object-cover" />
                        <i v-else class="pi pi-calendar agd-hero-icon-fallback" />
                    </div>

                    <!-- Nome e subtítulo -->
                    <div class="agd-hero-info">
                        <div class="agd-hero-name">{{ cfg?.nome_exibicao || 'Agendamento' }}</div>
                        <button v-if="cfg?.endereco" class="agd-hero-addr" @click="enderecoDialogOpen = true" title="Ver endereço">
                            <i class="pi pi-map-marker" />
                            <span>{{ cfg.endereco }}</span>
                            <i class="pi pi-external-link text-[10px] opacity-60" />
                        </button>
                    </div>
                </div>

                <!-- STEPS ────────────────────────────────────────────── -->
                <div class="agd-steps-bar">
                    <template v-if="showSteps">
                        <div v-for="n in stepTotal" :key="n" class="agd-step-pill" :class="{ 'agd-step-pill--done': n <= stepAtual, 'agd-step-pill--cur': n === stepAtual }" :style="n <= stepAtual ? { background: corPrimaria } : {}" />
                    </template>
                    <div v-else class="agd-steps-spacer" />
                </div>

                <!-- BODY ─────────────────────────────────────────────── -->
                <div class="agd-body">
                    <!-- ══ HOME ══════════════════════════════════════════ -->
                    <section v-if="tela === 'home'" class="agd-section">
                        <p class="agd-welcome-msg">
                            {{ cfg?.mensagem_boas_vindas || 'Bem-vindo! Escolha o tipo de consulta para começar.' }}
                        </p>

                        <!-- "Como chegar" -->
                        <div v-if="cfg?.botao_como_chegar_ativo && cfg?.endereco" class="flex justify-center mb-5">
                            <a :href="cfg?.maps_url || `https://www.google.com/maps/search/${encodeURIComponent(cfg?.endereco || '')}`" target="_blank" class="agd-link-mapa" :style="{ color: corPrimaria }">
                                <i class="pi pi-directions text-xs" />
                                Como chegar
                            </a>
                        </div>

                        <div class="agd-divider" />

                        <!-- Botões de tipo -->
                        <div class="flex flex-col gap-3 mt-5">
                            <button
                                v-if="cfg?.tipos_habilitados?.includes('primeira')"
                                class="agd-tipo-btn"
                                :style="{ '--btn-bg': '#0284c7', '--btn-shadow': 'rgba(2,132,199,.25)' }"
                                @click="
                                    () => {
                                        form.tipo = 'primeira';
                                        irPara('nome');
                                    }
                                "
                            >
                                <span class="agd-tipo-icon">
                                    <i class="pi pi-star text-sm" />
                                </span>
                                <span class="agd-tipo-label">
                                    <span class="agd-tipo-main">Primeira Entrevista</span>
                                    <span class="agd-tipo-sub">Novo paciente</span>
                                </span>
                                <i class="pi pi-arrow-right text-xs ml-auto opacity-60" />
                            </button>

                            <button
                                v-if="cfg?.tipos_habilitados?.includes('retorno')"
                                class="agd-tipo-btn"
                                :style="{ '--btn-bg': '#059669', '--btn-shadow': 'rgba(5,150,105,.25)' }"
                                @click="
                                    () => {
                                        form.tipo = 'retorno';
                                        irPara('nome');
                                    }
                                "
                            >
                                <span class="agd-tipo-icon">
                                    <i class="pi pi-refresh text-sm" />
                                </span>
                                <span class="agd-tipo-label">
                                    <span class="agd-tipo-main">Retorno</span>
                                    <span class="agd-tipo-sub">Já sou paciente</span>
                                </span>
                                <i class="pi pi-arrow-right text-xs ml-auto opacity-60" />
                            </button>

                            <button
                                v-if="cfg?.tipos_habilitados?.includes('reagendar')"
                                class="agd-tipo-btn"
                                :style="{ '--btn-bg': '#7c3aed', '--btn-shadow': 'rgba(124,58,237,.25)' }"
                                @click="
                                    () => {
                                        form.tipo = 'reagendar';
                                        irPara('nome');
                                    }
                                "
                            >
                                <span class="agd-tipo-icon">
                                    <i class="pi pi-calendar-plus text-sm" />
                                </span>
                                <span class="agd-tipo-label">
                                    <span class="agd-tipo-main">Reagendar</span>
                                    <span class="agd-tipo-sub">Mudar data ou horário</span>
                                </span>
                                <i class="pi pi-arrow-right text-xs ml-auto opacity-60" />
                            </button>
                        </div>

                        <p class="agd-powered">Powered by <strong>Agência Psi</strong></p>
                    </section>

                    <!-- ══ NOME ═══════════════════════════════════════════ -->
                    <section v-else-if="tela === 'nome'" class="agd-section">
                        <span class="agd-badge" :style="{ background: corPrimaria + '18', color: corPrimaria }">
                            {{ tipoLabel }}
                        </span>

                        <h2 class="agd-title">Qual é o seu nome completo?</h2>
                        <p class="agd-sub">Informe nome e sobrenome para prosseguir.</p>

                        <!-- Modalidade (só quando cfg permite ambos) -->
                        <div v-if="cfg?.modalidade === 'ambos'" class="agd-modal-wrap mt-5">
                            <div class="agd-modal-label">Como prefere a sessão?</div>
                            <div class="agd-modal-btns">
                                <button
                                    class="agd-modal-btn"
                                    :class="{ 'agd-modal-btn--sel': form.modalidade === 'presencial' }"
                                    :style="form.modalidade === 'presencial' ? { borderColor: corPrimaria, background: corPrimaria + '12', color: corPrimaria } : {}"
                                    @click="form.modalidade = 'presencial'"
                                >
                                    <i class="pi pi-building text-base" />
                                    <span>Presencial</span>
                                </button>
                                <button
                                    class="agd-modal-btn"
                                    :class="{ 'agd-modal-btn--sel': form.modalidade === 'online' }"
                                    :style="form.modalidade === 'online' ? { borderColor: corPrimaria, background: corPrimaria + '12', color: corPrimaria } : {}"
                                    @click="form.modalidade = 'online'"
                                >
                                    <i class="pi pi-video text-base" />
                                    <span>Online</span>
                                </button>
                            </div>
                        </div>

                        <div class="agd-field-wrap mt-5">
                            <div class="agd-field">
                                <input v-model="form.nome" type="text" placeholder="Ex: João da Silva" class="agd-input" :class="{ 'agd-input--err': erros.nome }" autofocus @keydown.enter="continuarNome" />
                                <label class="agd-label">Nome completo</label>
                            </div>
                            <p v-if="erros.nome" class="agd-err">{{ erros.nome }}</p>
                        </div>

                        <div class="agd-actions">
                            <button class="agd-btn-primary" :style="{ background: corPrimaria }" @click="continuarNome">Continuar <i class="pi pi-arrow-right text-sm" /></button>
                            <button class="agd-btn-ghost" @click="irPara('home')"><i class="pi pi-arrow-left text-sm" /> Voltar</button>
                        </div>
                    </section>

                    <!-- ══ DATA / HORA ════════════════════════════════════ -->
                    <section v-else-if="tela === 'data'" class="agd-section">
                        <span class="agd-badge" :style="{ background: corPrimaria + '18', color: corPrimaria }">
                            {{ tipoLabel }}
                        </span>
                        <h2 class="agd-title">{{ form.nome }}, escolha o melhor dia.</h2>
                        <p class="agd-sub">Apenas datas e horários disponíveis são exibidos.</p>

                        <!-- CALENDÁRIO -->
                        <div class="agd-cal mt-5">
                            <!-- nav -->
                            <div class="agd-cal-nav">
                                <button class="agd-cal-nav-btn" :disabled="!mesAtualOuFuturo" @click="mesAnterior">
                                    <i class="pi pi-angle-left" />
                                </button>
                                <span class="agd-cal-month">{{ MESES[calMes - 1] }} {{ calAno }}</span>
                                <button class="agd-cal-nav-btn" @click="mesSeguinte">
                                    <i class="pi pi-angle-right" />
                                </button>
                            </div>

                            <!-- dias semana -->
                            <div class="agd-cal-week">
                                <span v-for="(d, i) in DIAS_LETRA" :key="i">{{ d }}</span>
                            </div>

                            <!-- skeleton -->
                            <div v-if="loadingDias" class="agd-cal-grid">
                                <div v-for="n in 35" :key="n" class="agd-cal-skel" />
                            </div>

                            <!-- grade de dias -->
                            <div v-else class="agd-cal-grid">
                                <div v-for="(cell, i) in calDias" :key="i">
                                    <button
                                        v-if="cell"
                                        class="agd-cal-day"
                                        :class="{
                                            'agd-cal-day--avail': cell.disponivel && dataSelecionada !== cell.iso,
                                            'agd-cal-day--sel': dataSelecionada === cell.iso,
                                            'agd-cal-day--unavail': !cell.disponivel,
                                            'agd-cal-day--hoje': cell.isHoje && dataSelecionada !== cell.iso
                                        }"
                                        :style="dataSelecionada === cell.iso ? { background: corPrimaria, borderColor: corPrimaria } : {}"
                                        :disabled="!cell.disponivel"
                                        @click="selecionarDia(cell)"
                                    >
                                        {{ cell.d }}
                                    </button>
                                    <div v-else />
                                </div>
                            </div>
                        </div>

                        <!-- SLOTS -->
                        <div v-if="dataSelecionada" class="agd-slots mt-4">
                            <div class="agd-slots-header">
                                <i class="pi pi-clock" />
                                <span>{{ dataLabel }}</span>
                            </div>

                            <div v-if="loadingSlots" class="flex flex-wrap gap-2 mt-3">
                                <div v-for="n in 8" :key="n" class="agd-slot-skel" />
                            </div>

                            <template v-else>
                                <div v-if="!slots.length" class="agd-slots-empty">
                                    <i class="pi pi-calendar-times text-2xl mb-2" />
                                    <span>Nenhum horário disponível neste dia.</span>
                                </div>
                                <template v-else>
                                    <div v-if="manha.length" class="agd-slot-group">
                                        <span class="agd-slot-period">☀ Manhã</span>
                                        <div class="flex flex-wrap gap-2">
                                            <button
                                                v-for="s in manha"
                                                :key="s.hora"
                                                class="agd-chip"
                                                :class="{ 'agd-chip--sel': horaSelecionada === s.hora }"
                                                :style="horaSelecionada === s.hora ? { background: corPrimaria, borderColor: corPrimaria } : {}"
                                                @click="horaSelecionada = s.hora"
                                            >
                                                {{ s.hora }}
                                            </button>
                                        </div>
                                    </div>
                                    <div v-if="tarde.length" class="agd-slot-group">
                                        <span class="agd-slot-period">🌤 Tarde</span>
                                        <div class="flex flex-wrap gap-2">
                                            <button
                                                v-for="s in tarde"
                                                :key="s.hora"
                                                class="agd-chip"
                                                :class="{ 'agd-chip--sel': horaSelecionada === s.hora }"
                                                :style="horaSelecionada === s.hora ? { background: corPrimaria, borderColor: corPrimaria } : {}"
                                                @click="horaSelecionada = s.hora"
                                            >
                                                {{ s.hora }}
                                            </button>
                                        </div>
                                    </div>
                                    <div v-if="noite.length" class="agd-slot-group">
                                        <span class="agd-slot-period">🌙 Noite</span>
                                        <div class="flex flex-wrap gap-2">
                                            <button
                                                v-for="s in noite"
                                                :key="s.hora"
                                                class="agd-chip"
                                                :class="{ 'agd-chip--sel': horaSelecionada === s.hora }"
                                                :style="horaSelecionada === s.hora ? { background: corPrimaria, borderColor: corPrimaria } : {}"
                                                @click="horaSelecionada = s.hora"
                                            >
                                                {{ s.hora }}
                                            </button>
                                        </div>
                                    </div>
                                </template>
                            </template>
                        </div>

                        <div v-else class="agd-slots-hint mt-4">
                            <i class="pi pi-hand-pointer text-xl mb-2 block" />
                            Toque em um dia disponível para ver os horários.
                        </div>

                        <p v-if="erros.data || erros.hora" class="agd-err mt-3">{{ erros.data || erros.hora }}</p>

                        <div class="agd-actions">
                            <button class="agd-btn-primary" :style="{ background: corPrimaria }" :disabled="!dataSelecionada || !horaSelecionada" @click="continuarData">Continuar <i class="pi pi-arrow-right text-sm" /></button>
                            <button class="agd-btn-ghost" @click="irPara('nome')"><i class="pi pi-arrow-left text-sm" /> Voltar</button>
                        </div>
                    </section>

                    <!-- ══ TRIAGEM ════════════════════════════════════════ -->
                    <section v-else-if="tela === 'triagem'" class="agd-section">
                        <h2 class="agd-title">Mais algumas informações</h2>
                        <p class="agd-sub">Isso nos ajuda a preparar melhor o seu atendimento. Tudo opcional.</p>

                        <div class="mt-6 flex flex-col gap-4">
                            <div v-if="cfg?.triagem_motivo" class="agd-field">
                                <textarea v-model="form.motivo" rows="3" placeholder="Descreva brevemente o que te trouxe até aqui..." class="agd-input agd-textarea" />
                                <label class="agd-label">Motivo <span class="agd-optional">(opcional)</span></label>
                            </div>
                            <div v-if="cfg?.triagem_como_conheceu" class="agd-field">
                                <select v-model="form.como_conheceu" class="agd-input agd-select">
                                    <option value="">Selecione uma opção</option>
                                    <option value="indicacao">Indicação de amigo/familiar</option>
                                    <option value="instagram">Instagram</option>
                                    <option value="google">Google / Busca online</option>
                                    <option value="facebook">Facebook</option>
                                    <option value="linkedin">LinkedIn</option>
                                    <option value="outro">Outro</option>
                                </select>
                                <label class="agd-label">Como nos conheceu? <span class="agd-optional">(opcional)</span></label>
                            </div>
                        </div>

                        <div class="agd-actions">
                            <button class="agd-btn-primary" :style="{ background: corPrimaria }" @click="continuarTriagem">Continuar <i class="pi pi-arrow-right text-sm" /></button>
                            <button class="agd-btn-ghost" @click="irPara('data')"><i class="pi pi-arrow-left text-sm" /> Voltar</button>
                        </div>
                    </section>

                    <!-- ══ CHECKOUT ═══════════════════════════════════════ -->
                    <section v-else-if="tela === 'checkout'" class="agd-section">
                        <!-- resumo do agendamento -->
                        <div class="agd-resumo" :style="{ borderColor: corPrimaria + '30', background: corPrimaria + '08' }">
                            <div class="agd-resumo-icon" :style="{ background: corPrimaria + '18', color: corPrimaria }">
                                <i class="pi pi-calendar text-base" />
                            </div>
                            <div class="agd-resumo-info">
                                <div class="agd-resumo-data">{{ dataLabel }}</div>
                                <div class="agd-resumo-hora">{{ horaLabel }} · {{ tipoLabel }}</div>
                            </div>
                            <button class="agd-resumo-edit" :style="{ color: corPrimaria }" @click="irPara('data')" title="Alterar">
                                <i class="pi pi-pencil text-sm" />
                            </button>
                        </div>

                        <h2 class="agd-title mt-5">Complete seu cadastro</h2>
                        <p class="agd-sub">Seus dados são usados apenas para confirmar o agendamento.</p>

                        <div class="mt-5 flex flex-col gap-3">
                            <!-- Nome completo (read-only, já preenchido) -->
                            <div class="agd-nome-readonly">
                                <i class="pi pi-user text-sm" />
                                <span>{{ form.nome }}</span>
                                <button class="agd-nome-edit" @click="irPara('nome')" title="Alterar nome">
                                    <i class="pi pi-pencil text-xs" />
                                </button>
                            </div>

                            <!-- E-mail -->
                            <div class="agd-field">
                                <input v-model="form.email" type="email" placeholder="voce@exemplo.com" class="agd-input" :class="{ 'agd-input--err': erros.email }" @blur="verificarEmail" />
                                <label class="agd-label">E-mail</label>
                            </div>
                            <p v-if="erros.email" class="agd-err">{{ erros.email }}</p>
                            <!-- Aviso email já cadastrado -->
                            <div v-if="emailJaCadastrado" class="agd-email-aviso">
                                <i class="pi pi-info-circle" />
                                <span>Este e-mail já possui um agendamento anterior. Se você já é paciente, escolha <strong>Retorno</strong>.</span>
                            </div>

                            <!-- Celular -->
                            <div class="agd-field">
                                <input :value="form.celular" type="tel" placeholder="(00) 9 9999-9999" class="agd-input" :class="{ 'agd-input--err': erros.celular }" maxlength="16" @input="maskPhone" />
                                <label class="agd-label">Celular</label>
                            </div>
                            <p v-if="erros.celular" class="agd-err">{{ erros.celular }}</p>

                            <!-- CPF -->
                            <div class="agd-field">
                                <input :value="form.cpf" type="text" placeholder="000.000.000-00" class="agd-input" :class="{ 'agd-input--err': erros.cpf }" maxlength="14" @input="maskCpf" />
                                <label class="agd-label">CPF</label>
                            </div>
                            <p v-if="erros.cpf" class="agd-err">{{ erros.cpf }}</p>
                        </div>

                        <!-- LGPD -->
                        <label v-if="cfg?.exigir_aceite_lgpd" class="agd-lgpd mt-4">
                            <input type="checkbox" v-model="form.aceite_lgpd" class="agd-check" />
                            <span class="agd-lgpd-txt">
                                {{ cfg?.texto_termos_lgpd || 'Li e concordo com a política de privacidade e tratamento de dados pessoais conforme a LGPD.' }}
                            </span>
                        </label>
                        <p v-if="erros.lgpd" class="agd-err mt-2">{{ erros.lgpd }}</p>

                        <div v-if="erroEnvio" class="agd-err-box mt-4"><i class="pi pi-exclamation-triangle mr-2" />{{ erroEnvio }}</div>

                        <div class="agd-actions">
                            <button class="agd-btn-primary" :style="{ background: corPrimaria }" :disabled="enviando" @click="enviarAgendamento">
                                <span v-if="enviando" class="agd-spin-sm" />
                                {{ enviando ? 'Enviando...' : 'Confirmar solicitação' }}
                            </button>
                            <button class="agd-btn-ghost" @click="irPara(cfg?.triagem_motivo || cfg?.triagem_como_conheceu ? 'triagem' : 'data')"><i class="pi pi-arrow-left text-sm" /> Voltar</button>
                        </div>
                    </section>

                    <!-- ══ PIX ════════════════════════════════════════════ -->
                    <section v-else-if="tela === 'pix'" class="agd-section text-center">
                        <div class="agd-pix-ring mx-auto mb-6">
                            <svg viewBox="0 0 80 80" class="w-full h-full">
                                <circle cx="40" cy="40" r="34" fill="none" stroke="currentColor" stroke-width="5" class="agd-pix-track" />
                                <circle
                                    cx="40"
                                    cy="40"
                                    r="34"
                                    fill="none"
                                    :stroke="corPrimaria"
                                    stroke-width="5"
                                    stroke-linecap="round"
                                    stroke-dasharray="213.6"
                                    :stroke-dashoffset="213.6 * (1 - pixProgress)"
                                    transform="rotate(-90 40 40)"
                                    style="transition: stroke-dashoffset 1s linear"
                                />
                            </svg>
                            <div class="agd-pix-time">{{ pixCountdown }}</div>
                        </div>

                        <h2 class="agd-title">Pagamento via Pix</h2>
                        <p class="agd-sub">Pague dentro do prazo para garantir seu horário.</p>

                        <div class="agd-pix-box mt-5">
                            <div class="agd-pix-label">Chave Pix</div>
                            <div class="agd-pix-chave">{{ cfg?.pix_chave }}</div>
                            <button class="agd-btn-primary mt-3" :style="{ background: pixCopiado ? '#059669' : corPrimaria }" @click="copiarPix">
                                <i :class="pixCopiado ? 'pi pi-check' : 'pi pi-copy'" class="text-sm" />
                                {{ pixCopiado ? 'Chave copiada!' : 'Copiar chave Pix' }}
                            </button>
                        </div>

                        <div class="agd-warn mt-4">
                            <i class="pi pi-info-circle" />
                            <span>Após o pagamento, seu agendamento vai para análise. Se o prazo expirar, o horário volta a ficar disponível.</span>
                        </div>

                        <button class="agd-btn-primary mt-5" style="background: linear-gradient(135deg, #059669, #10b981)" @click="irPara('sucesso')">
                            <i class="pi pi-check-circle text-sm" />
                            Já paguei — Continuar
                        </button>
                    </section>

                    <!-- ══ SUCESSO ═════════════════════════════════════════ -->
                    <section v-else-if="tela === 'sucesso'" class="agd-section">
                        <div class="agd-success-ring mx-auto mb-5" :style="{ background: corPrimaria + '15', color: corPrimaria }">
                            <i class="pi pi-check-circle text-4xl" />
                        </div>

                        <h2 class="agd-title text-center">Solicitação enviada!</h2>
                        <p class="agd-sub text-center">{{ dataLabel }} às {{ horaLabel }}</p>

                        <div class="agd-info-box mt-5">
                            <i class="pi pi-envelope text-lg" :style="{ color: corPrimaria }" />
                            <div class="agd-info-txt">
                                Enviamos um link de acesso para <strong>{{ form.email }}</strong
                                >. Use-o para acompanhar seu agendamento.
                            </div>
                        </div>

                        <template v-if="cfg?.texto_como_se_preparar">
                            <div class="agd-divider mt-5 mb-4" />
                            <div class="agd-section-label">Como se preparar</div>
                            <p class="agd-prose">{{ cfg.texto_como_se_preparar }}</p>
                        </template>

                        <template v-if="cfg?.endereco && cfg?.botao_como_chegar_ativo">
                            <div class="agd-divider mt-5 mb-4" />
                            <div class="agd-section-label">Como chegar</div>
                            <p class="agd-prose mb-3">{{ cfg.endereco }}</p>
                            <a :href="cfg?.maps_url || `https://www.google.com/maps/search/${encodeURIComponent(cfg?.endereco || '')}`" target="_blank" class="agd-btn-primary" :style="{ background: corPrimaria }">
                                <i class="pi pi-map-marker text-sm" /> Abrir no mapa
                            </a>
                        </template>

                        <div class="agd-divider mt-5 mb-4" />
                        <button class="agd-btn-outline w-full" @click="irPara('home')"><i class="pi pi-home text-sm" /> Voltar ao início</button>
                    </section>
                </div>
                <!-- /body -->
            </div>
            <!-- /card -->

            <p class="agd-footer">Powered by <strong>Agência Psi</strong></p>
        </div>
        <!-- /shell -->
    </div>
    <!-- /root -->

    <!-- ── DIALOG ENDEREÇO ───────────────────────────────────────── -->
    <Teleport to="body">
        <div v-if="enderecoDialogOpen" class="agd-overlay" @click.self="enderecoDialogOpen = false">
            <div class="agd-addr-dialog">
                <!-- Header -->
                <div class="agd-addr-header">
                    <div class="agd-addr-icon">
                        <i class="pi pi-map-marker text-lg" />
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="agd-addr-title">Onde nos encontrar</div>
                        <div class="agd-addr-nome">{{ cfg?.nome_exibicao }}</div>
                    </div>
                    <button class="agd-addr-close" @click="enderecoDialogOpen = false">
                        <i class="pi pi-times" />
                    </button>
                </div>

                <!-- Endereço completo -->
                <div class="agd-addr-body">
                    <div class="agd-addr-box">
                        <i class="pi pi-map-marker text-sm" :style="{ color: corPrimaria }" />
                        <span>{{ cfg?.endereco }}</span>
                    </div>

                    <!-- Botão Google Maps -->
                    <a :href="cfg?.maps_url || `https://www.google.com/maps/search/${encodeURIComponent(cfg?.endereco || '')}`" target="_blank" rel="noopener" class="agd-addr-maps-btn" :style="{ background: corPrimaria }">
                        <i class="pi pi-directions text-sm" />
                        Abrir no Google Maps
                    </a>

                    <!-- Nota sobre online -->
                    <div v-if="form.modalidade === 'online' || cfg?.modalidade === 'online'" class="agd-addr-online-note">
                        <i class="pi pi-video" />
                        <span>Sua sessão é <strong>online</strong>. O link de acesso será enviado por e-mail após a confirmação.</span>
                    </div>
                </div>
            </div>
        </div>
    </Teleport>
</template>

<style scoped>
/* ═══════════════════════════════════════════════════════════
   VARIÁVEIS — light (padrão) e dark
   ═══════════════════════════════════════════════════════════ */
.agd-root {
    --bg: #f0f3fb;
    --card-bg: #ffffff;
    --card-border: rgba(0, 0, 0, 0.06);
    --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06);
    --hero-bg: #f7f8fd;
    --hero-border: rgba(0, 0, 0, 0.06);
    --text-1: #111827;
    --text-2: #6b7280;
    --text-3: #9ca3af;
    --border: #e5e7eb;
    --input-bg: #fff;
    --nav-hover: #f3f4f6;
    --cal-unavail: #d1d5db;
    --slot-bg: #fff;
    --slot-hover: #f5f3ff;
    --pix-track: #e5e7eb;
    --fab-bg: #fff;
    --fab-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    --fab-color: #374151;
}

.agd-dark {
    --bg: #0f1117;
    --card-bg: #1a1d2e;
    --card-border: rgba(255, 255, 255, 0.07);
    --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.3);
    --hero-bg: #14172a;
    --hero-border: rgba(255, 255, 255, 0.06);
    --text-1: #f1f5f9;
    --text-2: #94a3b8;
    --text-3: #64748b;
    --border: #2d3247;
    --input-bg: #1e2236;
    --nav-hover: #252840;
    --cal-unavail: #3a3d55;
    --slot-bg: #1e2236;
    --slot-hover: #252840;
    --pix-track: #2d3247;
    --fab-bg: #252840;
    --fab-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    --fab-color: #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════
   ROOT / LAYOUT
   ═══════════════════════════════════════════════════════════ */
.agd-root {
    min-height: 100vh;
    background: var(--bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem 4rem;
    font-family: -apple-system, 'Inter', 'Segoe UI', sans-serif;
    transition: background 0.25s;
}

/* ── FAB tema ────────────────────────────────────────────── */
.agd-fab-tema {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--fab-bg);
    color: var(--fab-color);
    box-shadow: var(--fab-shadow);
    display: grid;
    place-items: center;
    font-size: 1rem;
    cursor: pointer;
    transition:
        background 0.2s,
        box-shadow 0.2s,
        transform 0.15s;
}
.agd-fab-tema:hover {
    transform: scale(1.08);
}

/* ── Estados centrais ────────────────────────────────────── */
.agd-estado-central {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
}

.agd-spin {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: agd-spin 0.7s linear infinite;
}
.agd-spin-txt {
    margin-top: 1rem;
    color: var(--text-3);
    font-size: 0.85rem;
}

/* ── Not Found ───────────────────────────────────────────── */
.agd-notfound {
    max-width: 340px;
    width: 100%;
    gap: 0.75rem;
}
.agd-notfound-icon {
    width: 64px;
    height: 64px;
    border-radius: 1.25rem;
    background: var(--border);
    display: grid;
    place-items: center;
    color: var(--text-3);
    margin: 0 auto 0.75rem;
}
.agd-notfound-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-1);
}
.agd-notfound-sub {
    font-size: 0.85rem;
    color: var(--text-3);
    margin-top: 4px;
}

/* ── Shell ───────────────────────────────────────────────── */
.agd-shell {
    width: 100%;
    max-width: 460px;
}

/* ── Card ────────────────────────────────────────────────── */
.agd-card {
    background: var(--card-bg);
    border-radius: 1.75rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition:
        background 0.25s,
        border-color 0.25s;
}

/* ═══════════════════════════════════════════════════════════
   HERO HEADER (inspirado em AgendaTerapeutaPage)
   ═══════════════════════════════════════════════════════════ */
.agd-hero {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.5rem 1.25rem;
    background: var(--hero-bg);
    border-bottom: 1px solid var(--hero-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* blobs decorativos */
.agd-blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.agd-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(55px);
}
.agd-blob--1 {
    width: 14rem;
    height: 14rem;
    top: -4rem;
    right: -3rem;
    background: color-mix(in srgb, var(--cp, #4b6bff) 18%, transparent);
}
.agd-blob--2 {
    width: 16rem;
    height: 16rem;
    top: 1rem;
    left: -5rem;
    background: color-mix(in srgb, #34d399 12%, transparent);
}
.agd-blob--3 {
    width: 10rem;
    height: 10rem;
    bottom: -2rem;
    right: 30%;
    background: color-mix(in srgb, #a78bfa 10%, transparent);
}

/* avatar / logo */
.agd-hero-avatar {
    position: relative;
    z-index: 1;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid var(--card-bg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    background: var(--card-bg);
    overflow: hidden;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.agd-hero-icon-fallback {
    font-size: 1.6rem;
    color: var(--text-3);
}

/* nome e endereço */
.agd-hero-info {
    position: relative;
    z-index: 1;
    text-align: center;
}
.agd-hero-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-1);
}
.agd-hero-addr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-3);
    margin-top: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
}
.agd-hero-addr:hover {
    color: var(--text-1);
}

/* ═══════════════════════════════════════════════════════════
   STEPS
   ═══════════════════════════════════════════════════════════ */
.agd-steps-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 0 6px;
}
.agd-steps-spacer {
    height: 14px;
}
.agd-step-pill {
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    width: 24px;
    transition: all 0.3s ease;
}
.agd-step-pill--done {
    width: 28px;
}
.agd-step-pill--cur {
    width: 40px;
}

/* ═══════════════════════════════════════════════════════════
   BODY / SECTIONS
   ═══════════════════════════════════════════════════════════ */
.agd-section {
    padding: 1.25rem 1.5rem 1.75rem;
}

/* ── Tipografia ──────────────────────────────────────────── */
.agd-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.agd-sub {
    font-size: 0.82rem;
    color: var(--text-3);
}
.agd-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.agd-section-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.agd-prose {
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.6;
    white-space: pre-line;
}
.agd-optional {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-3);
}

/* ── HOME ────────────────────────────────────────────────── */
.agd-welcome-msg {
    font-size: 0.88rem;
    color: var(--text-2);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.agd-link-mapa {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
.agd-link-mapa:hover {
    opacity: 0.75;
}

/* botões tipo */
.agd-tipo-btn {
    width: 100%;
    padding: 14px 16px;
    border-radius: 1rem;
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        transform 0.12s;
    text-align: left;
}
.agd-tipo-btn:hover {
    border-color: var(--btn-bg, #6366f1);
    box-shadow: 0 4px 16px var(--btn-shadow, rgba(99, 102, 241, 0.2));
    transform: translateY(-1px);
}
.agd-tipo-btn:active {
    transform: scale(0.99);
}
.agd-tipo-icon {
    width: 38px;
    height: 38px;
    border-radius: 0.75rem;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--btn-bg, #6366f1) 15%, transparent);
    color: var(--btn-bg, #6366f1);
    flex-shrink: 0;
}
.agd-tipo-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.agd-tipo-main {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-1);
}
.agd-tipo-sub {
    font-size: 0.75rem;
    color: var(--text-3);
}

.agd-powered {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-3);
    margin-top: 2rem;
}
.agd-powered strong {
    color: var(--text-2);
    font-weight: 700;
}

/* ── MODALIDADE ──────────────────────────────────────────── */
.agd-modal-wrap {
    margin-bottom: 0.25rem;
}
.agd-modal-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 10px;
}
.agd-modal-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.agd-modal-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border-radius: 1rem;
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text-2);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.agd-modal-btn:hover {
    border-color: var(--text-2);
}
.agd-modal-btn--sel {
    font-weight: 700;
}

/* ── DIVIDER ─────────────────────────────────────────────── */
.agd-divider {
    height: 1px;
    background: var(--border);
    margin: 1rem 0;
}

/* ── FIELDS / INPUTS ─────────────────────────────────────── */
.agd-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.agd-field {
    position: relative;
}
.agd-label {
    position: absolute;
    top: -9px;
    left: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-2);
    background: var(--input-bg);
    padding: 0 4px;
    pointer-events: none;
    transition: background 0.25s;
}
.agd-input {
    width: 100%;
    padding: 13px 14px;
    border: 1.5px solid var(--border);
    border-radius: 0.875rem;
    font-size: 0.92rem;
    color: var(--text-1);
    background: var(--input-bg);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        background 0.25s,
        color 0.25s;
}
.agd-input::placeholder {
    color: var(--text-3);
}
.agd-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.agd-input--err {
    border-color: #ef4444;
}
.agd-textarea {
    resize: none;
    font-family: inherit;
}
.agd-select {
    cursor: pointer;
}
.agd-err {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 600;
    margin-top: 4px;
}
.agd-err-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.875rem;
    padding: 12px 14px;
    font-size: 0.82rem;
    color: #b91c1c;
    font-weight: 600;
}

/* ── CALENDÁRIO ──────────────────────────────────────────── */
.agd-cal {
    border: 1.5px solid var(--border);
    border-radius: 1rem;
    overflow: hidden;
}
.agd-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--hero-bg);
    border-bottom: 1px solid var(--border);
}
.agd-cal-month {
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--text-1);
}
.agd-cal-nav-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--text-2);
    font-size: 0.85rem;
    transition: background 0.15s;
}
.agd-cal-nav-btn:hover:not(:disabled) {
    background: var(--nav-hover);
}
.agd-cal-nav-btn:disabled {
    opacity: 0.25;
    cursor: default;
}

.agd-cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 6px 8px 2px;
}
.agd-cal-week span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-3);
    padding: 4px 0;
}

.agd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 4px 8px 8px;
}
.agd-cal-skel {
    height: 32px;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, var(--border) 25%, var(--nav-hover) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: agd-shimmer 1.2s infinite;
}
.agd-cal-day {
    width: 100%;
    aspect-ratio: 1;
    border: 1.5px solid transparent;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--text-2);
}
.agd-cal-day--avail {
    color: var(--text-1);
}
.agd-cal-day--avail:hover {
    background: var(--nav-hover);
    border-color: var(--border);
}
.agd-cal-day--sel {
    color: #fff !important;
}
.agd-cal-day--unavail {
    color: var(--cal-unavail);
    cursor: default;
}
.agd-cal-day--hoje {
    font-weight: 900;
    box-shadow: 0 0 0 2px currentColor inset;
}

/* ── SLOTS ───────────────────────────────────────────────── */
.agd-slots {
    border: 1.5px solid var(--border);
    border-radius: 1rem;
    padding: 14px;
}
.agd-slots-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-1);
    margin-bottom: 12px;
}
.agd-slot-group {
    margin-bottom: 12px;
}
.agd-slot-period {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.agd-chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--slot-bg);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-1);
    cursor: pointer;
    transition: all 0.15s;
}
.agd-chip:hover {
    border-color: #6366f1;
    background: var(--slot-hover);
}
.agd-chip--sel {
    color: #fff !important;
}
.agd-slot-skel {
    width: 60px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--border) 25%, var(--nav-hover) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: agd-shimmer 1.2s infinite;
}
.agd-slots-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    color: var(--text-3);
    font-size: 0.82rem;
    text-align: center;
}
.agd-slots-hint {
    text-align: center;
    color: var(--text-3);
    font-size: 0.82rem;
    padding: 16px;
    border: 1.5px dashed var(--border);
    border-radius: 1rem;
}

/* ── CHECKOUT ────────────────────────────────────────────── */
.agd-resumo {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid;
    border-radius: 1rem;
    padding: 12px 16px;
}
.agd-resumo-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.75rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.agd-resumo-info {
    flex: 1;
    min-width: 0;
}
.agd-resumo-data {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-1);
}
.agd-resumo-hora {
    font-size: 0.75rem;
    color: var(--text-2);
    margin-top: 2px;
}
.agd-resumo-edit {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s;
}
.agd-resumo-edit:hover {
    background: rgba(0, 0, 0, 0.06);
}

.agd-lgpd {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1.5px solid var(--border);
    border-radius: 0.875rem;
    padding: 12px;
    cursor: pointer;
}
.agd-check {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #6366f1;
    flex-shrink: 0;
    margin-top: 2px;
}
.agd-lgpd-txt {
    font-size: 0.8rem;
    color: var(--text-2);
    line-height: 1.5;
}

/* ── PIX ─────────────────────────────────────────────────── */
.agd-pix-ring {
    position: relative;
    width: 88px;
    height: 88px;
}
.agd-pix-track {
    color: var(--pix-track);
}
.agd-pix-time {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--text-1);
}
.agd-pix-box {
    background: var(--hero-bg);
    border: 1.5px solid var(--border);
    border-radius: 1rem;
    padding: 16px;
    text-align: center;
}
.agd-pix-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.agd-pix-chave {
    font-family: monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-1);
    word-break: break-all;
}

.agd-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.875rem;
    padding: 12px;
    font-size: 0.78rem;
    color: #92400e;
}
.agd-dark .agd-warn {
    background: #2d2000;
    border-color: #5c4000;
    color: #fbbf24;
}

/* ── SUCESSO ─────────────────────────────────────────────── */
.agd-success-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.agd-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.875rem;
    padding: 14px;
}
.agd-dark .agd-info-box {
    background: #0c1a2e;
    border-color: #0e3a5c;
}
.agd-info-txt {
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.5;
}
.agd-info-txt strong {
    color: var(--text-1);
}

/* ── ACTIONS ─────────────────────────────────────────────── */
.agd-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 1.25rem;
}

.agd-btn-primary {
    width: 100%;
    padding: 13px;
    border-radius: 0.875rem;
    border: none;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition:
        opacity 0.15s,
        transform 0.12s;
}
.agd-btn-primary:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}
.agd-btn-primary:active:not(:disabled) {
    transform: scale(0.99);
}
.agd-btn-primary:disabled {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

.agd-btn-ghost {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-3);
    cursor: pointer;
    padding: 8px;
    border-radius: 0.5rem;
    transition: color 0.15s;
}
.agd-btn-ghost:hover {
    color: var(--text-1);
}

.agd-btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border-radius: 0.875rem;
    border: 1.5px solid var(--border);
    background: transparent;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-1);
    cursor: pointer;
    transition: background 0.15s;
}
.agd-btn-outline:hover {
    background: var(--nav-hover);
}

/* ── SPINNER ─────────────────────────────────────────────── */
.agd-spin-sm {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: agd-spin 0.7s linear infinite;
    flex-shrink: 0;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.agd-footer {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-3);
    margin-top: 1.25rem;
}
.agd-footer strong {
    color: var(--text-2);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   ANIMAÇÕES
   ═══════════════════════════════════════════════════════════ */
@keyframes agd-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes agd-shimmer {
    to {
        background-position: -200% 0;
    }
}
@keyframes agd-slide-up {
    from {
        transform: translateY(24px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ── NOME READONLY ───────────────────────────────────────── */
.agd-nome-readonly {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border: 1.5px solid var(--border);
    border-radius: 0.875rem;
    background: var(--hero-bg);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-1);
}
.agd-nome-edit {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    padding: 4px;
    border-radius: 0.5rem;
    transition: color 0.15s;
}
.agd-nome-edit:hover {
    color: var(--text-1);
}

/* ── EMAIL AVISO ─────────────────────────────────────────── */
.agd-email-aviso {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.875rem;
    padding: 10px 13px;
    font-size: 0.78rem;
    color: #92400e;
}
.agd-dark .agd-email-aviso {
    background: #2d2000;
    border-color: #5c4000;
    color: #fbbf24;
}

/* ── ENDEREÇO DIALOG (bottom-sheet) ─────────────────────── */
.agd-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
}
.agd-addr-dialog {
    background: #fff;
    border-radius: 1.5rem 1.5rem 1rem 1rem;
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    animation: agd-slide-up 0.22s ease;
}
.agd-dark .agd-addr-dialog {
    background: #1e1e2e;
}
.agd-addr-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
}
.agd-addr-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-1);
}
.agd-addr-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-3);
    padding: 4px;
    border-radius: 0.5rem;
    transition: color 0.15s;
    margin-left: auto;
}
.agd-addr-close:hover {
    color: var(--text-1);
}
.agd-addr-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hero-bg);
    display: grid;
    place-items: center;
    color: var(--text-2);
    flex-shrink: 0;
}
.agd-addr-nome {
    font-size: 0.78rem;
    color: var(--text-3);
    margin-top: 2px;
}
.agd-addr-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.agd-addr-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-2);
    line-height: 1.5;
}
.agd-addr-maps-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 0.875rem;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.agd-addr-maps-btn:hover {
    opacity: 0.9;
}
.agd-addr-online-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 0.875rem;
    padding: 10px 13px;
    font-size: 0.78rem;
    color: #0369a1;
}
.agd-dark .agd-addr-online-note {
    background: #0c1a2e;
    border-color: #0e3a5c;
    color: #7dd3fc;
}
</style>
