From 67482f6629c7e7b73be1eff55bdac1a4ded1e131 Mon Sep 17 00:00:00 2001
From: Jordan Weingarten <jordanweingarten@Jordans-MacBook-Air.local>
Date: Thu, 16 Apr 2026 11:11:44 -0500
Subject: [PATCH] WIP jordan

---
 .claude/launch.json                           |   11 +
 .claude/start-dev.sh                          |    4 +
 app.config.ts                                 |  167 +
 app/assets/css/main.css                       |  554 +++
 app/components/AppBackToHome.vue              |    7 +
 .../account/AccountThemeSection.vue           |  129 +
 app/components/home/DashboardWidgetBlocks.vue |   55 +
 app/components/layout/AppCommandSearch.vue    |  439 +++
 app/components/layout/AppTopBar.vue           |  339 ++
 .../quotes/QuoteComparativeLayout.vue         |  168 +
 app/components/quotes/auto/AcceptanceStep.vue |  121 +
 .../quotes/auto/CustomerVehicleStep.vue       |  154 +
 app/components/quotes/auto/SetupStep.vue      |   97 +
 .../quotes/auto/SolicitQuotesStep.vue         |   97 +
 .../quotes/health/AcceptanceStep.vue          |  127 +
 app/components/quotes/health/SetupStep.vue    |  250 ++
 .../quotes/health/SolicitQuotesStep.vue       |   90 +
 app/components/quotes/life/AcceptanceStep.vue |  149 +
 app/components/quotes/life/SetupStep.vue      |  233 ++
 .../quotes/life/SolicitQuotesStep.vue         |   90 +
 app/components/sales/SalesFlowIndicator.vue   |  171 +
 app/components/sales/SalesPipelineBar.vue     |  447 +++
 app/composables/useAlertConfig.ts             |  176 +
 app/composables/useAnalytics.ts               |  147 +
 app/composables/useAppShellLayout.ts          |   32 +
 app/composables/useAppTheme.ts                |   46 +
 app/composables/useAutoQuoteDraft.ts          |   30 +
 app/composables/useBrokerageBranding.ts       |   31 +
 app/composables/useClientFavorites.ts         |   35 +
 app/composables/useClientRegistrationModel.ts |   47 +
 app/composables/useColectivos.ts              |  641 ++++
 app/composables/useCustomerAttention.ts       |  228 ++
 app/composables/useCustomerProfileVault.ts    |   18 +
 app/composables/useDashboardHomeWidgets.ts    |  273 ++
 app/composables/useEmissionsQueue.ts          |   52 +
 app/composables/useFormsCatalog.ts            |  174 +
 app/composables/useHealthQuoteDraft.ts        |   33 +
 app/composables/useLifeQuoteDraft.ts          |   36 +
 app/composables/usePageTitle.ts               |    6 +
 app/composables/usePdfFieldMappings.ts        |   12 +
 app/composables/usePolicyRegistrationModel.ts |   88 +
 app/composables/useProfileLayouts.ts          |  205 +
 app/composables/useProviderContactEmails.ts   |   26 +
 app/composables/useQuickLeads.ts              |   46 +
 .../useQuoteRequestEmailEnabled.ts            |   37 +
 app/composables/useQuoteSession.ts            |   77 +
 app/composables/useReferralChannels.ts        |   67 +
 app/composables/useSalesPipeline.ts           |  316 ++
 app/composables/useSidebarFeatures.ts         |   23 +
 app/composables/useSuperAdmin.ts              |   21 +
 app/composables/useSupportTickets.ts          |  184 +
 app/composables/useWelcomeDashboard.ts        |   25 +
 app/data/auto-quote-intake.ts                 |   70 +
 app/data/form-field-groups.json               |   41 +
 app/data/forms-catalog.json                   |  116 +
 app/data/health-quote-intake.ts               |   53 +
 app/data/life-quote-intake.ts                 |   45 +
 app/data/mock-analytics.ts                    |  363 ++
 app/data/mock-claims.ts                       |  550 +++
 app/data/mock-customers.ts                    |  461 +++
 app/data/mock-renewals.ts                     |  660 ++++
 app/data/mock-support.ts                      |  699 ++++
 app/data/pdf-field-mappings.json              |   20 +
 app/data/quotes-overview.mock.ts              |  214 ++
 app/data/roles-seguros.ts                     |   35 +
 app/data/taxonomy.ts                          |   34 +
 app/layouts/default.vue                       |  435 ++-
 app/pages/account/index.vue                   |   88 +
 app/pages/ai-tools/case-assistant.vue         |   18 +
 app/pages/ai-tools/email-writer.vue           |   18 +
 app/pages/ai-tools/policy-comparator.vue      |   18 +
 app/pages/ai-tools/sales-factory.vue          |  158 +
 app/pages/analysis/index.vue                  |  459 +++
 app/pages/calendar.vue                        | 1514 ++++++++
 app/pages/claims/[id].vue                     | 1198 ++++++
 app/pages/claims/index.vue                    |  506 +++
 app/pages/claims/intake/[token].vue           |  672 ++++
 app/pages/claims/settings.vue                 |  416 ++
 app/pages/collections/index.vue               | 2724 +++++++++++++
 app/pages/customers/[id].vue                  | 2406 +++++++++++-
 app/pages/customers/index.vue                 |  400 +-
 app/pages/customers/new.vue                   |  283 +-
 app/pages/home2.vue                           |  777 ++++
 app/pages/index.vue                           | 3364 ++++++++++++++++-
 app/pages/onboarding/active-leads/new.vue     |   14 +
 app/pages/onboarding/emissions/index.vue      |  364 ++
 app/pages/onboarding/index.vue                |  251 ++
 app/pages/onboarding/policy-upload/new.vue    |  727 ++++
 app/pages/onboarding/potential-leads/new.vue  |   14 +
 app/pages/onboarding/solicitud.vue            |  311 ++
 app/pages/policies/[id].vue                   | 1769 +++++++++
 .../policies/{ => app}/[application_id].vue   |   22 +-
 app/pages/policies/book.vue                   |  836 ++++
 app/pages/policies/groups/index.vue           |  965 +++++
 app/pages/policies/index.vue                  | 1370 ++++++-
 app/pages/policies/new.vue                    |   28 +-
 app/pages/providers/[provider_id].vue         |   30 +-
 app/pages/providers/index.vue                 |    6 +-
 app/pages/providers/new.vue                   |    6 +-
 app/pages/quotes/auto/index.vue               |  291 ++
 app/pages/quotes/compare.vue                  | 1001 +++++
 app/pages/quotes/custom/index.vue             |  169 +
 app/pages/quotes/general-risk/index.vue       |  321 ++
 app/pages/quotes/health/index.vue             |  311 ++
 app/pages/quotes/index.vue                    | 1267 +++++++
 app/pages/quotes/life/index.vue               |  311 ++
 app/pages/quotes/mission-control.vue          |  662 ++++
 app/pages/quotes/new.vue                      |  994 +++++
 app/pages/registration/client.vue             |  417 ++
 app/pages/registration/policy.vue             |  234 ++
 app/pages/renewals/[id].vue                   |  837 ++++
 app/pages/renewals/index.vue                  |  499 +++
 app/pages/sales/leads/index.vue               |  770 ++++
 app/pages/sales/quick-lead.vue                |  519 +++
 app/pages/settings/agents.vue                 | 1036 +++++
 app/pages/settings/alerts.vue                 |  616 +++
 app/pages/settings/appearance.vue             |    7 +
 app/pages/settings/customer-attention.vue     |  369 ++
 app/pages/settings/forms/index.vue            |  255 ++
 app/pages/settings/index.vue                  |  179 +
 app/pages/settings/organization.vue           |  178 +
 app/pages/settings/permissions.vue            |  233 ++
 app/pages/settings/personalization.vue        |    7 +
 app/pages/settings/profile-layouts.vue        |  391 ++
 app/pages/settings/providers.vue              |   73 +
 app/pages/settings/quote-requests.vue         |   42 +
 app/pages/settings/referral-channels.vue      |  431 +++
 app/pages/settings/support-routing.vue        |  231 ++
 app/pages/support/[id].vue                    |  752 ++++
 app/pages/support/collectivos/[id].vue        | 2321 ++++++++++++
 app/pages/support/collectivos/index.vue       | 1211 ++++++
 app/pages/support/index.vue                   |  436 +++
 app/pages/tasks/[id].vue                      |   20 +-
 app/pages/tasks/index.vue                     |    6 +-
 app/pages/workstation/claims.vue              |   18 +
 app/pages/workstation/collections.vue         |   18 +
 app/pages/workstation/collectivos.vue         |  329 ++
 app/pages/workstation/customer-service.vue    |   18 +
 app/pages/workstation/facturacion.vue         |  114 +
 app/pages/workstation/renewals.vue            |   18 +
 app/plugins/open-fetch-policy-auth.ts         |   20 +
 app/plugins/theme-hydrate.client.ts           |   11 +
 app/types/app-theme.ts                        |   14 +
 app/types/auto-quote-intake.ts                |   46 +
 app/types/branding.ts                         |   10 +
 app/types/brokerage-registration.ts           |   69 +
 app/types/customer-profile.ts                 |   55 +
 app/types/form-catalog.ts                     |   40 +
 app/types/form-field-groups.ts                |   11 +
 app/types/health-quote-intake.ts              |   40 +
 app/types/life-quote-intake.ts                |   42 +
 app/types/pdf-field-mapping.ts                |    9 +
 app/types/provider-contacts.ts                |   58 +
 app/types/quote-view-model.ts                 |   48 +
 app/types/roles.ts                            |   15 +
 app/types/welcome-dashboard.ts                |   38 +
 app/utils/refDebounced.ts                     |   18 +
 app/utils/useLocalStorageRef.ts               |   40 +
 docs/CODEBASE_BUNDLE.md                       |  155 +
 nuxt.config.ts                                |   36 +-
 openapi/stub.json                             |   47 +
 public/forms/README.txt                       |    1 +
 scripts/import-forms.mjs                      |   61 +
 163 files changed, 50627 insertions(+), 728 deletions(-)
 create mode 100644 .claude/launch.json
 create mode 100755 .claude/start-dev.sh
 create mode 100644 app.config.ts
 create mode 100644 app/components/AppBackToHome.vue
 create mode 100644 app/components/account/AccountThemeSection.vue
 create mode 100644 app/components/home/DashboardWidgetBlocks.vue
 create mode 100644 app/components/layout/AppCommandSearch.vue
 create mode 100644 app/components/layout/AppTopBar.vue
 create mode 100644 app/components/quotes/QuoteComparativeLayout.vue
 create mode 100644 app/components/quotes/auto/AcceptanceStep.vue
 create mode 100644 app/components/quotes/auto/CustomerVehicleStep.vue
 create mode 100644 app/components/quotes/auto/SetupStep.vue
 create mode 100644 app/components/quotes/auto/SolicitQuotesStep.vue
 create mode 100644 app/components/quotes/health/AcceptanceStep.vue
 create mode 100644 app/components/quotes/health/SetupStep.vue
 create mode 100644 app/components/quotes/health/SolicitQuotesStep.vue
 create mode 100644 app/components/quotes/life/AcceptanceStep.vue
 create mode 100644 app/components/quotes/life/SetupStep.vue
 create mode 100644 app/components/quotes/life/SolicitQuotesStep.vue
 create mode 100644 app/components/sales/SalesFlowIndicator.vue
 create mode 100644 app/components/sales/SalesPipelineBar.vue
 create mode 100644 app/composables/useAlertConfig.ts
 create mode 100644 app/composables/useAnalytics.ts
 create mode 100644 app/composables/useAppShellLayout.ts
 create mode 100644 app/composables/useAppTheme.ts
 create mode 100644 app/composables/useAutoQuoteDraft.ts
 create mode 100644 app/composables/useBrokerageBranding.ts
 create mode 100644 app/composables/useClientFavorites.ts
 create mode 100644 app/composables/useClientRegistrationModel.ts
 create mode 100644 app/composables/useColectivos.ts
 create mode 100644 app/composables/useCustomerAttention.ts
 create mode 100644 app/composables/useCustomerProfileVault.ts
 create mode 100644 app/composables/useDashboardHomeWidgets.ts
 create mode 100644 app/composables/useEmissionsQueue.ts
 create mode 100644 app/composables/useFormsCatalog.ts
 create mode 100644 app/composables/useHealthQuoteDraft.ts
 create mode 100644 app/composables/useLifeQuoteDraft.ts
 create mode 100644 app/composables/usePageTitle.ts
 create mode 100644 app/composables/usePdfFieldMappings.ts
 create mode 100644 app/composables/usePolicyRegistrationModel.ts
 create mode 100644 app/composables/useProfileLayouts.ts
 create mode 100644 app/composables/useProviderContactEmails.ts
 create mode 100644 app/composables/useQuickLeads.ts
 create mode 100644 app/composables/useQuoteRequestEmailEnabled.ts
 create mode 100644 app/composables/useQuoteSession.ts
 create mode 100644 app/composables/useReferralChannels.ts
 create mode 100644 app/composables/useSalesPipeline.ts
 create mode 100644 app/composables/useSidebarFeatures.ts
 create mode 100644 app/composables/useSuperAdmin.ts
 create mode 100644 app/composables/useSupportTickets.ts
 create mode 100644 app/composables/useWelcomeDashboard.ts
 create mode 100644 app/data/auto-quote-intake.ts
 create mode 100644 app/data/form-field-groups.json
 create mode 100644 app/data/forms-catalog.json
 create mode 100644 app/data/health-quote-intake.ts
 create mode 100644 app/data/life-quote-intake.ts
 create mode 100644 app/data/mock-analytics.ts
 create mode 100644 app/data/mock-claims.ts
 create mode 100644 app/data/mock-customers.ts
 create mode 100644 app/data/mock-renewals.ts
 create mode 100644 app/data/mock-support.ts
 create mode 100644 app/data/pdf-field-mappings.json
 create mode 100644 app/data/quotes-overview.mock.ts
 create mode 100644 app/data/roles-seguros.ts
 create mode 100644 app/data/taxonomy.ts
 create mode 100644 app/pages/account/index.vue
 create mode 100644 app/pages/ai-tools/case-assistant.vue
 create mode 100644 app/pages/ai-tools/email-writer.vue
 create mode 100644 app/pages/ai-tools/policy-comparator.vue
 create mode 100644 app/pages/ai-tools/sales-factory.vue
 create mode 100644 app/pages/analysis/index.vue
 create mode 100644 app/pages/calendar.vue
 create mode 100644 app/pages/claims/[id].vue
 create mode 100644 app/pages/claims/index.vue
 create mode 100644 app/pages/claims/intake/[token].vue
 create mode 100644 app/pages/claims/settings.vue
 create mode 100644 app/pages/collections/index.vue
 create mode 100644 app/pages/home2.vue
 create mode 100644 app/pages/onboarding/active-leads/new.vue
 create mode 100644 app/pages/onboarding/emissions/index.vue
 create mode 100644 app/pages/onboarding/index.vue
 create mode 100644 app/pages/onboarding/policy-upload/new.vue
 create mode 100644 app/pages/onboarding/potential-leads/new.vue
 create mode 100644 app/pages/onboarding/solicitud.vue
 create mode 100644 app/pages/policies/[id].vue
 rename app/pages/policies/{ => app}/[application_id].vue (95%)
 create mode 100644 app/pages/policies/book.vue
 create mode 100644 app/pages/policies/groups/index.vue
 create mode 100644 app/pages/quotes/auto/index.vue
 create mode 100644 app/pages/quotes/compare.vue
 create mode 100644 app/pages/quotes/custom/index.vue
 create mode 100644 app/pages/quotes/general-risk/index.vue
 create mode 100644 app/pages/quotes/health/index.vue
 create mode 100644 app/pages/quotes/index.vue
 create mode 100644 app/pages/quotes/life/index.vue
 create mode 100644 app/pages/quotes/mission-control.vue
 create mode 100644 app/pages/quotes/new.vue
 create mode 100644 app/pages/registration/client.vue
 create mode 100644 app/pages/registration/policy.vue
 create mode 100644 app/pages/renewals/[id].vue
 create mode 100644 app/pages/renewals/index.vue
 create mode 100644 app/pages/sales/leads/index.vue
 create mode 100644 app/pages/sales/quick-lead.vue
 create mode 100644 app/pages/settings/agents.vue
 create mode 100644 app/pages/settings/alerts.vue
 create mode 100644 app/pages/settings/appearance.vue
 create mode 100644 app/pages/settings/customer-attention.vue
 create mode 100644 app/pages/settings/forms/index.vue
 create mode 100644 app/pages/settings/index.vue
 create mode 100644 app/pages/settings/organization.vue
 create mode 100644 app/pages/settings/permissions.vue
 create mode 100644 app/pages/settings/personalization.vue
 create mode 100644 app/pages/settings/profile-layouts.vue
 create mode 100644 app/pages/settings/providers.vue
 create mode 100644 app/pages/settings/quote-requests.vue
 create mode 100644 app/pages/settings/referral-channels.vue
 create mode 100644 app/pages/settings/support-routing.vue
 create mode 100644 app/pages/support/[id].vue
 create mode 100644 app/pages/support/collectivos/[id].vue
 create mode 100644 app/pages/support/collectivos/index.vue
 create mode 100644 app/pages/support/index.vue
 create mode 100644 app/pages/workstation/claims.vue
 create mode 100644 app/pages/workstation/collections.vue
 create mode 100644 app/pages/workstation/collectivos.vue
 create mode 100644 app/pages/workstation/customer-service.vue
 create mode 100644 app/pages/workstation/facturacion.vue
 create mode 100644 app/pages/workstation/renewals.vue
 create mode 100644 app/plugins/open-fetch-policy-auth.ts
 create mode 100644 app/plugins/theme-hydrate.client.ts
 create mode 100644 app/types/app-theme.ts
 create mode 100644 app/types/auto-quote-intake.ts
 create mode 100644 app/types/branding.ts
 create mode 100644 app/types/brokerage-registration.ts
 create mode 100644 app/types/customer-profile.ts
 create mode 100644 app/types/form-catalog.ts
 create mode 100644 app/types/form-field-groups.ts
 create mode 100644 app/types/health-quote-intake.ts
 create mode 100644 app/types/life-quote-intake.ts
 create mode 100644 app/types/pdf-field-mapping.ts
 create mode 100644 app/types/provider-contacts.ts
 create mode 100644 app/types/quote-view-model.ts
 create mode 100644 app/types/roles.ts
 create mode 100644 app/types/welcome-dashboard.ts
 create mode 100644 app/utils/refDebounced.ts
 create mode 100644 app/utils/useLocalStorageRef.ts
 create mode 100644 docs/CODEBASE_BUNDLE.md
 create mode 100644 openapi/stub.json
 create mode 100644 public/forms/README.txt
 create mode 100644 scripts/import-forms.mjs

diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 0000000..71e6239
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "policy-ui",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3737
+    }
+  ]
+}
diff --git a/.claude/start-dev.sh b/.claude/start-dev.sh
new file mode 100755
index 0000000..0bb65cd
--- /dev/null
+++ b/.claude/start-dev.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+export PATH="/nix/store/cx0jd5mwhn7ihryyv0qp9d33f8s1iwb7-nodejs-24.13.0/bin:$PATH"
+cd /Users/jordanweingarten/Dev/policy-ui
+exec npm run dev
diff --git a/app.config.ts b/app.config.ts
new file mode 100644
index 0000000..1dc4ae8
--- /dev/null
+++ b/app.config.ts
@@ -0,0 +1,167 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'primary',
+      neutral: 'stone'
+    }
+  },
+
+  welcomeDashboard: {
+    greetingName: 'User',
+    productName: 'Segur-OS Beta',
+    subtitle:
+      'Orientation for today — pipeline health, receivables, and what needs attention before close of business.',
+
+    dailyTasks: [
+      { id: 't1', title: 'Review carrier responses in General Support queue', emphasis: true },
+      { id: 't2', title: 'Follow up on 3 quotes pending bind' },
+      { id: 't3', title: 'Approve 2 manual policy uploads from onboarding' },
+      { id: 't4', title: 'Check renewal diary for policies expiring in 60 days' }
+    ],
+
+    alerts: [
+      {
+        id: 'a1',
+        message: '2 policies in renewal window need repricing approval.',
+        tone: 'warning'
+      },
+      {
+        id: 'a2',
+        message: 'Carrier X API credential expires in 14 days — rotate in Settings.',
+        tone: 'info'
+      },
+      {
+        id: 'a3',
+        message: 'Collections: 4 accounts over 60 days past due.',
+        tone: 'error'
+      }
+    ],
+
+    performanceKpis: [
+      {
+        id: 'ms',
+        label: 'New business (MTD)',
+        value: '42 policies',
+        hint: 'Bound this month',
+        change: '+6 vs prior month',
+        changeTone: 'positive'
+      },
+      {
+        id: 'mr',
+        label: 'Premium written (MTD)',
+        value: '$1.24M',
+        hint: 'GWP recognized',
+        change: '+4.2% vs prior month',
+        changeTone: 'positive'
+      },
+      {
+        id: 'ren',
+        label: 'Renewals in flight',
+        value: '128',
+        hint: 'Quoted, not yet bound',
+        change: '18 due ≤30d',
+        changeTone: 'neutral'
+      },
+      {
+        id: 'late',
+        label: 'AR >30 days',
+        value: '$186K',
+        hint: 'Outstanding receivables',
+        change: '−$12K vs last week',
+        changeTone: 'positive'
+      }
+    ],
+
+    ceoKpis: [
+      {
+        id: 'gwp',
+        label: 'GWP (YTD)',
+        value: '$14.8M',
+        hint: 'Gross written premium',
+        change: 'On plan',
+        changeTone: 'neutral'
+      },
+      {
+        id: 'if',
+        label: 'Policies in force',
+        value: '3,842',
+        hint: 'Active policies',
+        change: '+2.1% YoY',
+        changeTone: 'positive'
+      },
+      {
+        id: 'lr',
+        label: 'Loss ratio',
+        value: '58.4%',
+        hint: 'Trailing 12 months',
+        change: 'Within appetite',
+        changeTone: 'neutral'
+      },
+      {
+        id: 'pipe',
+        label: 'Quoted pipeline',
+        value: '$2.06M',
+        hint: 'Not yet bound',
+        change: 'Weighted ~$1.1M',
+        changeTone: 'neutral'
+      }
+    ],
+
+    quickLinks: [
+      {
+        label: 'Quotes',
+        to: '/quotes',
+        icon: 'i-heroicons-chart-bar-square',
+        description: 'Auto, health, life, general risk & custom — comparative and single-quote entry points.'
+      },
+      {
+        label: 'Sales',
+        to: '/onboarding',
+        icon: 'i-heroicons-clipboard-document-list',
+        description: 'Pipeline — leads, quotes, solicitudes, emissions, uploads.'
+      },
+      {
+        label: 'Customers',
+        to: '/customers',
+        icon: 'i-heroicons-users',
+        description: 'CRM — relationships and household / corporate profiles.'
+      },
+      {
+        label: 'Policies',
+        to: '/policies',
+        icon: 'i-heroicons-rectangle-stack',
+        description: 'Cartera — applications, quotes received, and bound policies.'
+      },
+      {
+        label: 'Settings',
+        to: '/settings',
+        icon: 'i-heroicons-cog-6-tooth',
+        description: 'Branding, providers & carriers, permissions, forms catalog, and workspace setup.'
+      },
+      {
+        label: 'Support inbox',
+        to: '/support',
+        icon: 'i-heroicons-chat-bubble-left-right',
+        description: 'Carrier inbox — quotes, solicitations, and follow-ups.'
+      },
+      {
+        label: 'Claims',
+        to: '/claims',
+        icon: 'i-heroicons-exclamation-triangle',
+        description: 'Losses and filings — tie to policies and carriers.'
+      },
+      {
+        label: 'Collections',
+        to: '/collections',
+        icon: 'i-heroicons-banknotes',
+        description: 'Receivables and recovery workflows.'
+      },
+      {
+        label: 'Renewals',
+        to: '/renewals',
+        icon: 'i-heroicons-arrow-path',
+        description: 'Expiry diary and retention campaigns.'
+      }
+    ]
+  }
+})
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 7c95c6f..b4691e8 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1,2 +1,556 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+/* ── Nuxt UI primary color — teal ───────────────────────────────────────── */
+@theme {
+  --color-primary-50:  #eefbfb;
+  --color-primary-100: #d4f3f4;
+  --color-primary-200: #a8e7e9;
+  --color-primary-300: #6dd5d8;
+  --color-primary-400: #33bdc2;
+  --color-primary-500: #019fa6;
+  --color-primary-600: #018388;
+  --color-primary-700: #01696f;
+  --color-primary-800: #015358;
+  --color-primary-900: #014044;
+  --color-primary-950: #002a2d;
+  /* Hijack green so Nuxt UI var(--color-green-*, fallback) resolves here */
+  --color-green-50:  #eefbfb;
+  --color-green-100: #d4f3f4;
+  --color-green-200: #a8e7e9;
+  --color-green-300: #6dd5d8;
+  --color-green-400: #33bdc2;
+  --color-green-500: #019fa6;
+  --color-green-600: #018388;
+  --color-green-700: #01696f;
+  --color-green-800: #015358;
+  --color-green-900: #014044;
+  --color-green-950: #002a2d;
+}
+:root, :host {
+  --ui-color-primary-50:  #eefbfb !important;
+  --ui-color-primary-100: #d4f3f4 !important;
+  --ui-color-primary-200: #a8e7e9 !important;
+  --ui-color-primary-300: #6dd5d8 !important;
+  --ui-color-primary-400: #33bdc2 !important;
+  --ui-color-primary-500: #019fa6 !important;
+  --ui-color-primary-600: #018388 !important;
+  --ui-color-primary-700: #01696f !important;
+  --ui-color-primary-800: #015358 !important;
+  --ui-color-primary-900: #014044 !important;
+  --ui-color-primary-950: #002a2d !important;
+  --ui-color-neutral-50:  #f8f7f4 !important;
+  --ui-color-neutral-100: #f5f3ef !important;
+  --ui-color-neutral-200: #e8e6e2 !important;
+  --ui-color-neutral-300: #d0d0cc !important;
+  --ui-color-neutral-400: #a0a09c !important;
+  --ui-color-neutral-500: #8a8a86 !important;
+  --ui-color-neutral-600: #6b6b68 !important;
+  --ui-color-neutral-700: #4a4a48 !important;
+  --ui-color-neutral-800: #2e2e2c !important;
+  --ui-color-neutral-900: #1a1a18 !important;
+  --ui-color-neutral-950: #0f0f0e !important;
+}
+
+/* ── Override Tailwind/Nuxt UI default ring color ────────────────────────── */
+:root {
+  --tw-ring-color: var(--brand, #0d5c63) !important;
+}
+
+/* ── Design tokens (normalized app chrome) ───────────────────────────────── */
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+  --page-bg: #f8f7f4;
+  --surface: #ffffff;
+  --surface-elevated: #ffffff;
+  --sidebar-bg: #f5f3ef;
+  --sidebar-border: rgba(0, 0, 0, 0.04);
+  --topbar-bg: rgba(248, 247, 244, 0.94);
+  --text-primary: #1a1a18;
+  --text-secondary: #6b6b68;
+  --text-muted: #a0a09c;
+  --text-faint: #c0c0bc;
+  --brand: #01696f;
+  --brand-hover: #015358;
+  --brand-soft: rgba(1, 105, 111, 0.08);
+  --brand-faint: rgba(1, 105, 111, 0.04);
+  --nav-active-bg: rgba(1, 105, 111, 0.08);
+  --nav-active-fg: #01696f;
+  --nav-hover-bg: rgba(0, 0, 0, 0.05);
+  --logo-chrome-bg: linear-gradient(135deg, rgba(1, 105, 111, 0.05) 0%, rgba(255, 255, 255, 0) 55%);
+  --logo-blend: multiply;
+  --accent-ridge: rgba(1, 105, 111, 0.25);
+
+  /* ── Extended tokens ── */
+  --input-bg: #ffffff;
+  --input-border: rgba(0, 0, 0, 0.08);
+  --input-focus-ring: rgba(1, 105, 111, 0.20);
+  --input-placeholder: #a0a09c;
+  --card-border: rgba(0, 0, 0, 0.06);
+  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
+  --badge-muted-bg: rgba(0, 0, 0, 0.05);
+  --badge-muted-fg: #6b6b68;
+  --divider: rgba(0, 0, 0, 0.06);
+  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
+  --btn-neutral-bg: #f5f3ef;
+  --btn-neutral-border: rgba(0, 0, 0, 0.12);
+  --btn-neutral-hover: #eeedea;
+  --success: #01696f;
+  --success-soft: rgba(1, 105, 111, 0.08);
+  --warning: #964219;
+  --warning-soft: rgba(150, 66, 25, 0.08);
+  --error: #c13838;
+  --error-soft: rgba(193, 56, 56, 0.08);
+  --info: #01696f;
+  --info-soft: rgba(1, 105, 111, 0.06);
+  --urgent: #dc2626;
+  --urgent-soft: rgba(220, 38, 38, 0.06);
+  --pending: #d97706;
+  --pending-soft: rgba(217, 119, 6, 0.06);
+  --skeleton: rgba(0, 0, 0, 0.04);
+  --scrollbar-thumb: rgba(0, 0, 0, 0.12);
+  --scrollbar-track: transparent;
+}
+
+[data-theme="purple"] {
+  color-scheme: light;
+  --page-bg: #f3f1ee;
+  --surface: #f9f8f6;
+  --surface-elevated: #ffffff;
+  --sidebar-bg: #f5f3f0;
+  --sidebar-border: rgba(100, 90, 80, 0.10);
+  --topbar-bg: rgba(245, 243, 240, 0.92);
+  --text-primary: #1a1a1a;
+  --text-muted: #6b5f55;
+  --brand: #5b3a8c;
+  --brand-hover: #4a2d75;
+  --brand-soft: rgba(91, 58, 140, 0.10);
+  --brand-faint: rgba(91, 58, 140, 0.05);
+  --nav-active-bg: rgba(91, 58, 140, 0.07);
+  --nav-active-fg: #5b3a8c;
+  --nav-hover-bg: rgba(100, 90, 80, 0.04);
+  --logo-chrome-bg: linear-gradient(135deg, rgba(91, 58, 140, 0.06) 0%, rgba(255, 255, 255, 0) 55%);
+  --logo-blend: multiply;
+  --accent-ridge: rgba(91, 58, 140, 0.28);
+
+  --input-bg: #ffffff;
+  --input-border: rgba(100, 90, 80, 0.16);
+  --input-focus-ring: rgba(91, 58, 140, 0.25);
+  --input-placeholder: #8c857d;
+  --card-border: rgba(100, 90, 80, 0.10);
+  --card-shadow: 0 1px 2px rgba(100, 90, 80, 0.06);
+  --card-shadow-hover: 0 4px 12px rgba(100, 90, 80, 0.10), 0 1px 3px rgba(100, 90, 80, 0.06);
+  --badge-muted-bg: rgba(100, 90, 80, 0.08);
+  --badge-muted-fg: #6b5f55;
+  --divider: rgba(100, 90, 80, 0.08);
+  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
+  --btn-neutral-bg: #f5f3f0;
+  --btn-neutral-border: rgba(100, 90, 80, 0.14);
+  --btn-neutral-hover: #edeae6;
+  --success: #0f7b5f;
+  --success-soft: rgba(15, 123, 95, 0.10);
+  --warning: #c27b1a;
+  --warning-soft: rgba(194, 123, 26, 0.10);
+  --error: #c13838;
+  --error-soft: rgba(193, 56, 56, 0.10);
+  --info: #5b3a8c;
+  --info-soft: rgba(91, 58, 140, 0.08);
+  --urgent: #dc2626;
+  --urgent-soft: rgba(220, 38, 38, 0.06);
+  --pending: #c27b1a;
+  --pending-soft: rgba(194, 123, 26, 0.06);
+  --skeleton: rgba(100, 90, 80, 0.06);
+  --scrollbar-thumb: rgba(100, 90, 80, 0.18);
+  --scrollbar-track: transparent;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --page-bg: #111110;
+  --surface: #1a1918;
+  --surface-elevated: #222120;
+  --sidebar-bg: #161514;
+  --sidebar-border: rgba(168, 162, 155, 0.10);
+  --topbar-bg: rgba(22, 21, 20, 0.94);
+  --text-primary: #e8e4df;
+  --text-muted: #8c857d;
+  --brand: #2dd4bf;
+  --brand-hover: #5eead4;
+  --brand-soft: rgba(45, 212, 191, 0.12);
+  --brand-faint: rgba(45, 212, 191, 0.06);
+  --nav-active-bg: rgba(45, 212, 191, 0.10);
+  --nav-active-fg: #5eead4;
+  --nav-hover-bg: rgba(168, 162, 155, 0.06);
+  --logo-chrome-bg: linear-gradient(135deg, rgba(45, 212, 191, 0.08) 0%, rgba(255, 255, 255, 0) 50%);
+  --logo-blend: screen;
+  --accent-ridge: rgba(45, 212, 191, 0.35);
+
+  --input-bg: #222120;
+  --input-border: rgba(168, 162, 155, 0.14);
+  --input-focus-ring: rgba(45, 212, 191, 0.30);
+  --input-placeholder: #6b6560;
+  --card-border: rgba(168, 162, 155, 0.08);
+  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
+  --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.20);
+  --badge-muted-bg: rgba(168, 162, 155, 0.10);
+  --badge-muted-fg: #8c857d;
+  --divider: rgba(168, 162, 155, 0.06);
+  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
+  --btn-neutral-bg: #222120;
+  --btn-neutral-border: rgba(168, 162, 155, 0.12);
+  --btn-neutral-hover: #2a2928;
+  --success: #2dd4a8;
+  --success-soft: rgba(45, 212, 168, 0.12);
+  --warning: #f0b429;
+  --warning-soft: rgba(240, 180, 41, 0.12);
+  --error: #f87171;
+  --error-soft: rgba(248, 113, 113, 0.12);
+  --info: #2dd4bf;
+  --info-soft: rgba(45, 212, 191, 0.08);
+  --urgent: #f87171;
+  --urgent-soft: rgba(248, 113, 113, 0.10);
+  --pending: #f0b429;
+  --pending-soft: rgba(240, 180, 41, 0.10);
+  --skeleton: rgba(168, 162, 155, 0.06);
+  --scrollbar-thumb: rgba(168, 162, 155, 0.18);
+  --scrollbar-track: transparent;
+}
+
+[data-theme="dark-purple"] {
+  color-scheme: dark;
+  --page-bg: #13111a;
+  --surface: #1c1926;
+  --surface-elevated: #252230;
+  --sidebar-bg: #17141e;
+  --sidebar-border: rgba(160, 148, 180, 0.10);
+  --topbar-bg: rgba(23, 20, 30, 0.94);
+  --text-primary: #ede8f4;
+  --text-muted: #918899;
+  --brand: #b898e8;
+  --brand-hover: #d0b8f8;
+  --brand-soft: rgba(184, 152, 232, 0.12);
+  --brand-faint: rgba(184, 152, 232, 0.06);
+  --nav-active-bg: rgba(184, 152, 232, 0.10);
+  --nav-active-fg: #d0b8f8;
+  --nav-hover-bg: rgba(160, 148, 180, 0.06);
+  --logo-chrome-bg: linear-gradient(135deg, rgba(184, 152, 232, 0.08) 0%, rgba(255, 255, 255, 0) 50%);
+  --logo-blend: screen;
+  --accent-ridge: rgba(184, 152, 232, 0.30);
+
+  --input-bg: #252230;
+  --input-border: rgba(160, 148, 180, 0.14);
+  --input-focus-ring: rgba(184, 152, 232, 0.30);
+  --input-placeholder: #6b6075;
+  --card-border: rgba(160, 148, 180, 0.08);
+  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
+  --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.20);
+  --badge-muted-bg: rgba(160, 148, 180, 0.10);
+  --badge-muted-fg: #918899;
+  --divider: rgba(160, 148, 180, 0.06);
+  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
+  --btn-neutral-bg: #252230;
+  --btn-neutral-border: rgba(160, 148, 180, 0.12);
+  --btn-neutral-hover: #2e2a3a;
+  --success: #34d399;
+  --success-soft: rgba(52, 211, 153, 0.12);
+  --warning: #f0b429;
+  --warning-soft: rgba(240, 180, 41, 0.12);
+  --error: #f87171;
+  --error-soft: rgba(248, 113, 113, 0.12);
+  --info: #b898e8;
+  --info-soft: rgba(184, 152, 232, 0.08);
+  --urgent: #f87171;
+  --urgent-soft: rgba(248, 113, 113, 0.10);
+  --pending: #f0b429;
+  --pending-soft: rgba(240, 180, 41, 0.10);
+  --skeleton: rgba(160, 148, 180, 0.06);
+  --scrollbar-thumb: rgba(160, 148, 180, 0.18);
+  --scrollbar-track: transparent;
+}
+
+/* ── Global reset & base ─────────────────────────────────────────────────── */
+html {
+  background-color: var(--page-bg);
+  color: var(--text-primary);
+  transition: background-color 150ms ease, color 150ms ease;
+}
+
+/* Smooth theme transitions */
+body,
+.app-sidebar-link,
+aside,
+header,
+main,
+[class*="rounded-xl"] {
+  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
+}
+
+/* ── Custom scrollbar ────────────────────────────────────────────────────── */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--scrollbar-track); }
+::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; }
+::-webkit-scrollbar-thumb:hover { background: var(--brand-soft); }
+
+/* ── Nuxt UI component overrides (theme-aware) ──────────────────────────── */
+
+/* Buttons — global refinements for Nuxt UI buttons */
+[data-theme] button,
+[data-theme] [role="button"],
+[data-theme] a[class*="UButton"],
+[data-theme] .ui-button-solid-primary,
+[data-theme] button[class*="bg-[var(--brand)]"] {
+  transition: all 150ms ease;
+  border-radius: 0.5rem;
+  letter-spacing: -0.005em;
+}
+/* Solid primary buttons — deeper shadow for depth */
+[data-theme] [class*="bg-primary"] {
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 20%, transparent);
+}
+[data-theme] [class*="bg-primary"]:hover {
+  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 28%, transparent);
+}
+
+/* Inputs & selects */
+[data-theme] input:not([type="checkbox"]):not([type="radio"]),
+[data-theme] textarea,
+[data-theme] select,
+[data-theme] [role="combobox"] {
+  background-color: var(--input-bg) !important;
+  border-color: var(--input-border) !important;
+  color: var(--text-primary) !important;
+  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease !important;
+}
+[data-theme] input:not([type="checkbox"]):not([type="radio"]):focus,
+[data-theme] textarea:focus,
+[data-theme] select:focus,
+[data-theme] [role="combobox"]:focus {
+  border-color: var(--brand) !important;
+  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
+}
+[data-theme] input::placeholder,
+[data-theme] textarea::placeholder {
+  color: var(--input-placeholder) !important;
+}
+
+/* Cards — universal card treatment */
+.app-card {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+.app-card:hover {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+.app-card-interactive:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border-color: rgba(0, 0, 0, 0.10);
+}
+
+/* Badge helpers */
+.app-badge {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+
+/* Dividers */
+.app-divider {
+  border-color: var(--divider);
+}
+
+/* ── Logo: soften white box PNGs — blend into sidebar chrome ─────────────── */
+.app-logo-chrome {
+  background: var(--logo-chrome-bg);
+  border-radius: 0.75rem;
+  padding: 0.35rem 0.6rem;
+  isolation: isolate;
+}
+.app-logo-chrome img {
+  mix-blend-mode: var(--logo-blend);
+  max-height: 2rem;
+  width: auto;
+  max-width: 10rem;
+  object-fit: contain;
+  object-position: left center;
+  filter: contrast(1.05) saturate(1.02);
+}
+
+/* ── Typography helpers ──────────────────────────────────────────────────── */
+
+.app-heading {
+  color: var(--text-primary);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.app-body-muted {
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+/* Tabular nums on dashboard container */
+.app-dashboard-nums {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Ridge accent on chrome buttons (top bar) ────────────────────────────── */
+.app-chrome-btn {
+  position: relative;
+  overflow: visible;
+}
+.app-chrome-btn::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: linear-gradient(135deg, var(--accent-ridge) 0%, transparent 55%);
+  opacity: 0.85;
+  pointer-events: none;
+}
+
+/* ── Sidebar navigation ──────────────────────────────────────────────────── */
+.app-sidebar-link {
+  border-radius: 8px;
+  transition: background-color 150ms ease;
+  outline: none !important;
+}
+.app-sidebar-link:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.app-sidebar-link:focus-visible {
+  outline: 2px solid var(--brand) !important;
+  outline-offset: -1px;
+}
+
+.app-sidebar-link-active {
+  background-color: rgba(0, 0, 0, 0.045);
+  color: var(--text-primary) !important;
+  font-weight: 600;
+}
+
+/* Sidebar child link active — text only, no pill */
+.app-sidebar-child-active {
+  color: #01696f !important;
+  font-weight: 500;
+  background: transparent !important;
+}
+
+/* Section header labels in sidebar */
+.app-sidebar-section-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #a0a09c;
+  margin-top: 24px;
+  margin-bottom: 8px;
+  padding: 0 12px;
+  user-select: none;
+}
+
+/* ── KPI card treatment ──────────────────────────────────────────────────── */
+.app-kpi-card {
+  background: var(--surface);
+  border: 1px solid var(--card-border);
+  border-radius: 0.75rem;
+  padding: 0.875rem 1rem;
+  box-shadow: var(--card-shadow);
+  transition: box-shadow 150ms ease, border-color 150ms ease;
+}
+.app-kpi-card:hover {
+  box-shadow: var(--card-shadow-hover);
+}
+
+/* ── Quick-link tiles ────────────────────────────────────────────────────── */
+.app-quick-link {
+  background: var(--surface);
+  border: 1px solid var(--card-border);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  box-shadow: var(--card-shadow);
+  transition: all 150ms ease;
+}
+.app-quick-link:hover {
+  border-color: var(--brand);
+  box-shadow: var(--card-shadow-hover);
+}
+.app-quick-link:active {
+  transform: translateY(0);
+}
+
+/* ── Theme picker card ───────────────────────────────────────────────────── */
+.app-theme-card {
+  background: var(--surface);
+  border: 1px solid var(--card-border);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+  box-shadow: var(--card-shadow);
+  transition: all 150ms ease;
+  cursor: pointer;
+}
+.app-theme-card:hover {
+  box-shadow: var(--card-shadow-hover);
+  border-color: var(--brand);
+}
+.app-theme-card-selected {
+  border-color: var(--brand) !important;
+  box-shadow: 0 0 0 2px var(--brand), var(--card-shadow);
+}
+
+/* ── Animated skeleton ───────────────────────────────────────────────────── */
+@keyframes app-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.app-skeleton {
+  background: linear-gradient(90deg, var(--skeleton) 25%, transparent 50%, var(--skeleton) 75%);
+  background-size: 200% 100%;
+  animation: app-shimmer 1.8s ease-in-out infinite;
+  border-radius: 0.375rem;
+}
+
+/* ── Focus visible ring ──────────────────────────────────────────────────── */
+.app-focus-ring:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Kill all default blue focus rings — use brand color everywhere */
+*:focus {
+  outline-color: var(--brand) !important;
+}
+*:focus-visible {
+  outline-color: var(--brand) !important;
+}
+button:focus,
+a:focus,
+[role="button"]:focus,
+button:focus-visible,
+a:focus-visible,
+[role="button"]:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--brand) 50%, transparent) !important;
+  outline-offset: 2px;
+}
+/* Sidebar buttons — suppress focus outline in favor of hover state */
+.app-sidebar-link:focus:not(:focus-visible) {
+  outline: none !important;
+}
+
+/* ── Entrance animations (disabled per spec — no entrance animations) ──── */
+.app-animate-in { /* no-op */ }
+.app-stagger > * { /* no-op */ }
diff --git a/app/components/AppBackToHome.vue b/app/components/AppBackToHome.vue
new file mode 100644
index 0000000..b94f38a
--- /dev/null
+++ b/app/components/AppBackToHome.vue
@@ -0,0 +1,7 @@
+<template>
+  <NuxtLink to="/" class="inline-flex">
+    <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-home">
+      Home
+    </UButton>
+  </NuxtLink>
+</template>
diff --git a/app/components/account/AccountThemeSection.vue b/app/components/account/AccountThemeSection.vue
new file mode 100644
index 0000000..9789749
--- /dev/null
+++ b/app/components/account/AccountThemeSection.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { AppThemeId } from '~/types/app-theme'
+
+const { themeId, themeOptions, applyTheme } = useAppTheme()
+
+const themeGradients: Record<string, string> = {
+  light: 'from-sky-100 via-blue-50 to-indigo-100',
+  purple: 'from-violet-100 via-fuchsia-50 to-purple-100',
+  dark: 'from-slate-700 via-slate-800 to-slate-900',
+  'dark-purple': 'from-violet-900 via-purple-950 to-slate-900'
+}
+
+const themeIcons: Record<string, string> = {
+  light: 'i-heroicons-sun',
+  purple: 'i-heroicons-sparkles',
+  dark: 'i-heroicons-moon',
+  'dark-purple': 'i-heroicons-star'
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <p class="text-sm leading-relaxed text-[var(--text-muted)]">
+        Choose a theme for the entire application. Colors, inputs, buttons, cards, sidebar, and top bar all follow your choice.
+        Your preference is saved to this browser.
+      </p>
+    </div>
+
+    <!-- Theme grid -->
+    <div class="grid gap-4 sm:grid-cols-2">
+      <button
+        v-for="opt in themeOptions"
+        :key="opt.id"
+        type="button"
+        class="app-theme-card text-left"
+        :class="themeId === opt.id ? 'app-theme-card-selected' : ''"
+        @click="applyTheme(opt.id as AppThemeId)"
+      >
+        <!-- Header -->
+        <div class="flex items-start justify-between gap-3">
+          <div class="flex items-center gap-2.5">
+            <div
+              class="flex h-8 w-8 items-center justify-center rounded-lg"
+              :class="themeId === opt.id ? 'bg-[var(--brand-soft)] text-[var(--brand)]' : 'bg-[var(--badge-muted-bg)] text-[var(--text-muted)]'"
+            >
+              <UIcon :name="themeIcons[opt.id]" class="h-4 w-4" />
+            </div>
+            <div>
+              <p class="font-semibold text-[var(--text-primary)]">{{ opt.label }}</p>
+              <p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ opt.description }}</p>
+            </div>
+          </div>
+          <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0 scale-75"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0 scale-75"
+          >
+            <UIcon
+              v-if="themeId === opt.id"
+              name="i-heroicons-check-circle-solid"
+              class="h-6 w-6 shrink-0 text-[var(--brand)]"
+            />
+          </Transition>
+        </div>
+
+        <!-- Gradient preview bar -->
+        <div
+          class="mt-4 h-8 overflow-hidden rounded-lg bg-gradient-to-r"
+          :class="themeGradients[opt.id]"
+        />
+
+        <!-- Component preview (scoped to this theme) -->
+        <div
+          class="mt-3 rounded-lg border border-[var(--sidebar-border)] bg-[var(--page-bg)] p-3"
+          :data-theme="opt.id"
+        >
+          <div class="space-y-3">
+            <!-- Buttons row -->
+            <div>
+              <p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Buttons</p>
+              <div class="flex flex-wrap gap-1.5">
+                <UButton size="xs" color="primary">Primary</UButton>
+                <UButton size="xs" color="primary" variant="soft">Soft</UButton>
+                <UButton size="xs" color="primary" variant="outline">Outline</UButton>
+                <UButton size="xs" color="neutral" variant="ghost">Ghost</UButton>
+              </div>
+            </div>
+            <!-- Input preview -->
+            <div>
+              <p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Input</p>
+              <div class="max-w-[200px]">
+                <UInput size="xs" placeholder="Search policies..." icon="i-heroicons-magnifying-glass" disabled />
+              </div>
+            </div>
+            <!-- Badges row -->
+            <div>
+              <p class="mb-2 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Badges</p>
+              <div class="flex flex-wrap gap-1.5">
+                <UBadge color="primary" variant="soft" size="xs">Active</UBadge>
+                <UBadge color="success" variant="soft" size="xs">Bound</UBadge>
+                <UBadge color="warning" variant="soft" size="xs">Pending</UBadge>
+                <UBadge color="error" variant="soft" size="xs">Overdue</UBadge>
+              </div>
+            </div>
+          </div>
+        </div>
+      </button>
+    </div>
+
+    <!-- Extra info -->
+    <div class="rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-4 shadow-sm">
+      <div class="flex gap-3">
+        <UIcon name="i-heroicons-information-circle" class="mt-0.5 h-5 w-5 shrink-0 text-[var(--brand)]" />
+        <div class="text-sm text-[var(--text-muted)]">
+          <p>
+            Theme applies instantly to all pages including sidebar navigation, cards, inputs, buttons, badges, and KPI panels.
+            You can also quickly switch themes from the
+            <UIcon name="i-heroicons-swatch" class="inline h-3.5 w-3.5" />
+            icon in the top bar.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/home/DashboardWidgetBlocks.vue b/app/components/home/DashboardWidgetBlocks.vue
new file mode 100644
index 0000000..8316266
--- /dev/null
+++ b/app/components/home/DashboardWidgetBlocks.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { DashboardWidgetId } from '~/composables/useDashboardHomeWidgets'
+
+const props = defineProps<{
+  widgetOrder: DashboardWidgetId[]
+  widgets: Record<DashboardWidgetId, boolean>
+  layoutUnlocked: boolean
+  draggingWidget: DashboardWidgetId | null
+}>()
+
+const emit = defineEmits<{
+  dragStart: [wid: DashboardWidgetId, e: DragEvent]
+  dragEnd: []
+  drop: [wid: DashboardWidgetId, e: DragEvent]
+}>()
+
+function shellClass(wid: DashboardWidgetId) {
+  return [
+    props.layoutUnlocked ? 'rounded-2xl ring-1 ring-dashed ring-[var(--brand-soft)]/50' : '',
+    props.draggingWidget === wid ? 'opacity-[0.58]' : ''
+  ]
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-6xl space-y-10">
+    <template v-for="wid in widgetOrder" :key="'dash-' + wid">
+      <section
+        v-show="widgets[wid]"
+        :class="shellClass(wid)"
+        @dragover.prevent
+        @drop.prevent="emit('drop', wid, $event)"
+      >
+        <div class="flex items-start gap-1 sm:gap-3">
+          <div v-if="layoutUnlocked" class="flex shrink-0 flex-col pt-1">
+            <button
+              type="button"
+              draggable="true"
+              class="select-none cursor-grab rounded-lg border border-[var(--card-border)]/90 bg-[var(--surface)] p-2 text-[var(--text-muted)] shadow-sm hover:bg-[var(--badge-muted-bg)] active:cursor-grabbing"
+              tabindex="-1"
+              aria-label="Drag to reorder section"
+              @dragstart.stop="emit('dragStart', wid, $event)"
+              @dragend="emit('dragEnd')"
+            >
+              <UIcon name="i-heroicons-bars-3" class="h-5 w-5" />
+            </button>
+          </div>
+          <div class="min-w-0 flex-1">
+            <slot :name="wid" />
+          </div>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
diff --git a/app/components/layout/AppCommandSearch.vue b/app/components/layout/AppCommandSearch.vue
new file mode 100644
index 0000000..b89b145
--- /dev/null
+++ b/app/components/layout/AppCommandSearch.vue
@@ -0,0 +1,439 @@
+<script setup lang="ts">
+/**
+ * Global command palette — searches customers, policies, claims, and app pages.
+ * Keyboard: Ctrl/Cmd+K to focus, Escape to close, ↑↓ to navigate, Enter to go.
+ */
+import { MOCK_CUSTOMERS, fmtMoney } from '~/data/mock-customers'
+
+const router = useRouter()
+const open = ref(false)
+const q = ref('')
+const inputRef = ref<HTMLElement | null>(null)
+const activeIndex = ref(-1)
+
+/* ── Build searchable records from mock data ── */
+
+type SearchHit = {
+  id: string
+  kind: 'customer' | 'policy' | 'claim' | 'page'
+  icon: string
+  title: string
+  meta: string
+  detail?: string
+  to: string
+}
+
+const allRecords = computed<SearchHit[]>(() => {
+  const hits: SearchHit[] = []
+
+  for (const c of MOCK_CUSTOMERS) {
+    // Customer record
+    hits.push({
+      id: `cust-${c.id}`,
+      kind: 'customer',
+      icon: 'i-heroicons-user',
+      title: c.name,
+      meta: `${c.type} · ${c.documentId}`,
+      detail: `${c.policies.length} policies · ${fmtMoney(c.policies.reduce((s, p) => s + p.premium, 0))}/yr · Agent: ${c.agent}`,
+      to: `/customers/${c.id}`
+    })
+
+    // Each policy
+    for (const p of c.policies) {
+      hits.push({
+        id: `pol-${p.id}`,
+        kind: 'policy',
+        icon: p.icon,
+        title: p.id,
+        meta: `${p.line} · ${p.carrier} · ${c.name}`,
+        detail: p.product,
+        to: `/customers/${c.id}`
+      })
+    }
+
+    // Each claim
+    for (const cl of c.claims) {
+      hits.push({
+        id: `claim-${cl.id}`,
+        kind: 'claim',
+        icon: 'i-heroicons-shield-exclamation',
+        title: cl.id,
+        meta: `${cl.type} · ${cl.status} · ${c.name}`,
+        detail: `Policy ${cl.policy} · $${cl.amount.toLocaleString()}`,
+        to: `/customers/${c.id}`
+      })
+    }
+  }
+
+  return hits
+})
+
+/* ── App pages / destinations ── */
+const APP_PAGES: SearchHit[] = [
+  { id: 'p-home', kind: 'page', icon: 'i-heroicons-squares-2x2', title: 'My Dashboard', meta: 'Home', to: '/' },
+  { id: 'p-calendar', kind: 'page', icon: 'i-heroicons-calendar-days', title: 'Calendar', meta: 'Agenda & reminders', to: '/calendar' },
+
+  // Quotes
+  { id: 'p-quotes', kind: 'page', icon: 'i-heroicons-calculator', title: 'Quotes Overview', meta: 'Quotes', to: '/quotes' },
+  { id: 'p-quotes-auto', kind: 'page', icon: 'i-heroicons-truck', title: 'Auto Quotes', meta: 'Quotes · Motor & fleet', to: '/quotes/auto' },
+  { id: 'p-quotes-health', kind: 'page', icon: 'i-heroicons-heart', title: 'Health Quotes', meta: 'Quotes · Collective & individual', to: '/quotes/health' },
+  { id: 'p-quotes-life', kind: 'page', icon: 'i-heroicons-shield-check', title: 'Life Quotes', meta: 'Quotes · Individual & corporate', to: '/quotes/life' },
+  { id: 'p-quotes-risk', kind: 'page', icon: 'i-heroicons-building-office-2', title: 'General Risk', meta: 'Quotes · Liability & specialty', to: '/quotes/general-risk' },
+
+  // Sales
+  { id: 'p-ql', kind: 'page', icon: 'i-heroicons-bolt', title: 'Quick Lead', meta: 'Sales · Fast lead capture', to: '/sales/quick-lead' },
+  { id: 'p-pipeline', kind: 'page', icon: 'i-heroicons-funnel', title: 'Sales Pipeline', meta: 'Sales · Kanban board', to: '/onboarding' },
+  { id: 'p-solicitud', kind: 'page', icon: 'i-heroicons-document-text', title: 'New Solicitud', meta: 'Sales · Onboarding intake', to: '/onboarding/solicitud' },
+  { id: 'p-emissions', kind: 'page', icon: 'i-heroicons-paper-airplane', title: 'Emissions Review', meta: 'Sales · QA & carrier submit', to: '/onboarding/emissions' },
+  { id: 'p-nombra', kind: 'page', icon: 'i-heroicons-document-arrow-up', title: 'Nombramiento', meta: 'Sales · Broker-of-record transfer', to: '/onboarding/policy-upload/new' },
+
+  // Operations
+  { id: 'p-customers', kind: 'page', icon: 'i-heroicons-users', title: 'Customers', meta: 'Operations · CRM', to: '/customers' },
+  { id: 'p-new-customer', kind: 'page', icon: 'i-heroicons-user-plus', title: 'New Customer', meta: 'Operations · Registration', to: '/customers/new' },
+  { id: 'p-policies', kind: 'page', icon: 'i-heroicons-briefcase', title: 'Policies', meta: 'Operations · Book of business', to: '/policies' },
+
+  // Workstations
+  { id: 'p-collectivos', kind: 'page', icon: 'i-heroicons-user-group', title: 'Collectivos', meta: 'Workstations · Group management', to: '/workstation/collectivos' },
+  { id: 'p-collections', kind: 'page', icon: 'i-heroicons-banknotes', title: 'Collections', meta: 'Workstations', to: '/workstation/collections' },
+  { id: 'p-claims-ws', kind: 'page', icon: 'i-heroicons-shield-exclamation', title: 'Claims', meta: 'Workstations', to: '/workstation/claims' },
+  { id: 'p-renewals', kind: 'page', icon: 'i-heroicons-arrow-path', title: 'Renewals', meta: 'Workstations', to: '/workstation/renewals' },
+  { id: 'p-cs', kind: 'page', icon: 'i-heroicons-chat-bubble-left-right', title: 'Customer Service', meta: 'Workstations', to: '/workstation/customer-service' },
+  { id: 'p-sales-factory', kind: 'page', icon: 'i-heroicons-rocket-launch', title: 'Sales Factory', meta: 'AI Tools · Lead gen & cross-sell', to: '/ai-tools/sales-factory' },
+  { id: 'p-facturacion', kind: 'page', icon: 'i-heroicons-document-text', title: 'Facturación', meta: 'Workstations · Invoicing', to: '/workstation/facturacion' },
+
+  // AI Tools
+  { id: 'p-comparator', kind: 'page', icon: 'i-heroicons-scale', title: 'Policy Comparator', meta: 'AI Tools', to: '/ai-tools/policy-comparator' },
+  { id: 'p-email', kind: 'page', icon: 'i-heroicons-envelope', title: 'Email Writer', meta: 'AI Tools', to: '/ai-tools/email-writer' },
+  { id: 'p-case', kind: 'page', icon: 'i-heroicons-light-bulb', title: 'Case Assistant', meta: 'AI Tools', to: '/ai-tools/case-assistant' },
+
+  // Reports
+  { id: 'p-production', kind: 'page', icon: 'i-heroicons-chart-bar', title: 'Production Report', meta: 'Reports & Analysis', to: '/analysis/production' },
+  { id: 'p-commissions', kind: 'page', icon: 'i-heroicons-currency-dollar', title: 'Commissions', meta: 'Reports & Analysis', to: '/analysis/commissions' },
+  { id: 'p-claims-report', kind: 'page', icon: 'i-heroicons-chart-pie', title: 'Claims Report', meta: 'Reports & Analysis', to: '/analysis/claims' },
+
+  // Settings
+  { id: 'p-account', kind: 'page', icon: 'i-heroicons-user-circle', title: 'My Account', meta: 'Settings · Profile & theme', to: '/account' },
+  { id: 'p-settings', kind: 'page', icon: 'i-heroicons-cog-6-tooth', title: 'Software Settings', meta: 'Settings', to: '/settings' },
+  { id: 'p-agents', kind: 'page', icon: 'i-heroicons-user-group', title: 'Agents & Commissions', meta: 'Settings · Producer management', to: '/settings/agents' },
+  { id: 'p-org', kind: 'page', icon: 'i-heroicons-building-office', title: 'Organization', meta: 'Settings · Company & logo', to: '/settings/organization' },
+  { id: 'p-forms', kind: 'page', icon: 'i-heroicons-clipboard-document-list', title: 'Forms Library', meta: 'Settings · Insurer forms', to: '/settings/forms' },
+  { id: 'p-providers', kind: 'page', icon: 'i-heroicons-building-storefront', title: 'Providers', meta: 'Settings · Carrier setup', to: '/settings/providers' },
+  { id: 'p-permissions', kind: 'page', icon: 'i-heroicons-lock-closed', title: 'Permissions', meta: 'Settings · Roles & access', to: '/settings/permissions' },
+
+  // Tasks
+  { id: 'p-tasks', kind: 'page', icon: 'i-heroicons-clipboard-document-check', title: 'Tasks', meta: 'Work management', to: '/tasks' },
+]
+
+/* ── Search filtering ── */
+const needle = computed(() => q.value.trim().toLowerCase())
+
+const filteredRecords = computed(() => {
+  if (!needle.value) return []
+  const n = needle.value
+  return allRecords.value.filter(
+    (x) =>
+      x.title.toLowerCase().includes(n) ||
+      x.meta.toLowerCase().includes(n) ||
+      (x.detail?.toLowerCase().includes(n) ?? false)
+  ).slice(0, 8)
+})
+
+const filteredPages = computed(() => {
+  if (!needle.value) return APP_PAGES.slice(0, 6) // show top pages when empty
+  const n = needle.value
+  return APP_PAGES.filter(
+    (x) =>
+      x.title.toLowerCase().includes(n) ||
+      x.meta.toLowerCase().includes(n)
+  ).slice(0, 8)
+})
+
+const allFiltered = computed(() => [...filteredRecords.value, ...filteredPages.value])
+
+/* ── Keyboard navigation ── */
+function navigate(hit: SearchHit) {
+  open.value = false
+  q.value = ''
+  activeIndex.value = -1
+  router.push(hit.to)
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (!open.value) return
+
+  const total = allFiltered.value.length
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    activeIndex.value = (activeIndex.value + 1) % Math.max(total, 1)
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    activeIndex.value = activeIndex.value <= 0 ? total - 1 : activeIndex.value - 1
+  } else if (e.key === 'Enter' && activeIndex.value >= 0 && activeIndex.value < total) {
+    e.preventDefault()
+    navigate(allFiltered.value[activeIndex.value]!)
+  } else if (e.key === 'Escape') {
+    e.preventDefault()
+    open.value = false
+    activeIndex.value = -1
+  }
+}
+
+/* ── Global Cmd/Ctrl+K ── */
+function onGlobalKey(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+    e.preventDefault()
+    open.value = true
+    nextTick(() => {
+      const el = inputRef.value
+      if (el) {
+        const input = el.querySelector('input') ?? (el as HTMLInputElement)
+        input?.focus()
+      }
+    })
+  }
+}
+
+/* ── Click outside ── */
+const containerRef = ref<HTMLElement | null>(null)
+function onDocClick(e: MouseEvent) {
+  const el = containerRef.value
+  if (!el || !open.value) return
+  if (!el.contains(e.target as Node)) {
+    open.value = false
+    activeIndex.value = -1
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', onDocClick)
+  document.addEventListener('keydown', onGlobalKey)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', onDocClick)
+  document.removeEventListener('keydown', onGlobalKey)
+})
+
+watch(q, () => {
+  open.value = true
+  activeIndex.value = -1
+})
+
+/* ── Kind colors ── */
+const kindColor: Record<string, string> = {
+  customer: '#01696f',
+  policy: '#7c3aed',
+  claim: '#c13838',
+  page: '#8a8a86',
+}
+</script>
+
+<template>
+  <div ref="containerRef" class="relative w-full max-w-xl min-w-0 flex-1">
+    <div ref="inputRef">
+      <UInput
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        placeholder="Search customers, policies, pages… (⌘K)"
+        class="w-full"
+        @focus="open = true"
+        @keydown="onKeydown"
+      />
+    </div>
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-show="open"
+        class="cs-dropdown"
+      >
+        <div class="max-h-[min(70vh,460px)] overflow-y-auto">
+          <!-- Records section (customers, policies, claims) -->
+          <template v-if="filteredRecords.length > 0">
+            <div class="cs-section-head">
+              <span>Records</span>
+              <span class="cs-section-count">{{ filteredRecords.length }}</span>
+            </div>
+            <ul class="py-1">
+              <li v-for="(r, i) in filteredRecords" :key="r.id">
+                <button
+                  type="button"
+                  class="cs-hit"
+                  :class="activeIndex === i ? 'cs-hit-active' : ''"
+                  @click="navigate(r)"
+                  @mouseenter="activeIndex = i"
+                >
+                  <div class="cs-hit-icon" :style="`color: ${kindColor[r.kind] || '#8a8a86'}`">
+                    <UIcon :name="r.icon" style="width: 16px; height: 16px;" />
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    <div class="flex items-center gap-2">
+                      <p class="truncate text-[13px] font-medium text-[var(--text-primary)]">{{ r.title }}</p>
+                      <span class="cs-kind-badge" :style="`background: ${kindColor[r.kind]}15; color: ${kindColor[r.kind]}`">
+                        {{ r.kind }}
+                      </span>
+                    </div>
+                    <p class="truncate text-[11px] text-[var(--text-muted)]">{{ r.meta }}</p>
+                    <p v-if="r.detail" class="truncate text-[11px] text-[var(--text-muted)] opacity-70">{{ r.detail }}</p>
+                  </div>
+                  <UIcon name="i-heroicons-arrow-right" class="shrink-0 opacity-30" style="width: 12px; height: 12px;" />
+                </button>
+              </li>
+            </ul>
+          </template>
+
+          <!-- No record results message -->
+          <template v-if="needle && filteredRecords.length === 0">
+            <div class="cs-section-head">
+              <span>Records</span>
+            </div>
+            <p class="px-4 py-3 text-[12px] text-[var(--text-muted)]">
+              No customers, policies, or claims match "{{ q.trim() }}"
+            </p>
+          </template>
+
+          <!-- Pages / Go to section -->
+          <template v-if="filteredPages.length > 0">
+            <div class="cs-section-head" :class="filteredRecords.length > 0 ? 'cs-section-border' : ''">
+              <span>{{ needle ? 'Pages' : 'Quick access' }}</span>
+            </div>
+            <ul class="py-1 pb-2">
+              <li v-for="(a, ai) in filteredPages" :key="a.id">
+                <button
+                  type="button"
+                  class="cs-hit"
+                  :class="activeIndex === filteredRecords.length + ai ? 'cs-hit-active' : ''"
+                  @click="navigate(a)"
+                  @mouseenter="activeIndex = filteredRecords.length + ai"
+                >
+                  <div class="cs-hit-icon" style="color: #8a8a86;">
+                    <UIcon :name="a.icon" style="width: 16px; height: 16px;" />
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    <p class="truncate text-[13px] text-[var(--text-primary)]">{{ a.title }}</p>
+                    <p class="truncate text-[11px] text-[var(--text-muted)]">{{ a.meta }}</p>
+                  </div>
+                  <UIcon name="i-heroicons-arrow-top-right-on-square" class="shrink-0 opacity-30" style="width: 12px; height: 12px;" />
+                </button>
+              </li>
+            </ul>
+          </template>
+
+          <!-- Keyboard hint -->
+          <div class="cs-footer">
+            <span class="cs-kbd">↑↓</span> navigate
+            <span class="cs-kbd">↵</span> go
+            <span class="cs-kbd">esc</span> close
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.cs-dropdown {
+  position: absolute;
+  left: 0; right: 0;
+  top: calc(100% + 6px);
+  z-index: 50;
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: var(--surface, #ffffff);
+  box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
+}
+
+.cs-section-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #8a8a86;
+}
+.cs-section-border {
+  border-top: 1px solid rgba(0,0,0,0.06);
+  margin-top: 2px;
+  padding-top: 10px;
+}
+.cs-section-count {
+  font-size: 9px;
+  font-weight: 600;
+  padding: 0 4px;
+  border-radius: 4px;
+  background: rgba(0,0,0,0.05);
+  color: #8a8a86;
+}
+
+.cs-hit {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 16px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  transition: background 100ms ease;
+}
+.cs-hit:hover,
+.cs-hit-active {
+  background: rgba(1,105,111,0.04);
+}
+
+.cs-hit-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: rgba(0,0,0,0.03);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.cs-kind-badge {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 1px 5px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.cs-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+  font-size: 10px;
+  color: #a0a09c;
+}
+
+.cs-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 3px;
+  border: 1px solid rgba(0,0,0,0.1);
+  background: rgba(0,0,0,0.03);
+  font-size: 9px;
+  font-weight: 600;
+  font-family: inherit;
+  color: #8a8a86;
+}
+</style>
diff --git a/app/components/layout/AppTopBar.vue b/app/components/layout/AppTopBar.vue
new file mode 100644
index 0000000..30d63f6
--- /dev/null
+++ b/app/components/layout/AppTopBar.vue
@@ -0,0 +1,339 @@
+<script setup lang="ts">
+import type { AppThemeId } from '~/types/app-theme'
+import { APP_THEME_OPTIONS } from '~/types/app-theme'
+
+defineProps<{
+  sidebarCollapsed: boolean
+  brandTitle?: string
+}>()
+
+const emit = defineEmits<{
+  toggleSidebar: []
+  refresh: []
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const isHome = computed(() => route.path === '/')
+const { themeId, applyTheme } = useAppTheme()
+
+const themeIcons: Record<string, string> = {
+  light: 'i-heroicons-sun',
+  purple: 'i-heroicons-sparkles',
+  dark: 'i-heroicons-moon',
+  'dark-purple': 'i-heroicons-star',
+}
+
+const userMenuOpen = ref(false)
+const userMenuRoot = ref<HTMLElement | null>(null)
+const themeMenuOpen = ref(false)
+const themeMenuRoot = ref<HTMLElement | null>(null)
+
+function closeUserMenu() {
+  userMenuOpen.value = false
+}
+
+function onDocClick(e: MouseEvent) {
+  const userEl = userMenuRoot.value
+  if (userEl && userMenuOpen.value && !userEl.contains(e.target as Node)) {
+    userMenuOpen.value = false
+  }
+  const themeEl = themeMenuRoot.value
+  if (themeEl && themeMenuOpen.value && !themeEl.contains(e.target as Node)) {
+    themeMenuOpen.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onDocClick))
+onUnmounted(() => document.removeEventListener('click', onDocClick))
+</script>
+
+<template>
+  <header class="app-topbar">
+    <!-- Left: sidebar toggle + brand -->
+    <div class="flex shrink-0 items-center gap-2">
+      <button
+        type="button"
+        class="app-topbar-icon-btn"
+        title="Show / hide sidebar"
+        aria-label="Toggle sidebar"
+        @click="emit('toggleSidebar')"
+      >
+        <UIcon :name="sidebarCollapsed ? 'i-heroicons-bars-3' : 'i-heroicons-chevron-double-left'" style="width: 16px; height: 16px;" />
+      </button>
+      <NuxtLink to="/" class="flex items-center gap-1.5 rounded-lg px-1.5 py-1 transition hover:opacity-80">
+        <span class="text-[12px] font-medium tracking-tight text-[#a0a09c]">{{ brandTitle || 'Segur-OS' }}</span>
+        <span class="rounded-sm px-0.5 py-px text-[8px] font-medium uppercase tracking-wider text-[#c0c0bc]">Beta</span>
+      </NuxtLink>
+    </div>
+
+    <!-- Center: search (absolutely centered) -->
+    <div class="app-topbar-search-wrap">
+      <LayoutAppCommandSearch />
+    </div>
+
+    <!-- Center-right: contextual actions (home page) -->
+    <div v-if="isHome" class="ml-auto mr-1 hidden items-center gap-1.5 sm:flex">
+      <NuxtLink to="/onboarding">
+        <button type="button" class="app-topbar-action-btn">
+          <UIcon name="i-heroicons-arrow-trending-up" style="width: 13px; height: 13px;" />
+          Pipeline
+        </button>
+      </NuxtLink>
+      <NuxtLink to="/sales/quick-lead">
+        <button type="button" class="app-topbar-action-btn">
+          <UIcon name="i-heroicons-bolt" style="width: 13px; height: 13px;" />
+          Quick Lead
+        </button>
+      </NuxtLink>
+      <NuxtLink to="/quotes">
+        <button type="button" class="app-topbar-action-btn app-topbar-action-primary">
+          <UIcon name="i-heroicons-document-text" style="width: 13px; height: 13px;" />
+          New quote
+        </button>
+      </NuxtLink>
+      <span class="mx-0.5 h-3 w-px" style="background: rgba(0,0,0,0.06);" />
+    </div>
+
+    <!-- Right: actions -->
+    <div class="flex shrink-0 items-center gap-1" :class="isHome ? '' : 'ml-auto'">
+      <button
+        type="button"
+        class="app-topbar-icon-btn hidden sm:inline-flex"
+        title="Refresh data"
+        aria-label="Refresh"
+        @click="emit('refresh')"
+      >
+        <UIcon name="i-heroicons-arrow-path" style="width: 16px; height: 16px;" />
+      </button>
+
+      <!-- Quick theme switcher -->
+      <div ref="themeMenuRoot" class="relative">
+        <button
+          type="button"
+          class="app-topbar-icon-btn"
+          title="Switch theme"
+          aria-label="Theme"
+          @click.stop="themeMenuOpen = !themeMenuOpen"
+        >
+          <UIcon :name="themeIcons[themeId] ?? 'i-heroicons-swatch'" style="width: 16px; height: 16px;" />
+        </button>
+        <Transition
+          enter-active-class="transition duration-150 ease-out"
+          enter-from-class="opacity-0 scale-95 translate-y-1"
+          enter-to-class="opacity-100 scale-100 translate-y-0"
+          leave-active-class="transition duration-100 ease-in"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0 scale-95"
+        >
+          <div
+            v-show="themeMenuOpen"
+            class="absolute right-0 top-[calc(100%+8px)] z-50 w-52 overflow-hidden rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] py-1.5 shadow-xl ring-1 ring-black/5"
+          >
+            <p class="px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-[var(--text-muted)]">Theme</p>
+            <button
+              v-for="opt in APP_THEME_OPTIONS"
+              :key="opt.id"
+              type="button"
+              class="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition hover:bg-[var(--brand-faint)]"
+              :class="themeId === opt.id ? 'text-[var(--brand)] font-medium' : 'text-[var(--text-primary)]'"
+              @click="applyTheme(opt.id as AppThemeId); themeMenuOpen = false"
+            >
+              <UIcon :name="themeIcons[opt.id]" class="h-4 w-4 shrink-0" :class="themeId === opt.id ? 'text-[var(--brand)]' : 'opacity-60'" />
+              <span class="flex-1">{{ opt.label }}</span>
+              <UIcon
+                v-if="themeId === opt.id"
+                name="i-heroicons-check"
+                class="h-3.5 w-3.5 text-[var(--brand)]"
+              />
+            </button>
+            <div class="mx-3 my-1.5 border-t border-[var(--sidebar-border)]" />
+            <NuxtLink
+              to="/account"
+              class="flex items-center gap-2.5 px-3 py-1.5 text-xs text-[var(--text-muted)] transition hover:text-[var(--brand)]"
+              @click="themeMenuOpen = false"
+            >
+              <UIcon name="i-heroicons-cog-6-tooth" class="h-3.5 w-3.5" />
+              All appearance settings
+            </NuxtLink>
+          </div>
+        </Transition>
+      </div>
+
+      <NuxtLink to="/settings" class="inline-flex" title="Software settings">
+        <span class="app-topbar-icon-btn">
+          <UIcon name="i-heroicons-cog-6-tooth" style="width: 16px; height: 16px;" />
+        </span>
+      </NuxtLink>
+
+      <span class="mx-0.5 h-3 w-px" style="background: rgba(0,0,0,0.06);" />
+
+      <!-- User / Account -->
+      <div ref="userMenuRoot" class="relative">
+        <button
+          type="button"
+          class="inline-flex w-auto items-center gap-1 rounded-md px-1.5 py-0.5 text-[#a0a09c] transition hover:bg-[rgba(0,0,0,0.04)] hover:text-[#6b6b68]"
+          aria-label="Account menu"
+          :aria-expanded="userMenuOpen"
+          @click.stop="userMenuOpen = !userMenuOpen"
+        >
+          <UIcon name="i-heroicons-user-circle" style="width: 15px; height: 15px;" />
+          <span class="hidden text-[11px] font-medium lg:inline">Account</span>
+          <UIcon name="i-heroicons-chevron-down" style="width: 8px; height: 8px; opacity: 0.35;" />
+        </button>
+        <Transition
+          enter-active-class="transition duration-150 ease-out"
+          enter-from-class="opacity-0 scale-95"
+          enter-to-class="opacity-100 scale-100"
+          leave-active-class="transition duration-100 ease-in"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0"
+        >
+          <div
+            v-show="userMenuOpen"
+            class="absolute right-0 top-[calc(100%+8px)] z-50 w-56 overflow-hidden rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] py-1 shadow-xl ring-1 ring-black/5"
+          >
+            <NuxtLink
+              to="/account"
+              class="flex items-center gap-2 px-3 py-2.5 text-sm text-[var(--text-primary)] transition hover:bg-[var(--brand-faint)]"
+              @click="closeUserMenu"
+            >
+              <UIcon name="i-heroicons-user-circle" class="h-4 w-4 opacity-70" />
+              My account
+            </NuxtLink>
+            <NuxtLink
+              to="/settings"
+              class="flex items-center gap-2 px-3 py-2.5 text-sm text-[var(--text-primary)] transition hover:bg-[var(--brand-faint)]"
+              @click="closeUserMenu"
+            >
+              <UIcon name="i-heroicons-cog-6-tooth" class="h-4 w-4 opacity-70" />
+              Software settings
+            </NuxtLink>
+            <div class="my-1 border-t border-[var(--sidebar-border)]" />
+            <div class="px-3 py-1.5">
+              <p class="text-[12px] font-medium text-[var(--text-primary)]">Session (mock)</p>
+              <p class="text-[11px] text-[var(--text-muted)]">broker@demo.com</p>
+            </div>
+            <button
+              type="button"
+              class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-[var(--text-muted)] opacity-50 cursor-not-allowed"
+              disabled
+            >
+              <UIcon name="i-heroicons-arrow-right-on-rectangle" class="h-4 w-4" />
+              Sign out (soon)
+            </button>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.app-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2.5rem;
+  padding: 0 0.75rem;
+  border-bottom: none;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
+  background: var(--topbar-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+@media (min-width: 768px) {
+  .app-topbar { padding: 0 1rem; }
+}
+
+.app-topbar-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.625rem;
+  height: 1.625rem;
+  border-radius: 6px;
+  color: #a0a09c;
+  transition: color 150ms ease, background 150ms ease;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+.app-topbar-icon-btn:hover {
+  color: #6b6b68;
+  background: rgba(0, 0, 0, 0.04);
+}
+
+/* ---- Contextual action buttons (home) ---- */
+.app-topbar-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #8a8a86;
+  background: transparent;
+  border: 1px solid rgba(0,0,0,0.06);
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.app-topbar-action-btn:hover {
+  color: var(--text-primary);
+  background: rgba(0,0,0,0.03);
+  border-color: rgba(0,0,0,0.1);
+}
+.app-topbar-action-primary {
+  color: #ffffff;
+  background: #01696f;
+  border-color: #01696f;
+}
+.app-topbar-action-primary:hover {
+  color: #ffffff;
+  background: #015b60;
+  border-color: #015b60;
+}
+
+/* ---- Centered search bar ---- */
+.app-topbar-search-wrap {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 380px;
+  display: none;
+}
+@media (min-width: 768px) {
+  .app-topbar-search-wrap { display: block; }
+}
+
+/* Search input — quiet at rest, reveals on focus */
+.app-topbar-search-wrap :deep(input) {
+  border-radius: 8px !important;
+  padding-left: 2rem !important;
+  padding-right: 0.75rem !important;
+  height: 1.75rem;
+  font-size: 0.6875rem;
+  background: transparent !important;
+  border: 1px solid rgba(0, 0, 0, 0.05) !important;
+  color: var(--text-secondary) !important;
+  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+.app-topbar-search-wrap :deep(input):focus {
+  background: var(--surface) !important;
+  border-color: rgba(0, 0, 0, 0.1) !important;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
+}
+/* Round the input wrapper/container */
+.app-topbar-search-wrap :deep(.relative) {
+  border-radius: 8px;
+}
+.app-topbar-search-wrap :deep(> div) {
+  border-radius: 8px;
+}
+</style>
diff --git a/app/components/quotes/QuoteComparativeLayout.vue b/app/components/quotes/QuoteComparativeLayout.vue
new file mode 100644
index 0000000..b11f0d0
--- /dev/null
+++ b/app/components/quotes/QuoteComparativeLayout.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type { QuoteComparativeView } from '~/types/quote-view-model'
+
+defineProps<{
+  model: QuoteComparativeView
+}>()
+
+function fmtUsd(n: number) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0
+  }).format(n)
+}
+
+function fmtDate(iso: string) {
+  try {
+    return new Intl.DateTimeFormat('es-PA', { dateStyle: 'long' }).format(new Date(`${iso}T12:00:00`))
+  } catch {
+    return iso
+  }
+}
+</script>
+
+<template>
+  <div class="quote-comparative space-y-8 text-[var(--text-primary)]">
+    <div
+      class="flex flex-wrap items-start justify-between gap-4 rounded-xl border border-[var(--card-border)] bg-gradient-to-br from-[var(--surface)] to-white p-6 shadow-sm"
+    >
+      <div class="min-w-0">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--brand)]">{{ model.title }}</p>
+        <h2 class="mt-1 text-2xl font-bold tracking-tight text-[var(--text-primary)]">{{ model.subtitle }}</h2>
+        <p class="mt-1 text-sm text-[var(--text-muted)]">{{ model.tagline }}</p>
+      </div>
+      <div class="rounded-lg border border-[var(--brand-soft)] bg-[var(--brand-faint)] px-4 py-2 text-right text-sm">
+        <p class="text-[var(--text-muted)]">Cotización</p>
+        <p class="font-medium text-[var(--text-primary)]">{{ fmtDate(model.quoteDateIso) }}</p>
+        <UBadge color="primary" variant="soft" class="mt-1">Válida {{ model.validDays }} días</UBadge>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--surface)] shadow-sm">
+      <div
+        class="border-b border-[var(--brand-soft)] bg-gradient-to-r from-[var(--brand)] to-[var(--brand)] px-5 py-2 text-sm font-semibold text-white"
+      >
+        1 · Cliente y cotización solicitada
+      </div>
+      <div class="grid gap-6 p-5 md:grid-cols-2">
+        <div>
+          <h3 class="mb-3 text-xs font-bold uppercase tracking-wide text-[var(--text-muted)]">Datos del cliente</h3>
+          <dl class="grid grid-cols-[8rem_1fr] gap-x-3 gap-y-2 text-sm">
+            <dt class="text-[var(--text-muted)]">Nombre</dt>
+            <dd class="font-medium">{{ model.client.name }}</dd>
+            <dt class="text-[var(--text-muted)]">Edad</dt>
+            <dd>{{ model.client.ageYears }} años</dd>
+            <dt class="text-[var(--text-muted)]">Género</dt>
+            <dd>{{ model.client.gender }}</dd>
+            <dt class="text-[var(--text-muted)]">Fumador/a</dt>
+            <dd>{{ model.client.smoker ? 'Sí' : 'No' }}</dd>
+            <dt class="text-[var(--text-muted)]">Clasificación</dt>
+            <dd>{{ model.client.riskClass }}</dd>
+            <dt class="text-[var(--text-muted)]">Ocupación</dt>
+            <dd>{{ model.client.occupation }}</dd>
+          </dl>
+        </div>
+        <div>
+          <h3 class="mb-3 text-xs font-bold uppercase tracking-wide text-[var(--text-muted)]">Lo que cotizamos</h3>
+          <p class="text-3xl font-bold text-[var(--text-primary)]">{{ fmtUsd(model.request.sumAssuredUsd) }}</p>
+          <p class="text-sm text-[var(--text-muted)]">Suma asegurada</p>
+          <p class="mt-4 text-2xl font-semibold text-[var(--brand)]">
+            {{ fmtUsd(model.request.monthlyPremiumUsd) }}
+            <span class="text-base font-normal text-[var(--text-muted)]">/ mes</span>
+          </p>
+          <p class="text-sm text-[var(--text-muted)]">
+            Prima anual equivalente: {{ fmtUsd(model.request.annualPremiumUsd) }} / año
+          </p>
+          <dl class="mt-4 space-y-1 text-sm">
+            <div class="flex justify-between gap-4">
+              <dt class="text-[var(--text-muted)]">Tipo de beneficio</dt>
+              <dd>{{ model.request.benefitTypeLabel }}</dd>
+            </div>
+            <div class="flex justify-between gap-4">
+              <dt class="text-[var(--text-muted)]">Coberturas adicionales</dt>
+              <dd>{{ model.request.additionalCoverageLabel }}</dd>
+            </div>
+            <div class="flex justify-between gap-4">
+              <dt class="text-[var(--text-muted)]">Depósito inicial</dt>
+              <dd>{{ model.request.initialDepositLabel }}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </div>
+
+    <section class="space-y-6">
+      <h3 class="text-sm font-bold uppercase tracking-wide text-[var(--text-muted)]">
+        2 · Comparativo de valores (rescate / ahorro)
+      </h3>
+      <div
+        v-for="(row, idx) in model.carriers"
+        :key="idx"
+        class="overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--surface)] shadow-sm"
+      >
+        <div
+          class="border-b px-4 py-2 text-sm font-semibold text-white"
+          :class="idx % 2 === 0 ? 'bg-slate-800' : 'bg-orange-600'"
+        >
+          {{ row.carrierName }} · {{ row.productName }}
+        </div>
+        <div class="p-4 text-xs text-[var(--text-muted)]">{{ row.ratesLine }}</div>
+        <div class="overflow-x-auto px-2 pb-4">
+          <table class="min-w-full text-center text-xs sm:text-sm">
+            <thead>
+              <tr class="border-b border-[var(--card-border)] text-[var(--text-muted)]">
+                <th class="px-2 py-2">Suma asegurada</th>
+                <th v-for="(c, ci) in row.cells" :key="ci" class="px-2 py-2">
+                  {{ c.yearLabel }}
+                  <span class="block text-[10px] font-normal text-[var(--text-muted)] opacity-70">Edad {{ c.ageLabel }}</span>
+                </th>
+                <th class="px-2 py-2 text-[var(--brand)]">Destacado</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="border-b border-[var(--divider)]">
+                <td class="px-2 py-3 font-mono text-xs">{{ fmtUsd(row.sumAssuredUsd) }}</td>
+                <td v-for="(c, ci) in row.cells" :key="ci" class="px-2 py-3 align-top">
+                  <span class="block text-base font-bold text-[var(--text-primary)]">{{ fmtUsd(c.guaranteed) }}</span>
+                  <span class="text-xs text-[var(--brand)]">{{ fmtUsd(c.projected) }}</span>
+                </td>
+                <td class="bg-[var(--surface)] px-3 py-3 align-top text-left text-xs text-[var(--text-primary)]">
+                  <p v-if="row.highlightProjectedUsd != null" class="text-lg font-bold text-[var(--text-primary)]">
+                    {{ fmtUsd(row.highlightProjectedUsd) }}
+                  </p>
+                  <p v-if="row.highlightNote" class="mt-1 text-[10px] text-amber-800">
+                    {{ row.highlightNote }}
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <p v-if="row.footnote" class="border-t border-[var(--divider)] px-4 py-2 text-[10px] text-[var(--text-muted)]">
+          {{ row.footnote }}
+        </p>
+      </div>
+    </section>
+
+    <div class="rounded-xl border border-amber-200 bg-amber-50/50 p-4 text-sm">
+      <p class="font-semibold text-[var(--text-primary)]">Primas acumuladas pagadas (referencia)</p>
+      <div class="mt-2 flex flex-wrap gap-4 font-mono text-xs text-[var(--text-primary)]">
+        <span v-for="(p, i) in model.accumulatedPremiumsUsd" :key="i">Hito {{ i + 1 }}: {{ fmtUsd(p) }}</span>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900 text-white shadow-md">
+      <div class="border-b border-slate-700 px-5 py-2 text-sm font-semibold">Análisis del asesor</div>
+      <div class="grid gap-4 p-5 md:grid-cols-3">
+        <div
+          v-for="(col, i) in model.advisorColumns"
+          :key="i"
+          class="rounded-lg bg-[var(--surface)]/5 p-3 text-xs leading-relaxed text-[var(--text-muted)] opacity-50"
+        >
+          {{ col }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/quotes/auto/AcceptanceStep.vue b/app/components/quotes/auto/AcceptanceStep.vue
new file mode 100644
index 0000000..3a4a68a
--- /dev/null
+++ b/app/components/quotes/auto/AcceptanceStep.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import {
+  AUTO_COVERAGE_PLANS,
+  AUTO_MARCA_OPTIONS,
+  AUTO_MODELO_OPTIONS,
+  AUTO_QUOTE_CARRIERS,
+  AUTO_SUB_RAMO_OPTIONS
+} from '~/data/auto-quote-intake'
+import type { AutoQuoteDraft, AutoQuoteMode, AutoQuoteSegment } from '~/types/auto-quote-intake'
+
+const props = defineProps<{
+  draft: AutoQuoteDraft
+  quoteMode: AutoQuoteMode
+  segment: AutoQuoteSegment
+}>()
+
+function carrierName(id: string) {
+  return AUTO_QUOTE_CARRIERS.find((c) => c.id === id)?.name ?? id
+}
+
+function planLabel(id: string) {
+  return AUTO_COVERAGE_PLANS.find((p) => p.id === id)?.label ?? id
+}
+
+const segmentLabel: Record<AutoQuoteSegment, string> = {
+  individual: 'Individual',
+  corporate: 'Corporate',
+  fleet: 'Fleet'
+}
+
+const modeLabel: Record<AutoQuoteMode, string> = {
+  single: 'Single quote',
+  comparative_pdf: 'Comparative PDF'
+}
+
+function optLabel(opts: { label: string; value: string }[], v: string) {
+  if (!v) return '—'
+  return opts.find((o) => o.value === v)?.label ?? v
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <p class="text-sm text-[var(--text-muted)]">Review and send quote requests to carrier quoting inboxes.</p>
+    </div>
+
+    <div class="space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-5 ring-1 ring-black/[0.04]">
+      <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
+        <div>
+          <span class="text-[var(--text-muted)]">Intent</span>
+          <p class="font-medium text-[var(--text-primary)]">{{ modeLabel[quoteMode] }}</p>
+        </div>
+        <div>
+          <span class="text-[var(--text-muted)]">Policy type</span>
+          <p class="font-medium text-[var(--text-primary)]">{{ segmentLabel[segment] }}</p>
+        </div>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Client</p>
+        <dl class="mt-2 grid gap-2 text-sm sm:grid-cols-2">
+          <div>
+            <dt class="text-[var(--text-muted)]">Name</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.fullName || '—' }}</dd>
+          </div>
+          <div>
+            <dt class="text-[var(--text-muted)]">Email</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.email || '—' }}</dd>
+          </div>
+          <div>
+            <dt class="text-[var(--text-muted)]">Phone</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.phone || '—' }}</dd>
+          </div>
+          <div>
+            <dt class="text-[var(--text-muted)]">ID</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.documentId || '—' }}</dd>
+          </div>
+          <div v-if="draft.client.organizationName" class="sm:col-span-2">
+            <dt class="text-[var(--text-muted)]">Organization</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.organizationName }}</dd>
+          </div>
+        </dl>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Vehicle</p>
+        <p class="mt-2 text-sm text-[var(--text-primary)]">
+          {{ optLabel(AUTO_MARCA_OPTIONS, draft.vehicle.marca) }} {{ optLabel(AUTO_MODELO_OPTIONS, draft.vehicle.modelo) }}
+          · Plate {{ draft.vehicle.placa || '—' }} · {{ draft.vehicle.year || '—' }}
+        </p>
+        <p class="mt-1 text-xs text-[var(--text-muted)]">
+          Sub-line {{ optLabel(AUTO_SUB_RAMO_OPTIONS, draft.vehicle.subRamo) }}
+        </p>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
+        <ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
+          <li v-for="id in draft.solicit.carrierIds" :key="id">{{ carrierName(id) }}</li>
+          <li v-if="draft.solicit.carrierIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
+        </ul>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans</p>
+        <ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
+          <li v-for="id in draft.solicit.planIds" :key="id">{{ planLabel(id) }}</li>
+          <li v-if="draft.solicit.planIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
+        </ul>
+      </div>
+    </div>
+
+    <UAlert
+      color="neutral"
+      variant="soft"
+      title="What happens next"
+      description="We’ll send quote requests to each carrier’s registered quoting email (configured under Settings → Providers). For comparative quotes, coverage rows follow your selected plans; when you receive pricing by email, paste figures into the comparative view."
+    />
+  </div>
+</template>
diff --git a/app/components/quotes/auto/CustomerVehicleStep.vue b/app/components/quotes/auto/CustomerVehicleStep.vue
new file mode 100644
index 0000000..9a731d4
--- /dev/null
+++ b/app/components/quotes/auto/CustomerVehicleStep.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import {
+  AUTO_CLASE_OPTIONS,
+  AUTO_MARCA_OPTIONS,
+  AUTO_MODELO_OPTIONS,
+  AUTO_RAMO_LABEL,
+  AUTO_SUB_RAMO_OPTIONS,
+  AUTO_USO_OPTIONS,
+  AUTO_YEAR_OPTIONS
+} from '~/data/auto-quote-intake'
+import type { AutoQuoteDraft, AutoQuoteSegment } from '~/types/auto-quote-intake'
+
+const props = defineProps<{
+  draft: AutoQuoteDraft
+  /** Null until policy type is chosen — hides org field */
+  segment: AutoQuoteSegment | null
+}>()
+
+const showInterfaseBadge = computed(() => props.draft.vehicle.subRamo === 'cobertura_completa')
+
+const showOrganization = computed(
+  () => props.segment === 'corporate' || props.segment === 'fleet'
+)
+
+const inputPh =
+  'w-full placeholder:text-[var(--text-muted)] placeholder:opacity-[0.55] text-[var(--text-primary)]'
+</script>
+
+<template>
+  <div class="space-y-8">
+    <div>
+      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Client</h2>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">Contact on file for this quote — we’ll use it for status and carrier emails.</p>
+      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <UFormField label="Legal name" required>
+          <UInput v-model="draft.client.fullName" :class="inputPh" placeholder="As on government ID" />
+        </UFormField>
+        <UFormField label="Email" required>
+          <UInput
+            v-model="draft.client.email"
+            type="email"
+            autocomplete="email"
+            :class="inputPh"
+            placeholder="name@company.com"
+          />
+        </UFormField>
+        <UFormField label="Phone">
+          <UInput v-model="draft.client.phone" type="tel" :class="inputPh" placeholder="+593 …" />
+        </UFormField>
+        <UFormField label="Government ID">
+          <UInput v-model="draft.client.documentId" :class="inputPh" placeholder="Cédula, passport, or RUC" />
+        </UFormField>
+        <UFormField v-if="showOrganization" label="Organization" class="md:col-span-2">
+          <UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Company or fleet name" />
+        </UFormField>
+      </div>
+    </div>
+
+    <div class="border-t border-[var(--sidebar-border)] pt-8">
+      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Vehicle</h2>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">Risk details carriers use for auto rating.</p>
+
+      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <UFormField label="Line">
+          <UInput :model-value="AUTO_RAMO_LABEL" disabled class="w-full opacity-90" />
+        </UFormField>
+        <div class="relative pt-1">
+          <UBadge
+            v-if="showInterfaseBadge"
+            color="info"
+            variant="soft"
+            size="xs"
+            class="pointer-events-none absolute -top-0 right-0 z-[1]"
+          >
+            Interfase
+          </UBadge>
+          <UFormField label="Sub-line">
+            <USelect
+              v-model="draft.vehicle.subRamo"
+              :items="AUTO_SUB_RAMO_OPTIONS"
+              value-key="value"
+              label-key="label"
+              placeholder="Select one"
+              class="w-full"
+            />
+          </UFormField>
+        </div>
+        <UFormField label="Class">
+          <USelect
+            v-model="draft.vehicle.clase"
+            :items="AUTO_CLASE_OPTIONS"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="Use">
+          <USelect
+            v-model="draft.vehicle.uso"
+            :items="AUTO_USO_OPTIONS"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+
+      <p class="mb-4 mt-8 text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Vehicle details</p>
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <UFormField label="Make">
+          <USelect
+            v-model="draft.vehicle.marca"
+            :items="AUTO_MARCA_OPTIONS"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="Model">
+          <USelect
+            v-model="draft.vehicle.modelo"
+            :items="AUTO_MODELO_OPTIONS"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="License plate">
+          <UInput v-model="draft.vehicle.placa" :class="inputPh" class="font-mono uppercase" placeholder="ABC-1234" />
+        </UFormField>
+        <UFormField label="Year">
+          <USelect
+            v-model="draft.vehicle.year"
+            :items="AUTO_YEAR_OPTIONS"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="Capacity" description="Passengers">
+          <UInput v-model="draft.vehicle.capacidadPasajeros" :class="inputPh" inputmode="numeric" placeholder="—" />
+        </UFormField>
+        <UFormField label="Declared value" description="USD">
+          <UInput v-model="draft.vehicle.valorVehiculo" :class="inputPh" inputmode="decimal" placeholder="—" />
+        </UFormField>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/quotes/auto/SetupStep.vue b/app/components/quotes/auto/SetupStep.vue
new file mode 100644
index 0000000..bcf440d
--- /dev/null
+++ b/app/components/quotes/auto/SetupStep.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { AutoQuoteDraft, AutoQuoteMode, AutoQuoteSegment } from '~/types/auto-quote-intake'
+
+const props = defineProps<{
+  draft: AutoQuoteDraft
+  modeCards: { id: AutoQuoteMode; title: string; hint: string; icon: string }[]
+  segmentCards: { id: AutoQuoteSegment; title: string; hint: string; icon: string }[]
+}>()
+
+function setMode(m: AutoQuoteMode) {
+  props.draft.quoteMode = m
+}
+
+function setSegment(s: AutoQuoteSegment) {
+  props.draft.segment = s
+}
+
+/** Mount vehicle + selects after first paint — avoids blocking the main thread when the route opens */
+const showDetails = ref(false)
+onMounted(() => {
+  requestAnimationFrame(() => {
+    showDetails.value = true
+  })
+})
+</script>
+
+<template>
+  <div class="space-y-10">
+    <section class="space-y-4">
+      <div>
+        <h3 class="text-base font-semibold text-[var(--text-primary)]">How can I help?</h3>
+        <p class="mt-1 text-sm text-[var(--text-muted)]">Single quote or comparative — same workflow; comparative opens the comparison sheet after you send requests.</p>
+      </div>
+      <div class="grid gap-3 sm:grid-cols-2">
+        <button
+          v-for="card in modeCards"
+          :key="card.id"
+          type="button"
+          class="group rounded-xl border p-5 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+          :class="
+            draft.quoteMode === card.id
+              ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
+              : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
+          "
+          @click="setMode(card.id)"
+        >
+          <div class="flex items-start gap-3">
+            <div
+              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-faint)] text-[var(--brand)]"
+            >
+              <UIcon :name="card.icon" class="h-5 w-5" />
+            </div>
+            <div class="min-w-0">
+              <p class="font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
+              <p class="mt-1 text-sm text-[var(--text-muted)]">{{ card.hint }}</p>
+            </div>
+          </div>
+        </button>
+      </div>
+    </section>
+
+    <section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
+      <div>
+        <h3 class="text-base font-semibold text-[var(--text-primary)]">Policy type</h3>
+        <p class="mt-1 text-sm text-[var(--text-muted)]">Who is this policy for?</p>
+      </div>
+      <div class="grid gap-3 sm:grid-cols-3">
+        <button
+          v-for="card in segmentCards"
+          :key="card.id"
+          type="button"
+          class="rounded-xl border p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+          :class="
+            draft.segment === card.id
+              ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
+              : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
+          "
+          @click="setSegment(card.id)"
+        >
+          <UIcon :name="card.icon" class="h-7 w-7 text-[var(--brand)]" />
+          <p class="mt-2 font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
+          <p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ card.hint }}</p>
+        </button>
+      </div>
+    </section>
+
+    <section class="border-t border-[var(--sidebar-border)] pt-10">
+      <QuotesAutoCustomerVehicleStep v-if="showDetails" :draft="draft" :segment="draft.segment" />
+      <div
+        v-else
+        class="min-h-[14rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
+        aria-busy="true"
+        aria-label="Loading form"
+      />
+    </section>
+  </div>
+</template>
diff --git a/app/components/quotes/auto/SolicitQuotesStep.vue b/app/components/quotes/auto/SolicitQuotesStep.vue
new file mode 100644
index 0000000..3298ae1
--- /dev/null
+++ b/app/components/quotes/auto/SolicitQuotesStep.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { AUTO_COVERAGE_PLANS, AUTO_QUOTE_CARRIERS } from '~/data/auto-quote-intake'
+import type { AutoQuoteDraft, AutoQuoteMode } from '~/types/auto-quote-intake'
+
+const props = defineProps<{
+  draft: AutoQuoteDraft
+  quoteMode: AutoQuoteMode
+}>()
+
+function setCarrier(id: string, checked: boolean) {
+  const xs = props.draft.solicit.carrierIds
+  if (checked && !xs.includes(id)) xs.push(id)
+  if (!checked) {
+    const i = xs.indexOf(id)
+    if (i !== -1) xs.splice(i, 1)
+  }
+}
+
+function carrierChecked(id: string) {
+  return props.draft.solicit.carrierIds.includes(id)
+}
+
+function setPlan(id: string, checked: boolean) {
+  const xs = props.draft.solicit.planIds
+  if (checked && !xs.includes(id)) xs.push(id)
+  if (!checked) {
+    const i = xs.indexOf(id)
+    if (i !== -1) xs.splice(i, 1)
+  }
+}
+
+function planChecked(id: string) {
+  return props.draft.solicit.planIds.includes(id)
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <p class="text-sm text-[var(--text-muted)]">
+        Choose carriers (quoting emails are maintained per provider in Settings). Pick coverage packages to request.
+      </p>
+      <UAlert
+        v-if="quoteMode === 'comparative_pdf'"
+        color="info"
+        variant="soft"
+        class="mt-4"
+        title="Comparative quote"
+        description="We’ll prepare side-by-side comparisons using your predetermined plans. When premiums arrive by email, you can enter them into the comparative sheet."
+      />
+      <UAlert
+        v-else
+        color="neutral"
+        variant="soft"
+        class="mt-4"
+        title="Single quote"
+        description="We’ll email each selected carrier’s quoting address on file. Attach the same vehicle and coverage ask in each request."
+      />
+    </div>
+
+    <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
+      <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Insurance companies</p>
+      <ul class="mt-3 divide-y divide-[var(--sidebar-border)]">
+        <li
+          v-for="c in AUTO_QUOTE_CARRIERS"
+          :key="c.id"
+          class="flex flex-wrap items-start justify-between gap-3 py-3 first:pt-0"
+        >
+          <UCheckbox
+            :model-value="carrierChecked(c.id)"
+            :label="c.name"
+            @update:model-value="(v: boolean) => setCarrier(c.id, v)"
+          />
+          <span class="text-xs text-[var(--text-muted)]">{{ c.detail }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
+      <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Coverages / plans</p>
+      <ul class="mt-3 space-y-3">
+        <li
+          v-for="p in AUTO_COVERAGE_PLANS"
+          :key="p.id"
+          class="flex flex-col gap-1 rounded-lg border border-[var(--sidebar-border)]/80 bg-[var(--page-bg)]/50 p-3 sm:flex-row sm:items-center sm:justify-between"
+        >
+          <UCheckbox
+            :model-value="planChecked(p.id)"
+            :label="p.label"
+            @update:model-value="(v: boolean) => setPlan(p.id, v)"
+          />
+          <span class="text-xs text-[var(--text-muted)] sm:text-right">{{ p.hint }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/components/quotes/health/AcceptanceStep.vue b/app/components/quotes/health/AcceptanceStep.vue
new file mode 100644
index 0000000..57d0160
--- /dev/null
+++ b/app/components/quotes/health/AcceptanceStep.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { HEALTH_COVERAGE_PLANS, HEALTH_QUOTE_CARRIERS } from '~/data/health-quote-intake'
+import type { HealthQuoteDraft, HealthQuoteMode, HealthQuoteSegment } from '~/types/health-quote-intake'
+
+const props = defineProps<{
+  draft: HealthQuoteDraft
+  quoteMode: HealthQuoteMode
+  segment: HealthQuoteSegment
+}>()
+
+const { quoteRequestEmailEnabled } = useQuoteRequestEmailEnabled()
+
+function carrierName(id: string) {
+  return HEALTH_QUOTE_CARRIERS.find((c) => c.id === id)?.name ?? id
+}
+
+function planLabel(id: string) {
+  return HEALTH_COVERAGE_PLANS.find((p) => p.id === id)?.label ?? id
+}
+
+const segmentLabel: Record<HealthQuoteSegment, string> = {
+  individual: 'Individual',
+  corporate: 'Corporate',
+  group: 'Group'
+}
+
+const modeLabel: Record<HealthQuoteMode, string> = {
+  single: 'Single quote',
+  comparative_pdf: 'Comparative PDF'
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <p class="text-sm text-[var(--text-muted)]">Review the health quote request before sending or saving.</p>
+    </div>
+
+    <UAlert
+      v-if="!quoteRequestEmailEnabled"
+      color="warning"
+      variant="soft"
+      title="Provider emails are turned off"
+      description="Settings → Quote requests: outbound emails disabled. This run saves the request locally (or uses table / AI pricing when connected) without emailing carriers."
+    />
+
+    <div class="space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-5 ring-1 ring-black/[0.04]">
+      <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
+        <div>
+          <span class="text-[var(--text-muted)]">Intent</span>
+          <p class="font-medium text-[var(--text-primary)]">{{ modeLabel[quoteMode] }}</p>
+        </div>
+        <div>
+          <span class="text-[var(--text-muted)]">Policy type</span>
+          <p class="font-medium text-[var(--text-primary)]">{{ segmentLabel[segment] }}</p>
+        </div>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Subscriber</p>
+        <dl class="mt-2 grid gap-2 text-sm sm:grid-cols-2">
+          <div>
+            <dt class="text-[var(--text-muted)]">Name</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.fullName || '—' }}</dd>
+          </div>
+          <div>
+            <dt class="text-[var(--text-muted)]">Email</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.email || '—' }}</dd>
+          </div>
+          <div v-if="draft.client.organizationName" class="sm:col-span-2">
+            <dt class="text-[var(--text-muted)]">Organization</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.organizationName }}</dd>
+          </div>
+        </dl>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Age & health</p>
+        <dl class="mt-2 grid gap-2 text-sm sm:grid-cols-3">
+          <div>
+            <dt class="text-[var(--text-muted)]">Age</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.health.age || '—' }}</dd>
+          </div>
+          <div v-if="draft.health.preexistingConditions" class="sm:col-span-2">
+            <dt class="text-[var(--text-muted)]">Preexisting conditions</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.health.preexistingDetails || 'Yes (no details provided)' }}</dd>
+          </div>
+        </dl>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Coverage</p>
+        <p class="mt-2 text-sm text-[var(--text-primary)]">
+          Area {{ draft.health.coverageArea || '—' }} · Network {{ draft.health.networkTier || '—' }} · Deductible
+          {{ draft.health.deductible || '—' }}
+        </p>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
+        <ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
+          <li v-for="id in draft.solicit.carrierIds" :key="id">{{ carrierName(id) }}</li>
+          <li v-if="draft.solicit.carrierIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
+        </ul>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans</p>
+        <ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
+          <li v-for="id in draft.solicit.planIds" :key="id">{{ planLabel(id) }}</li>
+          <li v-if="draft.solicit.planIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
+        </ul>
+      </div>
+    </div>
+
+    <UAlert
+      color="neutral"
+      variant="soft"
+      title="What happens next"
+      :description="
+        quoteRequestEmailEnabled
+          ? 'We can queue emails to each carrier’s quoting address on file (Settings → Providers), unless your tenant uses published tables or AI instead.'
+          : 'No outbound provider emails for this tenant — capture the request here and price via tables, APIs, or agentic workflows.'
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/quotes/health/SetupStep.vue b/app/components/quotes/health/SetupStep.vue
new file mode 100644
index 0000000..d6778e2
--- /dev/null
+++ b/app/components/quotes/health/SetupStep.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import {
+  HEALTH_AGE_BAND_REFERENCE,
+  HEALTH_COVERAGE_AREA,
+  HEALTH_DEDUCTIBLE,
+  HEALTH_NETWORK_TIER,
+  HEALTH_QUOTE_CARRIERS
+} from '~/data/health-quote-intake'
+import type { HealthQuoteDraft, HealthQuoteMode, HealthQuoteSegment } from '~/types/health-quote-intake'
+
+const props = defineProps<{
+  draft: HealthQuoteDraft
+  modeCards: { id: HealthQuoteMode; title: string; hint: string; icon: string }[]
+  segmentCards: { id: HealthQuoteSegment; title: string; hint: string; icon: string }[]
+}>()
+
+function setMode(m: HealthQuoteMode) {
+  props.draft.quoteMode = m
+}
+
+function setSegment(s: HealthQuoteSegment) {
+  props.draft.segment = s
+}
+
+const showPublishedTable = computed(() =>
+  HEALTH_QUOTE_CARRIERS.some((c) => c.hasPublishedRateTable)
+)
+
+const inputPh =
+  'w-full placeholder:text-[var(--text-muted)] placeholder:opacity-[0.55] text-[var(--text-primary)]'
+
+const showOrganization = computed(
+  () => props.draft.segment === 'corporate' || props.draft.segment === 'group'
+)
+
+/** Compute age from date of birth */
+watch(
+  () => props.draft.health.dateOfBirth,
+  (dob) => {
+    if (!dob) {
+      props.draft.health.age = ''
+      return
+    }
+    const birth = new Date(dob)
+    const today = new Date()
+    let age = today.getFullYear() - birth.getFullYear()
+    const m = today.getMonth() - birth.getMonth()
+    if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--
+    props.draft.health.age = String(age)
+  }
+)
+
+const showDetails = ref(false)
+onMounted(() => {
+  requestAnimationFrame(() => {
+    showDetails.value = true
+  })
+})
+</script>
+
+<template>
+  <div class="space-y-10">
+    <section class="space-y-4">
+      <div>
+        <h3 class="text-base font-semibold text-[var(--text-primary)]">How can I help?</h3>
+        <p class="mt-1 text-sm text-[var(--text-muted)]">Single quote or comparative PDF — same steps; comparative opens the comparison sheet after acceptance.</p>
+      </div>
+      <div class="grid gap-3 sm:grid-cols-2">
+        <button
+          v-for="card in modeCards"
+          :key="card.id"
+          type="button"
+          class="group rounded-xl border p-5 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+          :class="
+            draft.quoteMode === card.id
+              ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
+              : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
+          "
+          @click="setMode(card.id)"
+        >
+          <div class="flex items-start gap-3">
+            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-faint)] text-[var(--brand)]">
+              <UIcon :name="card.icon" class="h-5 w-5" />
+            </div>
+            <div class="min-w-0">
+              <p class="font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
+              <p class="mt-1 text-sm text-[var(--text-muted)]">{{ card.hint }}</p>
+            </div>
+          </div>
+        </button>
+      </div>
+    </section>
+
+    <section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
+      <div>
+        <h3 class="text-base font-semibold text-[var(--text-primary)]">Policy type</h3>
+        <p class="mt-1 text-sm text-[var(--text-muted)]">Individual, employer corporate, or group policy.</p>
+      </div>
+      <div class="grid gap-3 sm:grid-cols-3">
+        <button
+          v-for="card in segmentCards"
+          :key="card.id"
+          type="button"
+          class="rounded-xl border p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+          :class="
+            draft.segment === card.id
+              ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
+              : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
+          "
+          @click="setSegment(card.id)"
+        >
+          <UIcon :name="card.icon" class="h-7 w-7 text-[var(--brand)]" />
+          <p class="mt-2 font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
+          <p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ card.hint }}</p>
+        </button>
+      </div>
+    </section>
+
+    <section v-if="showDetails" class="border-t border-[var(--sidebar-border)] pt-10">
+      <h3 class="text-base font-semibold text-[var(--text-primary)]">Subscriber & contact</h3>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">Primary insured and notification email.</p>
+      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <UFormField label="Legal name" required>
+          <UInput v-model="draft.client.fullName" :class="inputPh" placeholder="As on ID" />
+        </UFormField>
+        <UFormField label="Email" required>
+          <UInput v-model="draft.client.email" type="email" :class="inputPh" placeholder="name@company.com" />
+        </UFormField>
+        <UFormField label="Phone">
+          <UInput v-model="draft.client.phone" :class="inputPh" placeholder="+593 …" />
+        </UFormField>
+        <UFormField label="Government ID">
+          <UInput v-model="draft.client.documentId" :class="inputPh" placeholder="ID or RUC" />
+        </UFormField>
+        <UFormField v-if="showOrganization" label="Organization / group name" class="md:col-span-2" required>
+          <UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Employer or group trust" />
+        </UFormField>
+      </div>
+
+      <h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Age & health screening</h3>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">Basic information carriers use for eligibility and rate bands.</p>
+      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
+        <UFormField label="Date of birth" required>
+          <UInput v-model="draft.health.dateOfBirth" type="date" :class="inputPh" />
+        </UFormField>
+        <UFormField label="Age">
+          <UInput :model-value="draft.health.age" disabled :class="inputPh" placeholder="Auto-calculated" />
+        </UFormField>
+        <div />
+      </div>
+      <div class="mt-5 space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
+        <UCheckbox v-model="draft.health.preexistingConditions" label="Preexisting medical conditions" />
+        <div v-if="draft.health.preexistingConditions" class="ml-6">
+          <UFormField label="Describe conditions" hint="Diabetes, hypertension, cardiac history, etc.">
+            <UTextarea
+              v-model="draft.health.preexistingDetails"
+              :class="inputPh"
+              placeholder="List conditions and approximate diagnosis dates"
+              :rows="3"
+            />
+          </UFormField>
+        </div>
+      </div>
+
+      <h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Coverage intent</h3>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">Product parameters carriers use before underwriting.</p>
+      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
+        <UFormField label="Coverage area">
+          <USelect
+            v-model="draft.health.coverageArea"
+            :items="HEALTH_COVERAGE_AREA"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="Network tier">
+          <USelect
+            v-model="draft.health.networkTier"
+            :items="HEALTH_NETWORK_TIER"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="Deductible preference">
+          <USelect
+            v-model="draft.health.deductible"
+            :items="HEALTH_DEDUCTIBLE"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+
+      <h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Forms</h3>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">
+        Confirm required templates are completed (uploads wire to the forms library later).
+      </p>
+      <div class="mt-4 space-y-3 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
+        <UCheckbox v-model="draft.forms.medicalQuestionnaire" label="Medical questionnaire (declaración de salud)" />
+        <UCheckbox v-model="draft.forms.beneficiaryDesignation" label="Beneficiary designation" />
+        <UCheckbox
+          v-model="draft.forms.groupCensus"
+          label="Group census / employee roster (required for group policies)"
+          :disabled="draft.segment !== 'group'"
+        />
+      </div>
+
+      <div v-if="showPublishedTable" class="mt-10">
+        <h3 class="text-base font-semibold text-[var(--text-primary)]">Published rate reference (age bands)</h3>
+        <p class="mt-1 text-sm text-[var(--text-muted)]">
+          Some carriers publish indicative premiums by age band. Use as a guide; final quotes may still require
+          underwriting. When your tenant uses table pricing or AI instead of email, turn off outbound emails under
+          Settings → Quote requests.
+        </p>
+        <div class="mt-4 overflow-x-auto rounded-xl border border-[var(--sidebar-border)]">
+          <table class="min-w-full text-left text-sm text-[var(--text-primary)]">
+            <thead class="bg-[var(--page-bg)] text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">
+              <tr>
+                <th class="px-3 py-2">Age band</th>
+                <th class="px-3 py-2">Employee</th>
+                <th class="px-3 py-2">Spouse</th>
+                <th class="px-3 py-2">Child</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="row in HEALTH_AGE_BAND_REFERENCE" :key="row.ageBand" class="border-t border-[var(--sidebar-border)]">
+                <td class="px-3 py-2 font-medium">{{ row.ageBand }}</td>
+                <td class="px-3 py-2">${{ row.employee }}</td>
+                <td class="px-3 py-2">${{ row.spouse }}</td>
+                <td class="px-3 py-2">${{ row.children }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+    <div
+      v-else
+      class="mt-10 min-h-[8rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
+      aria-busy="true"
+      aria-label="Loading"
+    />
+  </div>
+</template>
diff --git a/app/components/quotes/health/SolicitQuotesStep.vue b/app/components/quotes/health/SolicitQuotesStep.vue
new file mode 100644
index 0000000..3f3f5c6
--- /dev/null
+++ b/app/components/quotes/health/SolicitQuotesStep.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { HEALTH_COVERAGE_PLANS, HEALTH_QUOTE_CARRIERS } from '~/data/health-quote-intake'
+import type { HealthQuoteDraft, HealthQuoteMode } from '~/types/health-quote-intake'
+
+const props = defineProps<{
+  draft: HealthQuoteDraft
+  quoteMode: HealthQuoteMode
+}>()
+
+function setCarrier(id: string, checked: boolean) {
+  const xs = props.draft.solicit.carrierIds
+  if (checked && !xs.includes(id)) xs.push(id)
+  if (!checked) {
+    const i = xs.indexOf(id)
+    if (i !== -1) xs.splice(i, 1)
+  }
+}
+
+function carrierChecked(id: string) {
+  return props.draft.solicit.carrierIds.includes(id)
+}
+
+function setPlan(id: string, checked: boolean) {
+  const xs = props.draft.solicit.planIds
+  if (checked && !xs.includes(id)) xs.push(id)
+  if (!checked) {
+    const i = xs.indexOf(id)
+    if (i !== -1) xs.splice(i, 1)
+  }
+}
+
+function planChecked(id: string) {
+  return props.draft.solicit.planIds.includes(id)
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <p class="text-sm text-[var(--text-muted)]">
+        Choose carriers and product shells to request. Quoting contacts live per provider in Settings.
+      </p>
+      <UAlert
+        v-if="quoteMode === 'comparative_pdf'"
+        color="info"
+        variant="soft"
+        class="mt-4"
+        title="Comparative quote"
+        description="We’ll align columns to your selected plan mix. Enter premiums from email, rate tables, or AI-assisted pricing when available."
+      />
+      <UAlert v-else color="neutral" variant="soft" class="mt-4" title="Single quote" description="We’ll package one request per carrier with the same subscriber and coverage intent." />
+    </div>
+
+    <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
+      <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
+      <ul class="mt-3 divide-y divide-[var(--sidebar-border)]">
+        <li
+          v-for="c in HEALTH_QUOTE_CARRIERS"
+          :key="c.id"
+          class="flex flex-wrap items-start justify-between gap-3 py-3 first:pt-0"
+        >
+          <UCheckbox
+            :model-value="carrierChecked(c.id)"
+            :label="c.name"
+            @update:model-value="(v: boolean) => setCarrier(c.id, v)"
+          />
+          <span class="text-xs text-[var(--text-muted)]">{{ c.detail }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
+      <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans / benefit shells</p>
+      <ul class="mt-3 space-y-3">
+        <li
+          v-for="p in HEALTH_COVERAGE_PLANS"
+          :key="p.id"
+          class="flex flex-col gap-1 rounded-lg border border-[var(--sidebar-border)]/80 bg-[var(--page-bg)]/50 p-3 sm:flex-row sm:items-center sm:justify-between"
+        >
+          <UCheckbox
+            :model-value="planChecked(p.id)"
+            :label="p.label"
+            @update:model-value="(v: boolean) => setPlan(p.id, v)"
+          />
+          <span class="text-xs text-[var(--text-muted)] sm:text-right">{{ p.hint }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/components/quotes/life/AcceptanceStep.vue b/app/components/quotes/life/AcceptanceStep.vue
new file mode 100644
index 0000000..8ecefcc
--- /dev/null
+++ b/app/components/quotes/life/AcceptanceStep.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { LIFE_COVERAGE_PLANS, LIFE_QUOTE_CARRIERS } from '~/data/life-quote-intake'
+import type { LifeQuoteDraft, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake'
+
+const props = defineProps<{
+  draft: LifeQuoteDraft
+  quoteMode: LifeQuoteMode
+  segment: LifeQuoteSegment
+}>()
+
+const { quoteRequestEmailEnabled } = useQuoteRequestEmailEnabled()
+
+function carrierName(id: string) {
+  return LIFE_QUOTE_CARRIERS.find((c) => c.id === id)?.name ?? id
+}
+
+function planLabel(id: string) {
+  return LIFE_COVERAGE_PLANS.find((p) => p.id === id)?.label ?? id
+}
+
+const segmentLabel: Record<LifeQuoteSegment, string> = {
+  individual: 'Individual',
+  corporate_keyman: 'Corporate / Key person',
+  group: 'Group'
+}
+
+const modeLabel: Record<LifeQuoteMode, string> = {
+  single: 'Single quote',
+  comparative_pdf: 'Comparative PDF'
+}
+
+function formatAmount(val: string) {
+  const n = Number(val)
+  if (!n) return val || '—'
+  return '$' + n.toLocaleString()
+}
+
+function termLabel(val: string) {
+  if (val === 'whole') return 'Whole life'
+  return val ? `${val} years` : '—'
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <p class="text-sm text-[var(--text-muted)]">Review the life quote request before sending or saving.</p>
+    </div>
+
+    <UAlert
+      v-if="!quoteRequestEmailEnabled"
+      color="warning"
+      variant="soft"
+      title="Provider emails are turned off"
+      description="Settings -> Quote requests: outbound emails disabled. This run saves the request locally (or uses table / AI pricing when connected) without emailing carriers."
+    />
+
+    <div class="space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-5 ring-1 ring-black/[0.04]">
+      <div class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
+        <div>
+          <span class="text-[var(--text-muted)]">Intent</span>
+          <p class="font-medium text-[var(--text-primary)]">{{ modeLabel[quoteMode] }}</p>
+        </div>
+        <div>
+          <span class="text-[var(--text-muted)]">Policy type</span>
+          <p class="font-medium text-[var(--text-primary)]">{{ segmentLabel[segment] }}</p>
+        </div>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Insured person</p>
+        <dl class="mt-2 grid gap-2 text-sm sm:grid-cols-2">
+          <div>
+            <dt class="text-[var(--text-muted)]">Name</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.fullName || '—' }}</dd>
+          </div>
+          <div>
+            <dt class="text-[var(--text-muted)]">Email</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.email || '—' }}</dd>
+          </div>
+          <div v-if="draft.client.organizationName" class="sm:col-span-2">
+            <dt class="text-[var(--text-muted)]">Organization</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.client.organizationName }}</dd>
+          </div>
+        </dl>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Age & health</p>
+        <dl class="mt-2 grid gap-2 text-sm sm:grid-cols-3">
+          <div>
+            <dt class="text-[var(--text-muted)]">Age</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.life.age || '—' }}</dd>
+          </div>
+          <div>
+            <dt class="text-[var(--text-muted)]">Gender</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.life.gender || '—' }}</dd>
+          </div>
+          <div>
+            <dt class="text-[var(--text-muted)]">Smoker</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.life.smoker ? 'Yes' : 'No' }}</dd>
+          </div>
+          <div v-if="draft.life.preexistingConditions" class="sm:col-span-3">
+            <dt class="text-[var(--text-muted)]">Preexisting conditions</dt>
+            <dd class="font-medium text-[var(--text-primary)]">{{ draft.life.preexistingDetails || 'Yes (no details provided)' }}</dd>
+          </div>
+        </dl>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Coverage</p>
+        <p class="mt-2 text-sm text-[var(--text-primary)]">
+          {{ formatAmount(draft.life.coverageAmount) }} · {{ termLabel(draft.life.coverageTerm) }}
+        </p>
+        <p v-if="draft.life.beneficiaryName" class="mt-1 text-sm text-[var(--text-muted)]">
+          Beneficiary: {{ draft.life.beneficiaryName }}
+          <span v-if="draft.life.beneficiaryRelationship"> ({{ draft.life.beneficiaryRelationship }})</span>
+        </p>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
+        <ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
+          <li v-for="id in draft.solicit.carrierIds" :key="id">{{ carrierName(id) }}</li>
+          <li v-if="draft.solicit.carrierIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
+        </ul>
+      </div>
+
+      <div class="border-t border-[var(--sidebar-border)] pt-4">
+        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans</p>
+        <ul class="mt-2 list-inside list-disc text-sm text-[var(--text-primary)]">
+          <li v-for="id in draft.solicit.planIds" :key="id">{{ planLabel(id) }}</li>
+          <li v-if="draft.solicit.planIds.length === 0" class="list-none text-[var(--text-muted)]">None selected</li>
+        </ul>
+      </div>
+    </div>
+
+    <UAlert
+      color="neutral"
+      variant="soft"
+      title="What happens next"
+      :description="
+        quoteRequestEmailEnabled
+          ? 'We can queue emails to each carrier\'s quoting address on file (Settings -> Providers), unless your tenant uses published tables or AI instead.'
+          : 'No outbound provider emails for this tenant — capture the request here and price via tables, APIs, or agentic workflows.'
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/quotes/life/SetupStep.vue b/app/components/quotes/life/SetupStep.vue
new file mode 100644
index 0000000..6dee215
--- /dev/null
+++ b/app/components/quotes/life/SetupStep.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import {
+  LIFE_GENDER_OPTIONS,
+  LIFE_COVERAGE_TERM_OPTIONS,
+  LIFE_COVERAGE_AMOUNT_OPTIONS,
+  LIFE_BENEFICIARY_RELATIONSHIP_OPTIONS
+} from '~/data/life-quote-intake'
+import type { LifeQuoteDraft, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake'
+
+const props = defineProps<{
+  draft: LifeQuoteDraft
+  modeCards: { id: LifeQuoteMode; title: string; hint: string; icon: string }[]
+  segmentCards: { id: LifeQuoteSegment; title: string; hint: string; icon: string }[]
+}>()
+
+function setMode(m: LifeQuoteMode) {
+  props.draft.quoteMode = m
+}
+
+function setSegment(s: LifeQuoteSegment) {
+  props.draft.segment = s
+}
+
+const inputPh =
+  'w-full placeholder:text-[var(--text-muted)] placeholder:opacity-[0.55] text-[var(--text-primary)]'
+
+const showOrganization = computed(
+  () => props.draft.segment === 'corporate_keyman' || props.draft.segment === 'group'
+)
+
+/** Compute age from date of birth */
+watch(
+  () => props.draft.life.dateOfBirth,
+  (dob) => {
+    if (!dob) {
+      props.draft.life.age = ''
+      return
+    }
+    const birth = new Date(dob)
+    const today = new Date()
+    let age = today.getFullYear() - birth.getFullYear()
+    const m = today.getMonth() - birth.getMonth()
+    if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--
+    props.draft.life.age = String(age)
+  }
+)
+
+const showDetails = ref(false)
+onMounted(() => {
+  requestAnimationFrame(() => {
+    showDetails.value = true
+  })
+})
+</script>
+
+<template>
+  <div class="space-y-10">
+    <section class="space-y-4">
+      <div>
+        <h3 class="text-base font-semibold text-[var(--text-primary)]">How can I help?</h3>
+        <p class="mt-1 text-sm text-[var(--text-muted)]">Single quote or comparative PDF — same steps; comparative opens the comparison sheet after acceptance.</p>
+      </div>
+      <div class="grid gap-3 sm:grid-cols-2">
+        <button
+          v-for="card in modeCards"
+          :key="card.id"
+          type="button"
+          class="group rounded-xl border p-5 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+          :class="
+            draft.quoteMode === card.id
+              ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
+              : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
+          "
+          @click="setMode(card.id)"
+        >
+          <div class="flex items-start gap-3">
+            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-faint)] text-[var(--brand)]">
+              <UIcon :name="card.icon" class="h-5 w-5" />
+            </div>
+            <div class="min-w-0">
+              <p class="font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
+              <p class="mt-1 text-sm text-[var(--text-muted)]">{{ card.hint }}</p>
+            </div>
+          </div>
+        </button>
+      </div>
+    </section>
+
+    <section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
+      <div>
+        <h3 class="text-base font-semibold text-[var(--text-primary)]">Policy type</h3>
+        <p class="mt-1 text-sm text-[var(--text-muted)]">Individual, corporate / key person, or group policy.</p>
+      </div>
+      <div class="grid gap-3 sm:grid-cols-3">
+        <button
+          v-for="card in segmentCards"
+          :key="card.id"
+          type="button"
+          class="rounded-xl border p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+          :class="
+            draft.segment === card.id
+              ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
+              : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
+          "
+          @click="setSegment(card.id)"
+        >
+          <UIcon :name="card.icon" class="h-7 w-7 text-[var(--brand)]" />
+          <p class="mt-2 font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
+          <p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ card.hint }}</p>
+        </button>
+      </div>
+    </section>
+
+    <section v-if="showDetails" class="border-t border-[var(--sidebar-border)] pt-10">
+      <!-- Insured basic info -->
+      <h3 class="text-base font-semibold text-[var(--text-primary)]">Insured person</h3>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">Primary insured and notification email.</p>
+      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <UFormField label="Legal name" required>
+          <UInput v-model="draft.client.fullName" :class="inputPh" placeholder="As on ID" />
+        </UFormField>
+        <UFormField label="Email" required>
+          <UInput v-model="draft.client.email" type="email" :class="inputPh" placeholder="name@company.com" />
+        </UFormField>
+        <UFormField label="Phone">
+          <UInput v-model="draft.client.phone" :class="inputPh" placeholder="+593 ..." />
+        </UFormField>
+        <UFormField label="Government ID">
+          <UInput v-model="draft.client.documentId" :class="inputPh" placeholder="ID or RUC" />
+        </UFormField>
+        <UFormField v-if="showOrganization" label="Organization / group name" class="md:col-span-2" required>
+          <UInput v-model="draft.client.organizationName" :class="inputPh" placeholder="Employer or group trust" />
+        </UFormField>
+      </div>
+
+      <!-- Age & health screening -->
+      <h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Age & health screening</h3>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">Basic underwriting inputs — carriers use these to determine eligibility and rate class.</p>
+      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-3">
+        <UFormField label="Date of birth" required>
+          <UInput v-model="draft.life.dateOfBirth" type="date" :class="inputPh" />
+        </UFormField>
+        <UFormField label="Age">
+          <UInput :model-value="draft.life.age" disabled :class="inputPh" placeholder="Auto-calculated" />
+        </UFormField>
+        <UFormField label="Gender" required>
+          <USelect
+            v-model="draft.life.gender"
+            :items="LIFE_GENDER_OPTIONS"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+      <div class="mt-5 space-y-4 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
+        <UCheckbox v-model="draft.life.smoker" label="Smoker / tobacco user (within last 12 months)" />
+        <UCheckbox v-model="draft.life.preexistingConditions" label="Preexisting medical conditions" />
+        <div v-if="draft.life.preexistingConditions" class="ml-6">
+          <UFormField label="Describe conditions" hint="Diabetes, hypertension, cardiac history, etc.">
+            <UTextarea
+              v-model="draft.life.preexistingDetails"
+              :class="inputPh"
+              placeholder="List conditions and approximate diagnosis dates"
+              :rows="3"
+            />
+          </UFormField>
+        </div>
+      </div>
+
+      <!-- Coverage parameters -->
+      <h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Coverage intent</h3>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">Sum assured, term, and beneficiary details.</p>
+      <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
+        <UFormField label="Coverage amount" required>
+          <USelect
+            v-model="draft.life.coverageAmount"
+            :items="LIFE_COVERAGE_AMOUNT_OPTIONS"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="Coverage term" required>
+          <USelect
+            v-model="draft.life.coverageTerm"
+            :items="LIFE_COVERAGE_TERM_OPTIONS"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="Beneficiary name">
+          <UInput v-model="draft.life.beneficiaryName" :class="inputPh" placeholder="Full legal name" />
+        </UFormField>
+        <UFormField label="Beneficiary relationship">
+          <USelect
+            v-model="draft.life.beneficiaryRelationship"
+            :items="LIFE_BENEFICIARY_RELATIONSHIP_OPTIONS"
+            value-key="value"
+            label-key="label"
+            placeholder="Select one"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+
+      <!-- Forms -->
+      <h3 class="mt-10 text-base font-semibold text-[var(--text-primary)]">Forms</h3>
+      <p class="mt-1 text-sm text-[var(--text-muted)]">
+        Confirm required templates are completed (uploads wire to the forms library later).
+      </p>
+      <div class="mt-4 space-y-3 rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
+        <UCheckbox v-model="draft.forms.medicalQuestionnaire" label="Medical questionnaire (declaracion de salud)" />
+        <UCheckbox v-model="draft.forms.beneficiaryDesignation" label="Beneficiary designation form" />
+        <UCheckbox
+          v-model="draft.forms.groupCensus"
+          label="Group census / employee roster (required for group policies)"
+          :disabled="draft.segment !== 'group'"
+        />
+      </div>
+    </section>
+    <div
+      v-else
+      class="mt-10 min-h-[8rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
+      aria-busy="true"
+      aria-label="Loading"
+    />
+  </div>
+</template>
diff --git a/app/components/quotes/life/SolicitQuotesStep.vue b/app/components/quotes/life/SolicitQuotesStep.vue
new file mode 100644
index 0000000..555c91e
--- /dev/null
+++ b/app/components/quotes/life/SolicitQuotesStep.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { LIFE_COVERAGE_PLANS, LIFE_QUOTE_CARRIERS } from '~/data/life-quote-intake'
+import type { LifeQuoteDraft, LifeQuoteMode } from '~/types/life-quote-intake'
+
+const props = defineProps<{
+  draft: LifeQuoteDraft
+  quoteMode: LifeQuoteMode
+}>()
+
+function setCarrier(id: string, checked: boolean) {
+  const xs = props.draft.solicit.carrierIds
+  if (checked && !xs.includes(id)) xs.push(id)
+  if (!checked) {
+    const i = xs.indexOf(id)
+    if (i !== -1) xs.splice(i, 1)
+  }
+}
+
+function carrierChecked(id: string) {
+  return props.draft.solicit.carrierIds.includes(id)
+}
+
+function setPlan(id: string, checked: boolean) {
+  const xs = props.draft.solicit.planIds
+  if (checked && !xs.includes(id)) xs.push(id)
+  if (!checked) {
+    const i = xs.indexOf(id)
+    if (i !== -1) xs.splice(i, 1)
+  }
+}
+
+function planChecked(id: string) {
+  return props.draft.solicit.planIds.includes(id)
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <div>
+      <p class="text-sm text-[var(--text-muted)]">
+        Choose carriers and plan shells to request. Quoting contacts live per provider in Settings.
+      </p>
+      <UAlert
+        v-if="quoteMode === 'comparative_pdf'"
+        color="info"
+        variant="soft"
+        class="mt-4"
+        title="Comparative quote"
+        description="We'll align columns to your selected plan mix. Enter premiums from email, rate tables, or AI-assisted pricing when available."
+      />
+      <UAlert v-else color="neutral" variant="soft" class="mt-4" title="Single quote" description="We'll package one request per carrier with the same insured and coverage intent." />
+    </div>
+
+    <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
+      <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Carriers</p>
+      <ul class="mt-3 divide-y divide-[var(--sidebar-border)]">
+        <li
+          v-for="c in LIFE_QUOTE_CARRIERS"
+          :key="c.id"
+          class="flex flex-wrap items-start justify-between gap-3 py-3 first:pt-0"
+        >
+          <UCheckbox
+            :model-value="carrierChecked(c.id)"
+            :label="c.name"
+            @update:model-value="(v: boolean) => setCarrier(c.id, v)"
+          />
+          <span class="text-xs text-[var(--text-muted)]">{{ c.detail }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/[0.04]">
+      <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">Plans / coverage shells</p>
+      <ul class="mt-3 space-y-3">
+        <li
+          v-for="p in LIFE_COVERAGE_PLANS"
+          :key="p.id"
+          class="flex flex-col gap-1 rounded-lg border border-[var(--sidebar-border)]/80 bg-[var(--page-bg)]/50 p-3 sm:flex-row sm:items-center sm:justify-between"
+        >
+          <UCheckbox
+            :model-value="planChecked(p.id)"
+            :label="p.label"
+            @update:model-value="(v: boolean) => setPlan(p.id, v)"
+          />
+          <span class="text-xs text-[var(--text-muted)] sm:text-right">{{ p.hint }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/components/sales/SalesFlowIndicator.vue b/app/components/sales/SalesFlowIndicator.vue
new file mode 100644
index 0000000..4c72992
--- /dev/null
+++ b/app/components/sales/SalesFlowIndicator.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+/**
+ * Airline-ticket-style horizontal flow indicator for the sales process.
+ * Always visible at the top of any sales page, highlighting "you are here."
+ */
+const props = defineProps<{
+  /** Which stage the current page represents */
+  currentStage: 'quick_lead' | 'customer' | 'get_quotes' | 'present_quotes' | 'solicitud' | 'emission'
+}>()
+
+const stages = [
+  { id: 'quick_lead', label: 'Quick Lead', icon: 'i-heroicons-bolt', route: '/sales/quick-lead' },
+  { id: 'customer', label: 'Customer', icon: 'i-heroicons-user-plus', route: '/registration/client' },
+  { id: 'get_quotes', label: 'Get Quotes', icon: 'i-heroicons-document-magnifying-glass', route: '/quotes/new' },
+  { id: 'present_quotes', label: 'Present Quotes', icon: 'i-heroicons-presentation-chart-bar', route: '/quotes/compare' },
+  { id: 'solicitud', label: 'Solicitud', icon: 'i-heroicons-clipboard-document-check', route: '/onboarding/solicitud' },
+  { id: 'emission', label: 'Emission', icon: 'i-heroicons-check-badge', route: '/onboarding/emissions' },
+] as const
+
+type StageId = typeof stages[number]['id']
+
+function stageIndex(id: StageId): number {
+  return stages.findIndex(s => s.id === id)
+}
+
+const currentIdx = computed(() => stageIndex(props.currentStage))
+
+function state(id: StageId): 'done' | 'current' | 'upcoming' {
+  const idx = stageIndex(id)
+  if (idx < currentIdx.value) return 'done'
+  if (idx === currentIdx.value) return 'current'
+  return 'upcoming'
+}
+</script>
+
+<template>
+  <nav class="sfi-root" aria-label="Sales process flow">
+    <div class="sfi-track">
+      <template v-for="(stage, i) in stages" :key="stage.id">
+        <!-- Connector -->
+        <div
+          v-if="i > 0"
+          class="sfi-connector"
+          :class="state(stage.id) === 'upcoming' ? 'sfi-conn-upcoming' : 'sfi-conn-done'"
+        />
+
+        <!-- Stage node -->
+        <NuxtLink
+          :to="stage.route"
+          class="sfi-node"
+          :class="[
+            `sfi-node-${state(stage.id)}`,
+            state(stage.id) !== 'upcoming' ? 'sfi-node-clickable' : '',
+          ]"
+          :aria-current="state(stage.id) === 'current' ? 'step' : undefined"
+        >
+          <div class="sfi-icon-circle" :class="`sfi-ic-${state(stage.id)}`">
+            <UIcon v-if="state(stage.id) === 'done'" name="i-heroicons-check" style="width: 14px; height: 14px;" />
+            <UIcon v-else :name="stage.icon" style="width: 14px; height: 14px;" />
+          </div>
+          <span class="sfi-label">{{ stage.label }}</span>
+        </NuxtLink>
+      </template>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.sfi-root {
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  padding: 16px 20px;
+}
+
+.sfi-track {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+/* ── Connector line ── */
+.sfi-connector {
+  flex: 1;
+  height: 2px;
+  min-width: 16px;
+  max-width: 80px;
+  margin-top: 17px; /* vertically center with the 36px circle */
+  border-radius: 1px;
+}
+.sfi-conn-done {
+  background: #01696f;
+}
+.sfi-conn-upcoming {
+  background: rgba(0,0,0,0.08);
+}
+
+/* ── Stage node ── */
+.sfi-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+  min-width: 72px;
+  padding: 0 4px;
+  cursor: default;
+  flex-shrink: 0;
+}
+.sfi-node-clickable {
+  cursor: pointer;
+}
+.sfi-node-clickable:hover .sfi-label {
+  color: #01696f;
+}
+.sfi-node-clickable:hover .sfi-ic-done {
+  box-shadow: 0 0 0 3px rgba(1,105,111,0.12);
+}
+
+/* ── Icon circle ── */
+.sfi-icon-circle {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 180ms ease;
+}
+.sfi-ic-done {
+  background: #01696f;
+  color: #fff;
+}
+.sfi-ic-current {
+  background: #fff;
+  border: 2.5px solid #01696f;
+  color: #01696f;
+  box-shadow: 0 0 0 4px rgba(1,105,111,0.10);
+  animation: sfi-glow 2.5s ease-in-out infinite;
+}
+.sfi-ic-upcoming {
+  background: rgba(0,0,0,0.04);
+  color: #c0c0bc;
+  border: 1.5px solid rgba(0,0,0,0.06);
+}
+
+@keyframes sfi-glow {
+  0%, 100% { box-shadow: 0 0 0 4px rgba(1,105,111,0.10); }
+  50% { box-shadow: 0 0 0 6px rgba(1,105,111,0.18); }
+}
+
+/* ── Labels ── */
+.sfi-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  text-align: center;
+  transition: color 150ms ease;
+}
+.sfi-node-upcoming .sfi-label {
+  color: #c0c0bc;
+}
+.sfi-node-current .sfi-label {
+  color: #01696f;
+  font-weight: 700;
+}
+
+</style>
diff --git a/app/components/sales/SalesPipelineBar.vue b/app/components/sales/SalesPipelineBar.vue
new file mode 100644
index 0000000..98dffec
--- /dev/null
+++ b/app/components/sales/SalesPipelineBar.vue
@@ -0,0 +1,447 @@
+<script setup lang="ts">
+import { PIPELINE_STAGES, type SalesDeal, type PipelineStage, type DealForm } from '~/composables/useSalesPipeline'
+
+const props = defineProps<{
+  deal: SalesDeal
+}>()
+
+const emit = defineEmits<{
+  (e: 'navigate', stage: PipelineStage): void
+}>()
+
+const { stageFormProgress } = useSalesPipeline()
+
+const expandedStage = ref<PipelineStage | null>(null)
+
+function stageState(stageId: PipelineStage): 'completed' | 'active' | 'waiting' | 'upcoming' {
+  if (props.deal.completedStages.includes(stageId)) return 'completed'
+  if (props.deal.currentStage === stageId) {
+    const meta = PIPELINE_STAGES.find(s => s.id === stageId)
+    return meta?.isWaiting ? 'waiting' : 'active'
+  }
+  return 'upcoming'
+}
+
+function stageIdx(stageId: PipelineStage): number {
+  return PIPELINE_STAGES.findIndex(s => s.id === stageId)
+}
+
+function isClickable(stageId: PipelineStage): boolean {
+  const state = stageState(stageId)
+  return state === 'completed' || state === 'active'
+}
+
+function toggleExpand(stageId: PipelineStage) {
+  expandedStage.value = expandedStage.value === stageId ? null : stageId
+}
+
+function stageForms(stageId: PipelineStage): DealForm[] {
+  return props.deal.forms[stageId] ?? []
+}
+
+function formStatusIcon(f: DealForm): string {
+  if (f.status === 'complete') return 'i-heroicons-check-circle-solid'
+  if (f.status === 'in_progress') return 'i-heroicons-ellipsis-horizontal-circle'
+  return 'i-heroicons-minus-circle'
+}
+
+function formStatusColor(f: DealForm): string {
+  if (f.status === 'complete') return '#059669'
+  if (f.status === 'in_progress') return '#c27b1a'
+  return '#c0c0bc'
+}
+
+function timeAgo(iso?: string) {
+  if (!iso) return ''
+  const diff = Date.now() - new Date(iso).getTime()
+  if (diff < 3600000) return `${Math.max(1, Math.round(diff / 60000))}m ago`
+  if (diff < 86400000) return `${Math.round(diff / 3600000)}h ago`
+  if (diff < 172800000) return 'Yesterday'
+  return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+</script>
+
+<template>
+  <div class="spb-root">
+    <!-- Deal header -->
+    <div class="spb-header">
+      <div class="spb-deal-info">
+        <span class="spb-deal-name">{{ deal.customerName }}</span>
+        <span class="spb-deal-product">{{ deal.productLine }}</span>
+        <span v-if="deal.carrier" class="spb-deal-carrier">{{ deal.carrier }} {{ deal.carrierProduct }}</span>
+      </div>
+      <span class="spb-deal-id">{{ deal.id }}</span>
+    </div>
+
+    <!-- Stage stepper -->
+    <div class="spb-stepper">
+      <template v-for="(stage, i) in PIPELINE_STAGES" :key="stage.id">
+        <!-- Connector line -->
+        <div v-if="i > 0" class="spb-connector" :class="stageState(stage.id) === 'upcoming' ? 'spb-conn-upcoming' : stageState(PIPELINE_STAGES[i - 1].id) === 'completed' ? 'spb-conn-done' : 'spb-conn-upcoming'" />
+
+        <!-- Stage node -->
+        <button
+          type="button"
+          class="spb-stage"
+          :class="[
+            `spb-stage-${stageState(stage.id)}`,
+            isClickable(stage.id) ? 'spb-stage-clickable' : '',
+            expandedStage === stage.id ? 'spb-stage-expanded' : '',
+          ]"
+          @click="isClickable(stage.id) ? toggleExpand(stage.id) : undefined"
+        >
+          <!-- Stage circle -->
+          <div class="spb-circle" :class="`spb-circle-${stageState(stage.id)}`">
+            <UIcon v-if="stageState(stage.id) === 'completed'" name="i-heroicons-check" style="width: 12px; height: 12px;" />
+            <UIcon v-else-if="stageState(stage.id) === 'waiting'" name="i-heroicons-clock" style="width: 12px; height: 12px;" />
+            <span v-else-if="stageState(stage.id) === 'active'" class="spb-circle-dot" />
+            <span v-else class="spb-circle-num">{{ i + 1 }}</span>
+          </div>
+
+          <!-- Stage label + progress -->
+          <div class="spb-stage-content">
+            <span class="spb-stage-label">{{ stage.label }}</span>
+
+            <!-- Form progress micro-bar (only for non-waiting stages with forms) -->
+            <template v-if="!stage.isWaiting && stageForms(stage.id).length > 0">
+              <div class="spb-micro-bar">
+                <div class="spb-micro-fill" :style="{ width: stageFormProgress(deal, stage.id) + '%' }" :class="stageFormProgress(deal, stage.id) === 100 ? 'spb-fill-done' : stageFormProgress(deal, stage.id) > 0 ? 'spb-fill-progress' : 'spb-fill-empty'" />
+              </div>
+              <span class="spb-micro-pct">{{ stageFormProgress(deal, stage.id) }}%</span>
+            </template>
+
+            <!-- Waiting indicator -->
+            <span v-if="stageState(stage.id) === 'waiting'" class="spb-waiting-label">
+              {{ timeAgo(deal.stageTimestamps[stage.id]) }}
+            </span>
+          </div>
+        </button>
+      </template>
+    </div>
+
+    <!-- Expanded stage detail (form list) -->
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0 -translate-y-1 max-h-0"
+      enter-to-class="opacity-100 translate-y-0 max-h-[400px]"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100 max-h-[400px]"
+      leave-to-class="opacity-0 -translate-y-1 max-h-0"
+    >
+      <div v-if="expandedStage" class="spb-detail">
+        <div class="spb-detail-header">
+          <span class="spb-detail-title">{{ PIPELINE_STAGES.find(s => s.id === expandedStage)?.label }} — Forms</span>
+          <button type="button" class="spb-detail-nav" @click="emit('navigate', expandedStage!)">
+            Go to stage
+            <UIcon name="i-heroicons-arrow-right" style="width: 11px; height: 11px;" />
+          </button>
+        </div>
+
+        <div v-if="stageForms(expandedStage).length === 0" class="spb-detail-empty">
+          No forms assigned to this stage.
+        </div>
+
+        <div v-else class="spb-form-list">
+          <div v-for="f in stageForms(expandedStage)" :key="f.id" class="spb-form-row">
+            <UIcon :name="formStatusIcon(f)" :style="{ width: '16px', height: '16px', color: formStatusColor(f), flexShrink: 0 }" />
+            <div class="spb-form-info">
+              <span class="spb-form-label">{{ f.label }}</span>
+              <span class="spb-form-fields">{{ f.completedFields }}/{{ f.requiredFields }} fields</span>
+            </div>
+            <div class="spb-form-bar-wrap">
+              <div class="spb-form-bar" :style="{ width: f.completionPct + '%' }" :class="f.completionPct === 100 ? 'spb-bar-done' : f.completionPct > 0 ? 'spb-bar-progress' : 'spb-bar-empty'" />
+            </div>
+            <span class="spb-form-pct" :class="f.completionPct === 100 ? 'spb-pct-done' : f.completionPct > 0 ? 'spb-pct-progress' : 'spb-pct-empty'">{{ f.completionPct }}%</span>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.spb-root {
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+
+/* ── Header ── */
+.spb-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+  background: rgba(0,0,0,0.01);
+}
+.spb-deal-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.spb-deal-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.spb-deal-product {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 7px;
+  border-radius: 9999px;
+  background: rgba(1,105,111,0.08);
+  color: #01696f;
+}
+.spb-deal-carrier {
+  font-size: 10px;
+  color: #8a8a86;
+}
+.spb-deal-id {
+  font-size: 10px;
+  font-family: ui-monospace, monospace;
+  color: #8a8a86;
+}
+
+/* ── Stepper ── */
+.spb-stepper {
+  display: flex;
+  align-items: flex-start;
+  padding: 14px 16px;
+  gap: 0;
+  overflow-x: auto;
+}
+
+/* Connector line */
+.spb-connector {
+  flex: 1;
+  height: 2px;
+  min-width: 12px;
+  margin-top: 11px;
+  border-radius: 1px;
+}
+.spb-conn-done { background: #01696f; }
+.spb-conn-upcoming { background: rgba(0,0,0,0.08); }
+
+/* Stage button */
+.spb-stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: default;
+  flex-shrink: 0;
+  min-width: 64px;
+}
+.spb-stage-clickable { cursor: pointer; }
+.spb-stage-clickable:hover .spb-stage-label { color: #01696f; }
+
+/* Circle */
+.spb-circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all 150ms ease;
+}
+.spb-circle-completed {
+  background: #01696f;
+  color: #fff;
+}
+.spb-circle-active {
+  background: #fff;
+  border: 2px solid #01696f;
+  color: #01696f;
+}
+.spb-circle-waiting {
+  background: #fff;
+  border: 2px dashed #c27b1a;
+  color: #c27b1a;
+  animation: spb-pulse 2s ease-in-out infinite;
+}
+.spb-circle-upcoming {
+  background: rgba(0,0,0,0.04);
+  color: #c0c0bc;
+}
+.spb-circle-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background: #01696f;
+}
+.spb-circle-num {
+  font-size: 10px;
+  font-weight: 700;
+  color: #c0c0bc;
+}
+
+@keyframes spb-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Stage content */
+.spb-stage-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.spb-stage-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  transition: color 150ms ease;
+}
+.spb-stage-upcoming .spb-stage-label {
+  color: #c0c0bc;
+}
+.spb-stage-waiting .spb-stage-label {
+  color: #c27b1a;
+}
+
+/* Micro progress bar */
+.spb-micro-bar {
+  width: 40px;
+  height: 3px;
+  border-radius: 1.5px;
+  background: rgba(0,0,0,0.06);
+  overflow: hidden;
+}
+.spb-micro-fill {
+  height: 100%;
+  border-radius: 1.5px;
+  transition: width 300ms ease;
+}
+.spb-fill-done { background: #059669; }
+.spb-fill-progress { background: #c27b1a; }
+.spb-fill-empty { background: transparent; }
+
+.spb-micro-pct {
+  font-size: 9px;
+  font-weight: 700;
+  color: #8a8a86;
+}
+
+.spb-waiting-label {
+  font-size: 9px;
+  font-weight: 500;
+  color: #c27b1a;
+  font-style: italic;
+}
+
+/* ── Expanded detail ── */
+.spb-detail {
+  border-top: 1px solid rgba(0,0,0,0.06);
+  padding: 12px 16px;
+  background: rgba(0,0,0,0.01);
+  overflow: hidden;
+}
+.spb-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+.spb-detail-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.spb-detail-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: none;
+  background: rgba(1,105,111,0.06);
+  color: #01696f;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.spb-detail-nav:hover { background: rgba(1,105,111,0.12); }
+.spb-detail-empty {
+  font-size: 12px;
+  color: #8a8a86;
+  padding: 8px 0;
+}
+
+/* Form list */
+.spb-form-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.spb-form-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.04);
+}
+.spb-form-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex-shrink: 0;
+}
+.spb-form-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.spb-form-fields {
+  font-size: 10px;
+  color: #8a8a86;
+}
+
+/* Form bar */
+.spb-form-bar-wrap {
+  flex: 1;
+  height: 5px;
+  border-radius: 2.5px;
+  background: rgba(0,0,0,0.05);
+  overflow: hidden;
+  min-width: 60px;
+}
+.spb-form-bar {
+  height: 100%;
+  border-radius: 2.5px;
+  transition: width 300ms ease;
+  min-width: 0;
+}
+.spb-bar-done { background: #059669; }
+.spb-bar-progress { background: #c27b1a; }
+.spb-bar-empty { background: transparent; }
+
+.spb-form-pct {
+  font-size: 11px;
+  font-weight: 700;
+  min-width: 32px;
+  text-align: right;
+}
+.spb-pct-done { color: #059669; }
+.spb-pct-progress { color: #c27b1a; }
+.spb-pct-empty { color: #c0c0bc; }
+
+/* ── Expanded highlight ── */
+.spb-stage-expanded .spb-circle {
+  box-shadow: 0 0 0 3px rgba(1,105,111,0.15);
+}
+</style>
diff --git a/app/composables/useAlertConfig.ts b/app/composables/useAlertConfig.ts
new file mode 100644
index 0000000..fd1d37f
--- /dev/null
+++ b/app/composables/useAlertConfig.ts
@@ -0,0 +1,176 @@
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+/* ── Types ── */
+
+export type AlertRecipient = 'handler' | 'manager' | 'customer' | 'custom'
+
+export interface EmailSenderConfig {
+  senderEmail: string
+  senderDisplayName: string
+  replyToEmail: string
+}
+
+export interface AlertThresholdEntry {
+  id: string
+  daysBefore: number
+  enabled: boolean
+}
+
+export interface EscalationTier {
+  id: string
+  daysOverdue: number
+  recipients: AlertRecipient[]
+  action: string
+}
+
+export interface RenewalAlertConfig {
+  enabled: boolean
+  thresholds: AlertThresholdEntry[]
+}
+
+export interface CancellationAlertConfig {
+  enabled: boolean
+  recipients: AlertRecipient[]
+}
+
+export interface LatePaymentAlertConfig {
+  enabled: boolean
+  tiers: EscalationTier[]
+}
+
+export interface CreditCardExpiryAlertConfig {
+  enabled: boolean
+  thresholds: AlertThresholdEntry[]
+  autoDebitOnly: boolean
+}
+
+export interface CustomAlertRule {
+  id: string
+  alertName: string
+  field: string
+  operator: 'gte' | 'lte' | 'eq' | 'gt' | 'lt' | 'contains'
+  value: string | number | boolean
+  recipients: AlertRecipient[]
+  enabled: boolean
+}
+
+export interface AlertConfig {
+  emailSender: EmailSenderConfig
+  renewals: RenewalAlertConfig
+  cancellations: CancellationAlertConfig
+  latePayments: LatePaymentAlertConfig
+  creditCardExpiry: CreditCardExpiryAlertConfig
+  customRules: CustomAlertRule[]
+}
+
+/* ── Defaults ── */
+
+function defaultConfig(): AlertConfig {
+  return {
+    emailSender: {
+      senderEmail: 'alertas@miagencia.com',
+      senderDisplayName: 'Segur-OS Alertas',
+      replyToEmail: 'soporte@miagencia.com',
+    },
+    renewals: {
+      enabled: true,
+      thresholds: [
+        { id: 'r90', daysBefore: 90, enabled: true },
+        { id: 'r60', daysBefore: 60, enabled: true },
+        { id: 'r30', daysBefore: 30, enabled: true },
+        { id: 'r15', daysBefore: 15, enabled: true },
+      ],
+    },
+    cancellations: {
+      enabled: true,
+      recipients: ['handler', 'manager'],
+    },
+    latePayments: {
+      enabled: true,
+      tiers: [
+        { id: 'lp5', daysOverdue: 5, recipients: ['handler'], action: 'Notify assigned handler' },
+        { id: 'lp15', daysOverdue: 15, recipients: ['handler', 'manager'], action: 'Notify handler + manager' },
+        { id: 'lp30', daysOverdue: 30, recipients: ['handler', 'manager', 'customer'], action: 'Auto-escalate + notify customer' },
+      ],
+    },
+    creditCardExpiry: {
+      enabled: true,
+      thresholds: [
+        { id: 'cc60', daysBefore: 60, enabled: true },
+        { id: 'cc30', daysBefore: 30, enabled: true },
+        { id: 'cc15', daysBefore: 15, enabled: true },
+      ],
+      autoDebitOnly: true,
+    },
+    customRules: [
+      {
+        id: 'cr1',
+        alertName: 'High-value policy renewal',
+        field: 'premium',
+        operator: 'gte',
+        value: 25000,
+        recipients: ['handler', 'manager'],
+        enabled: true,
+      },
+    ],
+  }
+}
+
+/* ── Composable ── */
+
+let _counter = 100
+
+export function useAlertConfig() {
+  const config = useLocalStorageRef<AlertConfig>('policy-ui-alert-config-v1', defaultConfig)
+
+  /* ── Threshold CRUD ── */
+
+  function addThreshold(section: 'renewals' | 'creditCardExpiry', daysBefore: number) {
+    const id = `t${++_counter}`
+    config.value[section].thresholds.push({ id, daysBefore, enabled: true })
+  }
+
+  function removeThreshold(section: 'renewals' | 'creditCardExpiry', id: string) {
+    config.value[section].thresholds = config.value[section].thresholds.filter(t => t.id !== id)
+  }
+
+  /* ── Late payment tier CRUD ── */
+
+  function addPaymentTier(daysOverdue: number, action: string, recipients: AlertRecipient[]) {
+    const id = `lp${++_counter}`
+    config.value.latePayments.tiers.push({ id, daysOverdue, recipients, action })
+  }
+
+  function removePaymentTier(id: string) {
+    config.value.latePayments.tiers = config.value.latePayments.tiers.filter(t => t.id !== id)
+  }
+
+  /* ── Custom rule CRUD ── */
+
+  function addCustomRule(rule: Omit<CustomAlertRule, 'id'>) {
+    const id = `cr${++_counter}`
+    config.value.customRules.push({ ...rule, id })
+  }
+
+  function updateCustomRule(id: string, patch: Partial<CustomAlertRule>) {
+    const idx = config.value.customRules.findIndex(r => r.id === id)
+    if (idx !== -1) {
+      config.value.customRules[idx] = { ...config.value.customRules[idx], ...patch }
+    }
+  }
+
+  function removeCustomRule(id: string) {
+    config.value.customRules = config.value.customRules.filter(r => r.id !== id)
+  }
+
+  return {
+    config,
+    addThreshold,
+    removeThreshold,
+    addPaymentTier,
+    removePaymentTier,
+    addCustomRule,
+    updateCustomRule,
+    removeCustomRule,
+  }
+}
diff --git a/app/composables/useAnalytics.ts b/app/composables/useAnalytics.ts
new file mode 100644
index 0000000..e0301f1
--- /dev/null
+++ b/app/composables/useAnalytics.ts
@@ -0,0 +1,147 @@
+/**
+ * Business Analytics — composable for chart state, SVG rendering, and domain filtering.
+ * SVG chart math extracted from /app/pages/index.vue dashboard charts.
+ */
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+import {
+  ANALYTICS_METRICS,
+  ANALYTICS_KPI_SUMMARIES,
+  type AnalyticsDomainId,
+  type AnalyticsChartType,
+  type AnalyticsTimePoint,
+} from '~/data/mock-analytics'
+
+export interface ChartSvgModel {
+  lineD: string
+  areaD: string
+  points: { x: number; y: number; v: number }[]
+  bars: { x: number; y: number; w: number; h: number }[]
+  gridYs: number[]
+  viewW: number
+  viewH: number
+  padX: number
+  innerW: number
+  bottomY: number
+}
+
+interface AnalyticsState {
+  activeDomain: AnalyticsDomainId
+  chartBuilderMetric: string
+  chartBuilderType: AnalyticsChartType
+  chartBuilderRange: '3m' | '6m' | '12m'
+}
+
+function buildDefaults(): AnalyticsState {
+  return {
+    activeDomain: 'production',
+    chartBuilderMetric: 'gwp',
+    chartBuilderType: 'area',
+    chartBuilderRange: '6m',
+  }
+}
+
+export function useAnalytics() {
+  const state = useLocalStorageRef<AnalyticsState>('policy-ui-analytics-v1', buildDefaults)
+
+  const allMetrics = ANALYTICS_METRICS
+  const kpiSummaries = ANALYTICS_KPI_SUMMARIES
+
+  const domainMetrics = computed(() =>
+    allMetrics.filter(m => m.domain === state.value.activeDomain)
+  )
+
+  const chartBuilderMetricObj = computed(() =>
+    allMetrics.find(m => m.id === state.value.chartBuilderMetric) ?? allMetrics[0]!
+  )
+
+  const chartBuilderData = computed(() => {
+    const data = chartBuilderMetricObj.value.data12m.filter(d => d.m)
+    const range = state.value.chartBuilderRange
+    if (range === '3m') return data.slice(-3)
+    if (range === '6m') return data.slice(-6)
+    return data
+  })
+
+  // ── SVG chart model builder (extracted from dashboard index.vue) ──
+  function buildSvgModel(data: AnalyticsTimePoint[], viewW = 400, viewH = 120): ChartSvgModel {
+    const pts = data.map(d => d.v)
+    const padX = 8; const padY = 14
+    const innerW = viewW - padX * 2; const innerH = viewH - padY * 2
+    const maxV = Math.max(...pts, 1); const minV = Math.min(...pts, 0)
+    const span = maxV - minV || 1
+    const points = pts.map((p, i) => ({
+      x: padX + (i / Math.max(1, pts.length - 1)) * innerW,
+      y: padY + (1 - (p - minV) / span) * innerH,
+      v: p,
+    }))
+    const bottomY = padY + innerH
+    const first = points[0]!; const last = points[points.length - 1]!
+
+    // Line + area paths (smooth Bézier curves)
+    let lineD = `M ${first.x},${first.y}`
+    let areaD = `M ${first.x},${bottomY} L ${first.x},${first.y}`
+    for (let i = 1; i < points.length; i++) {
+      const p0 = points[i - 1]!; const p1 = points[i]!
+      const cx = (p0.x + p1.x) / 2
+      const seg = ` C ${cx},${p0.y} ${cx},${p1.y} ${p1.x},${p1.y}`
+      lineD += seg; areaD += seg
+    }
+    areaD += ` L ${last.x},${bottomY} Z`
+
+    // Bar geometry
+    const barW = Math.min(innerW / pts.length * 0.6, 40)
+    const bars = pts.map((p, i) => ({
+      x: padX + (i / Math.max(1, pts.length - 1)) * innerW - barW / 2,
+      y: padY + (1 - (p - minV) / span) * innerH,
+      w: barW,
+      h: ((p - minV) / span) * innerH,
+    }))
+
+    const gridYs = [0, 0.5, 1].map(t => padY + t * innerH)
+    return { lineD, areaD, points, bars, gridYs, viewW, viewH, padX, innerW, bottomY }
+  }
+
+  // ── Sparkline helpers ──
+  function sparklinePath(pts: number[], w = 112, h = 32, pad = 2): string {
+    const max = Math.max(...pts); const min = Math.min(...pts); const r = max - min || 1
+    const mapped = pts.map((p, i, arr) => ({
+      x: pad + (i / Math.max(1, arr.length - 1)) * (w - pad * 2),
+      y: pad + (1 - (p - min) / r) * (h - pad * 2),
+    }))
+    if (mapped.length < 2) return ''
+    let d = `M ${mapped[0]!.x},${mapped[0]!.y}`
+    for (let i = 0; i < mapped.length - 1; i++) {
+      const p0 = mapped[i]!; const p1 = mapped[i + 1]!; const cx = (p0.x + p1.x) / 2
+      d += ` C ${cx},${p0.y} ${cx},${p1.y} ${p1.x},${p1.y}`
+    }
+    return d
+  }
+
+  function sparklineArea(pts: number[], w = 112, h = 32, pad = 2): string {
+    const path = sparklinePath(pts, w, h, pad)
+    if (!path) return ''
+    const max = Math.max(...pts); const min = Math.min(...pts); const r = max - min || 1
+    const mapped = pts.map((p, i, arr) => ({
+      x: pad + (i / Math.max(1, arr.length - 1)) * (w - pad * 2),
+      y: pad + (1 - (p - min) / r) * (h - pad * 2),
+    }))
+    return `${path} L ${mapped[mapped.length - 1]!.x},${h} L ${mapped[0]!.x},${h} Z`
+  }
+
+  const chartBuilderSvgModel = computed(() =>
+    buildSvgModel(chartBuilderData.value, 400, 180)
+  )
+
+  return {
+    state,
+    allMetrics,
+    kpiSummaries,
+    domainMetrics,
+    chartBuilderMetricObj,
+    chartBuilderData,
+    chartBuilderSvgModel,
+    buildSvgModel,
+    sparklinePath,
+    sparklineArea,
+  }
+}
diff --git a/app/composables/useAppShellLayout.ts b/app/composables/useAppShellLayout.ts
new file mode 100644
index 0000000..ea86c7c
--- /dev/null
+++ b/app/composables/useAppShellLayout.ts
@@ -0,0 +1,32 @@
+const STORAGE_KEY = 'policy-ui.sidebar.collapsed.v1'
+
+export function useAppShellLayout() {
+  const sidebarCollapsed = ref(false)
+
+  onMounted(() => {
+    if (!import.meta.client) return
+    try {
+      sidebarCollapsed.value = localStorage.getItem(STORAGE_KEY) === '1'
+    } catch {
+      /* ignore */
+    }
+  })
+
+  watch(sidebarCollapsed, (c) => {
+    if (!import.meta.client) return
+    try {
+      localStorage.setItem(STORAGE_KEY, c ? '1' : '0')
+    } catch {
+      /* ignore */
+    }
+  })
+
+  function toggleSidebar() {
+    sidebarCollapsed.value = !sidebarCollapsed.value
+  }
+
+  return {
+    sidebarCollapsed,
+    toggleSidebar
+  }
+}
diff --git a/app/composables/useAppTheme.ts b/app/composables/useAppTheme.ts
new file mode 100644
index 0000000..38c4948
--- /dev/null
+++ b/app/composables/useAppTheme.ts
@@ -0,0 +1,46 @@
+import type { AppThemeId } from '~/types/app-theme'
+import { APP_THEME_OPTIONS } from '~/types/app-theme'
+
+const STORAGE_KEY = 'policy-ui.theme.v1'
+
+const VALID: AppThemeId[] = ['light', 'purple', 'dark', 'dark-purple']
+
+function isThemeId(x: string): x is AppThemeId {
+  return (VALID as string[]).includes(x)
+}
+
+export function useAppTheme() {
+  const themeId = ref<AppThemeId>('light')
+
+  function applyTheme(id: AppThemeId) {
+    themeId.value = id
+    if (import.meta.client) {
+      document.documentElement.setAttribute('data-theme', id)
+      try {
+        localStorage.setItem(STORAGE_KEY, id)
+      } catch {
+        /* ignore */
+      }
+    }
+  }
+
+  onMounted(() => {
+    if (!import.meta.client) return
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY)
+      if (raw && isThemeId(raw)) {
+        applyTheme(raw)
+        return
+      }
+    } catch {
+      /* ignore */
+    }
+    applyTheme('light')
+  })
+
+  return {
+    themeId,
+    themeOptions: APP_THEME_OPTIONS,
+    applyTheme
+  }
+}
diff --git a/app/composables/useAutoQuoteDraft.ts b/app/composables/useAutoQuoteDraft.ts
new file mode 100644
index 0000000..6e25fd8
--- /dev/null
+++ b/app/composables/useAutoQuoteDraft.ts
@@ -0,0 +1,30 @@
+import type { AutoQuoteDraft } from '~/types/auto-quote-intake'
+
+export function emptyAutoQuoteDraft(): AutoQuoteDraft {
+  return {
+    quoteMode: null,
+    segment: null,
+    client: {
+      fullName: '',
+      email: '',
+      phone: '',
+      documentId: '',
+      organizationName: ''
+    },
+    vehicle: {
+      subRamo: '',
+      clase: '',
+      uso: '',
+      marca: '',
+      modelo: '',
+      placa: '',
+      year: '',
+      capacidadPasajeros: '',
+      valorVehiculo: ''
+    },
+    solicit: {
+      carrierIds: [],
+      planIds: []
+    }
+  }
+}
diff --git a/app/composables/useBrokerageBranding.ts b/app/composables/useBrokerageBranding.ts
new file mode 100644
index 0000000..a9b652b
--- /dev/null
+++ b/app/composables/useBrokerageBranding.ts
@@ -0,0 +1,31 @@
+import { BRANDING_STORAGE_KEY, type BrokerageBrandingState } from '~/types/branding'
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+export function defaultBrokerageBranding(): BrokerageBrandingState {
+  return {
+    companyName: '',
+    logoDataUrl: null,
+    logoFileName: '',
+    reportPageHeader: '',
+    reportPageFooter: ''
+  }
+}
+
+export function useBrokerageBranding() {
+  const saved = useLocalStorageRef(BRANDING_STORAGE_KEY, defaultBrokerageBranding)
+
+  const productDisplayName = computed(() => {
+    const n = saved.value.companyName?.trim()
+    if (n) return n
+    return null
+  })
+
+  const sidebarTitle = computed(() => productDisplayName.value ?? 'Segur-OS')
+
+  return {
+    saved,
+    productDisplayName,
+    sidebarTitle,
+    defaultBrokerageBranding
+  }
+}
diff --git a/app/composables/useClientFavorites.ts b/app/composables/useClientFavorites.ts
new file mode 100644
index 0000000..fc875f2
--- /dev/null
+++ b/app/composables/useClientFavorites.ts
@@ -0,0 +1,35 @@
+/**
+ * Client favorites — star customers for quick dashboard access.
+ * Persisted in localStorage. Stores customer IDs.
+ */
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+const KEY = 'policy-ui-client-favorites-v1'
+
+export function useClientFavorites() {
+  const favoriteIds = useLocalStorageRef<string[]>(KEY, () => [])
+
+  function isFavorite(customerId: string) {
+    return favoriteIds.value.includes(customerId)
+  }
+
+  function toggleFavorite(customerId: string) {
+    if (isFavorite(customerId)) {
+      favoriteIds.value = favoriteIds.value.filter(id => id !== customerId)
+    } else {
+      favoriteIds.value = [customerId, ...favoriteIds.value]
+    }
+  }
+
+  function addFavorite(customerId: string) {
+    if (!isFavorite(customerId)) {
+      favoriteIds.value = [customerId, ...favoriteIds.value]
+    }
+  }
+
+  function removeFavorite(customerId: string) {
+    favoriteIds.value = favoriteIds.value.filter(id => id !== customerId)
+  }
+
+  return { favoriteIds, isFavorite, toggleFavorite, addFavorite, removeFavorite }
+}
diff --git a/app/composables/useClientRegistrationModel.ts b/app/composables/useClientRegistrationModel.ts
new file mode 100644
index 0000000..05742cf
--- /dev/null
+++ b/app/composables/useClientRegistrationModel.ts
@@ -0,0 +1,47 @@
+import type { ClientCaptureMeta, ClientRegistrationNatural } from '~/types/brokerage-registration'
+
+export function createEmptyClientRegistration(): ClientRegistrationNatural {
+  return {
+    id: '',
+    economicGroupId: '',
+    conglomerateId: '',
+    personType: 'natural',
+    apellidoPaterno: '',
+    apellidoMaterno: '',
+    primerNombre: '',
+    segundoNombre: '',
+    fechaNacimiento: '',
+    tipoIdentificacion: '',
+    cedulaOPasaporte: '',
+    telefonoCelular: '',
+    correoElectronicoPersonal: '',
+    ocupacion: '',
+    procedencia: '',
+    detalle: '',
+    descripcion: ''
+  }
+}
+
+export function useClientCaptureMeta(): ClientCaptureMeta {
+  const now = new Date()
+  return {
+    operadorId: '32',
+    operadorNombre: 'Jordan',
+    fechaCaptura: now.toISOString(),
+    progresoCapturaPct: 6,
+    estado: ''
+  }
+}
+
+export function toIndividualCustomerBody(r: ClientRegistrationNatural) {
+  const last = [r.apellidoPaterno, r.apellidoMaterno].filter(Boolean).join(' ').trim()
+  return {
+    first_name: [r.primerNombre, r.segundoNombre].filter(Boolean).join(' ').trim() || r.primerNombre,
+    last_name: last || '-',
+    email: r.correoElectronicoPersonal.trim(),
+    phone: r.telefonoCelular.trim(),
+    birth_date: r.fechaNacimiento,
+    gender: '',
+    document_id: r.cedulaOPasaporte.trim()
+  }
+}
diff --git a/app/composables/useColectivos.ts b/app/composables/useColectivos.ts
new file mode 100644
index 0000000..61cb028
--- /dev/null
+++ b/app/composables/useColectivos.ts
@@ -0,0 +1,641 @@
+/**
+ * Colectivos (group accounts) — data backbone for the entire module.
+ * Manages group accounts, members, documents, billing, and service requests.
+ * Persisted in localStorage via useLocalStorageRef.
+ */
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+/* ── Core Types ── */
+
+export type ColectivoStatus = 'quoting' | 'onboarding' | 'active' | 'renewal_due' | 'suspended' | 'cancelled'
+export type MemberStatus = 'active' | 'pending_enrollment' | 'pending_docs' | 'excluded' | 'on_leave'
+export type ServiceRequestType = 'inclusion' | 'exclusion' | 'claim' | 'billing' | 'certificate' | 'amendment'
+export type ServiceRequestStatus = 'open' | 'in_progress' | 'pending_carrier' | 'pending_client' | 'resolved' | 'cancelled'
+export type DocumentCategory = 'policy' | 'contract' | 'endorsement' | 'certificate' | 'amendment' | 'census' | 'siniestralidad' | 'enrollment' | 'correspondence' | 'other'
+export type BillingStatus = 'upcoming' | 'invoiced' | 'paid' | 'overdue' | 'disputed' | 'reconciled'
+
+export interface ColectivoMember {
+  id: string
+  name: string
+  documentId: string
+  email: string
+  phone: string
+  role: string
+  department: string
+  enrollmentDate: string
+  status: MemberStatus
+  tier: string
+  dependents: number
+  pendingDocs: string[]
+  formsCompleted: number
+  formsTotal: number
+}
+
+export interface ColectivoDocument {
+  id: string
+  name: string
+  category: DocumentCategory
+  uploadedBy: string
+  uploadedAt: string
+  fileSize: string
+  fileType: string
+  version: number
+  notes: string
+}
+
+export interface BillingCycle {
+  id: string
+  period: string
+  dueDate: string
+  status: BillingStatus
+  invoiceAmount: number
+  paidAmount: number
+  carrierRef: string
+  membersBilled: number
+  membersExpected: number
+  discrepancy: number
+  notes: string
+}
+
+export interface ServiceRequest {
+  id: string
+  type: ServiceRequestType
+  subject: string
+  status: ServiceRequestStatus
+  priority: 'low' | 'medium' | 'high' | 'urgent'
+  assignee: string
+  created: string
+  updated: string
+  memberName?: string
+  notes: string
+}
+
+export interface ColectivoAccount {
+  id: string
+  name: string
+  ruc: string
+  lob: string
+  product: string
+  carrier: string
+  status: ColectivoStatus
+
+  contactName: string
+  contactEmail: string
+  contactPhone: string
+  hrContactName: string
+  hrContactEmail: string
+
+  effectiveDate: string
+  renewalDate: string
+  onboardingDate: string
+
+  totalMembers: number
+  activeMembersCount: number
+  dependentsCount: number
+  pendingEnrollment: number
+
+  monthlyPremium: number
+  annualPremium: number
+  commissionPct: number
+
+  agent: string
+
+  members: ColectivoMember[]
+  documents: ColectivoDocument[]
+  billingCycles: BillingCycle[]
+  serviceRequests: ServiceRequest[]
+
+  recentActivity: { date: string; text: string; type: string; actor: string }[]
+
+  hasUrgentIssues: boolean
+  outstandingClaims: number
+  pendingTasks: number
+}
+
+/* ── Mock Data ── */
+
+function buildDefaultAccounts(): ColectivoAccount[] {
+  return [
+    // ── 1. Banco Regional ──
+    {
+      id: 'col-001',
+      name: 'Banco Regional S.A.',
+      ruc: '80012345-6',
+      lob: 'Health',
+      product: 'Salud Corporativa Elite',
+      carrier: 'Vida Plena',
+      status: 'active',
+
+      contactName: 'Roberto Méndez',
+      contactEmail: 'rmendez@bancoregional.com.py',
+      contactPhone: '+595 21 410-2200',
+      hrContactName: 'Silvia Acosta',
+      hrContactEmail: 'sacosta@bancoregional.com.py',
+
+      effectiveDate: '2025-07-01',
+      renewalDate: '2026-05-23',
+      onboardingDate: '2025-06-15',
+
+      totalMembers: 412,
+      activeMembersCount: 398,
+      dependentsCount: 687,
+      pendingEnrollment: 4,
+
+      monthlyPremium: 10000,
+      annualPremium: 120000,
+      commissionPct: 12,
+
+      agent: 'Carlos Villalba',
+
+      members: [
+        { id: 'mbr-001-01', name: 'Roberto Méndez', documentId: '3.456.789', email: 'rmendez@bancoregional.com.py', phone: '+595 981 222-001', role: 'Director General', department: 'Directorio', enrollmentDate: '2025-07-01', status: 'active', tier: 'Executive', dependents: 3, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-001-02', name: 'Silvia Acosta', documentId: '4.123.456', email: 'sacosta@bancoregional.com.py', phone: '+595 981 222-002', role: 'Gerente RRHH', department: 'Recursos Humanos', enrollmentDate: '2025-07-01', status: 'active', tier: 'Plus', dependents: 2, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-001-03', name: 'Jorge Ramírez', documentId: '2.987.654', email: 'jramirez@bancoregional.com.py', phone: '+595 981 222-003', role: 'Analista de Créditos', department: 'Banca Comercial', enrollmentDate: '2025-07-15', status: 'active', tier: 'Basic', dependents: 1, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-001-04', name: 'María Elena Torres', documentId: '5.321.098', email: 'metorres@bancoregional.com.py', phone: '+595 981 222-004', role: 'Cajera Principal', department: 'Operaciones', enrollmentDate: '2025-07-01', status: 'active', tier: 'Basic', dependents: 2, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-001-05', name: 'Fernando López', documentId: '1.654.321', email: 'flopez@bancoregional.com.py', phone: '+595 981 222-005', role: 'Gerente de Sucursal', department: 'Sucursales', enrollmentDate: '2025-08-01', status: 'active', tier: 'Plus', dependents: 4, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-001-06', name: 'Patricia Benítez', documentId: '6.789.012', email: 'pbenitez@bancoregional.com.py', phone: '+595 981 222-006', role: 'Oficial de Cumplimiento', department: 'Legal', enrollmentDate: '2025-09-01', status: 'pending_docs', tier: 'Plus', dependents: 1, pendingDocs: ['Certificado médico', 'Formulario de dependientes'], formsCompleted: 2, formsTotal: 4 },
+        { id: 'mbr-001-07', name: 'Luis Giménez', documentId: '3.210.987', email: 'lgimenez@bancoregional.com.py', phone: '+595 981 222-007', role: 'Desarrollador Senior', department: 'Tecnología', enrollmentDate: '2026-01-15', status: 'active', tier: 'Basic', dependents: 0, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-001-08', name: 'Ana Cristina Duarte', documentId: '7.654.321', email: 'acduarte@bancoregional.com.py', phone: '+595 981 222-008', role: 'Asistente Ejecutiva', department: 'Directorio', enrollmentDate: '2025-07-01', status: 'on_leave', tier: 'Executive', dependents: 2, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+      ],
+
+      documents: [
+        { id: 'doc-001-01', name: 'Póliza Colectiva 2025-2026', category: 'policy', uploadedBy: 'Carlos Villalba', uploadedAt: '2025-06-28', fileSize: '4.2 MB', fileType: 'PDF', version: 2, notes: 'Versión final firmada' },
+        { id: 'doc-001-02', name: 'Contrato de Intermediación', category: 'contract', uploadedBy: 'Carlos Villalba', uploadedAt: '2025-06-20', fileSize: '1.8 MB', fileType: 'PDF', version: 1, notes: '' },
+        { id: 'doc-001-03', name: 'Censo Marzo 2026', category: 'census', uploadedBy: 'Silvia Acosta', uploadedAt: '2026-03-05', fileSize: '856 KB', fileType: 'XLSX', version: 1, notes: 'Incluye 3 nuevas altas' },
+        { id: 'doc-001-04', name: 'Endoso #3 - Inclusiones Feb 2026', category: 'endorsement', uploadedBy: 'Carlos Villalba', uploadedAt: '2026-02-18', fileSize: '320 KB', fileType: 'PDF', version: 1, notes: '8 inclusiones procesadas' },
+        { id: 'doc-001-05', name: 'Reporte Siniestralidad Q1 2026', category: 'siniestralidad', uploadedBy: 'Vida Plena', uploadedAt: '2026-04-02', fileSize: '2.1 MB', fileType: 'PDF', version: 1, notes: 'Siniestralidad al 68%' },
+        { id: 'doc-001-06', name: 'Certificado Individual - R. Méndez', category: 'certificate', uploadedBy: 'Carlos Villalba', uploadedAt: '2025-07-10', fileSize: '145 KB', fileType: 'PDF', version: 1, notes: '' },
+      ],
+
+      billingCycles: [
+        { id: 'bill-001-01', period: 'January 2026', dueDate: '2026-01-15', status: 'paid', invoiceAmount: 10000, paidAmount: 10000, carrierRef: 'VP-2026-0412-01', membersBilled: 410, membersExpected: 410, discrepancy: 0, notes: '' },
+        { id: 'bill-001-02', period: 'February 2026', dueDate: '2026-02-15', status: 'paid', invoiceAmount: 10200, paidAmount: 10200, carrierRef: 'VP-2026-0412-02', membersBilled: 412, membersExpected: 412, discrepancy: 0, notes: 'Incluyó 2 altas' },
+        { id: 'bill-001-03', period: 'March 2026', dueDate: '2026-03-15', status: 'paid', invoiceAmount: 10200, paidAmount: 10200, carrierRef: 'VP-2026-0412-03', membersBilled: 412, membersExpected: 412, discrepancy: 0, notes: '' },
+        { id: 'bill-001-04', period: 'April 2026', dueDate: '2026-04-15', status: 'invoiced', invoiceAmount: 10200, paidAmount: 0, carrierRef: 'VP-2026-0412-04', membersBilled: 412, membersExpected: 412, discrepancy: 0, notes: 'Factura enviada al cliente' },
+        { id: 'bill-001-05', period: 'May 2026', dueDate: '2026-05-15', status: 'upcoming', invoiceAmount: 10200, paidAmount: 0, carrierRef: '', membersBilled: 0, membersExpected: 412, discrepancy: 0, notes: '' },
+      ],
+
+      serviceRequests: [
+        { id: 'sr-001-01', type: 'claim', subject: 'Reclamo cobertura cirugía - Expediente #4521', status: 'pending_carrier', priority: 'urgent', assignee: 'Carlos Villalba', created: '2026-03-28', updated: '2026-04-05', memberName: 'Fernando López', notes: 'Carrier solicitó documentación adicional del hospital. Plazo vence 04/12.' },
+        { id: 'sr-001-02', type: 'inclusion', subject: 'Alta de 3 nuevos empleados - Sucursal Este', status: 'in_progress', priority: 'high', assignee: 'Carlos Villalba', created: '2026-04-01', updated: '2026-04-06', notes: 'Faltan formularios de 1 empleado.' },
+        { id: 'sr-001-03', type: 'certificate', subject: 'Certificados individuales para viaje corporativo', status: 'open', priority: 'urgent', assignee: 'Carlos Villalba', created: '2026-04-07', updated: '2026-04-07', notes: 'Necesitan 12 certificados para viaje el 04/18.' },
+        { id: 'sr-001-04', type: 'billing', subject: 'Consulta sobre diferencia en factura Enero', status: 'resolved', priority: 'low', assignee: 'Carlos Villalba', created: '2026-01-22', updated: '2026-02-03', notes: 'Diferencia por ajuste de prima. Aclarado con RRHH.' },
+      ],
+
+      recentActivity: [
+        { date: '2026-04-07', text: 'Solicitud urgente de certificados para viaje corporativo', type: 'service_request', actor: 'Silvia Acosta' },
+        { date: '2026-04-06', text: 'Actualización en reclamo #4521 - carrier solicita más docs', type: 'claim_update', actor: 'Vida Plena' },
+        { date: '2026-04-05', text: 'Factura de Abril enviada al cliente', type: 'billing', actor: 'Sistema' },
+        { date: '2026-04-01', text: 'Nueva solicitud de inclusión: 3 empleados Sucursal Este', type: 'inclusion', actor: 'Silvia Acosta' },
+        { date: '2026-03-28', text: 'Reclamo de cirugía elevado a urgente', type: 'claim_update', actor: 'Carlos Villalba' },
+        { date: '2026-03-05', text: 'Censo de Marzo recibido y cargado', type: 'document', actor: 'Silvia Acosta' },
+        { date: '2026-02-18', text: 'Endoso #3 procesado - 8 inclusiones', type: 'endorsement', actor: 'Carlos Villalba' },
+      ],
+
+      hasUrgentIssues: true,
+      outstandingClaims: 2,
+      pendingTasks: 5,
+    },
+
+    // ── 2. Clínica San José ──
+    {
+      id: 'col-002',
+      name: 'Clínica San José',
+      ruc: '80034567-1',
+      lob: 'Health',
+      product: 'Salud Integral Empresarial',
+      carrier: 'Salud Global',
+      status: 'active',
+
+      contactName: 'Dr. Marcelo Insfrán',
+      contactEmail: 'minsfran@clinicasanjose.com.py',
+      contactPhone: '+595 21 550-3300',
+      hrContactName: 'Laura Paredes',
+      hrContactEmail: 'lparedes@clinicasanjose.com.py',
+
+      effectiveDate: '2025-09-01',
+      renewalDate: '2026-09-01',
+      onboardingDate: '2025-08-15',
+
+      totalMembers: 88,
+      activeMembersCount: 88,
+      dependentsCount: 142,
+      pendingEnrollment: 0,
+
+      monthlyPremium: 3500,
+      annualPremium: 42000,
+      commissionPct: 10,
+
+      agent: 'María Fernanda Ortiz',
+
+      members: [
+        { id: 'mbr-002-01', name: 'Dr. Marcelo Insfrán', documentId: '1.234.567', email: 'minsfran@clinicasanjose.com.py', phone: '+595 982 333-001', role: 'Director Médico', department: 'Dirección', enrollmentDate: '2025-09-01', status: 'active', tier: 'Executive', dependents: 3, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-002-02', name: 'Laura Paredes', documentId: '2.345.678', email: 'lparedes@clinicasanjose.com.py', phone: '+595 982 333-002', role: 'Jefa de RRHH', department: 'Administración', enrollmentDate: '2025-09-01', status: 'active', tier: 'Plus', dependents: 2, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-002-03', name: 'Dra. Carolina Fleitas', documentId: '3.456.012', email: 'cfleitas@clinicasanjose.com.py', phone: '+595 982 333-003', role: 'Pediatra', department: 'Pediatría', enrollmentDate: '2025-09-01', status: 'active', tier: 'Plus', dependents: 1, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-002-04', name: 'Enf. Rosa Martínez', documentId: '4.567.890', email: 'rmartinez@clinicasanjose.com.py', phone: '+595 982 333-004', role: 'Enfermera Jefa', department: 'Enfermería', enrollmentDate: '2025-09-15', status: 'active', tier: 'Basic', dependents: 2, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-002-05', name: 'Carlos Ruiz', documentId: '5.678.901', email: 'cruiz@clinicasanjose.com.py', phone: '+595 982 333-005', role: 'Técnico de Laboratorio', department: 'Laboratorio', enrollmentDate: '2025-10-01', status: 'active', tier: 'Basic', dependents: 0, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-002-06', name: 'Gabriela Sánchez', documentId: '6.789.012', email: 'gsanchez@clinicasanjose.com.py', phone: '+595 982 333-006', role: 'Recepcionista', department: 'Atención al Paciente', enrollmentDate: '2025-09-01', status: 'active', tier: 'Basic', dependents: 1, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+      ],
+
+      documents: [
+        { id: 'doc-002-01', name: 'Póliza Colectiva Clínica SJ 2025-2026', category: 'policy', uploadedBy: 'María Fernanda Ortiz', uploadedAt: '2025-08-28', fileSize: '3.1 MB', fileType: 'PDF', version: 1, notes: '' },
+        { id: 'doc-002-02', name: 'Contrato de Servicios', category: 'contract', uploadedBy: 'María Fernanda Ortiz', uploadedAt: '2025-08-20', fileSize: '1.4 MB', fileType: 'PDF', version: 1, notes: '' },
+        { id: 'doc-002-03', name: 'Censo Actualizado Q1 2026', category: 'census', uploadedBy: 'Laura Paredes', uploadedAt: '2026-03-28', fileSize: '420 KB', fileType: 'XLSX', version: 1, notes: 'Sin cambios respecto al período anterior' },
+      ],
+
+      billingCycles: [
+        { id: 'bill-002-01', period: 'February 2026', dueDate: '2026-02-01', status: 'paid', invoiceAmount: 3500, paidAmount: 3500, carrierRef: 'SG-2026-088-02', membersBilled: 88, membersExpected: 88, discrepancy: 0, notes: '' },
+        { id: 'bill-002-02', period: 'March 2026', dueDate: '2026-03-01', status: 'paid', invoiceAmount: 3500, paidAmount: 3500, carrierRef: 'SG-2026-088-03', membersBilled: 88, membersExpected: 88, discrepancy: 0, notes: '' },
+        { id: 'bill-002-03', period: 'April 2026', dueDate: '2026-04-01', status: 'paid', invoiceAmount: 3500, paidAmount: 3500, carrierRef: 'SG-2026-088-04', membersBilled: 88, membersExpected: 88, discrepancy: 0, notes: '' },
+      ],
+
+      serviceRequests: [
+        { id: 'sr-002-01', type: 'certificate', subject: 'Renovación de certificados anuales', status: 'resolved', priority: 'medium', assignee: 'María Fernanda Ortiz', created: '2026-02-10', updated: '2026-02-20', notes: 'Todos los certificados emitidos y entregados.' },
+        { id: 'sr-002-02', type: 'amendment', subject: 'Actualización de coberturas de maternidad', status: 'resolved', priority: 'low', assignee: 'María Fernanda Ortiz', created: '2026-01-15', updated: '2026-02-01', notes: 'Endoso emitido por carrier.' },
+      ],
+
+      recentActivity: [
+        { date: '2026-04-01', text: 'Factura de Abril pagada a tiempo', type: 'billing', actor: 'Laura Paredes' },
+        { date: '2026-03-28', text: 'Censo Q1 2026 cargado - sin cambios', type: 'document', actor: 'Laura Paredes' },
+        { date: '2026-02-20', text: 'Certificados anuales entregados', type: 'service_request', actor: 'María Fernanda Ortiz' },
+        { date: '2026-02-01', text: 'Endoso de maternidad procesado', type: 'endorsement', actor: 'Salud Global' },
+        { date: '2026-01-15', text: 'Solicitud de actualización de coberturas', type: 'service_request', actor: 'Dr. Marcelo Insfrán' },
+      ],
+
+      hasUrgentIssues: false,
+      outstandingClaims: 0,
+      pendingTasks: 0,
+    },
+
+    // ── 3. ITSA Corp ──
+    {
+      id: 'col-003',
+      name: 'ITSA Corp S.A.',
+      ruc: '80056789-3',
+      lob: 'Disability',
+      product: 'Protección Laboral Integral',
+      carrier: 'Continental Life',
+      status: 'onboarding',
+
+      contactName: 'Ing. Andrés Caballero',
+      contactEmail: 'acaballero@itsacorp.com.py',
+      contactPhone: '+595 21 620-1100',
+      hrContactName: 'Verónica Meza',
+      hrContactEmail: 'vmeza@itsacorp.com.py',
+
+      effectiveDate: '2026-05-01',
+      renewalDate: '2027-05-01',
+      onboardingDate: '2026-03-15',
+
+      totalMembers: 230,
+      activeMembersCount: 210,
+      dependentsCount: 0,
+      pendingEnrollment: 15,
+
+      monthlyPremium: 2625,
+      annualPremium: 31500,
+      commissionPct: 8,
+
+      agent: 'Carlos Villalba',
+
+      members: [
+        { id: 'mbr-003-01', name: 'Ing. Andrés Caballero', documentId: '1.111.222', email: 'acaballero@itsacorp.com.py', phone: '+595 983 444-001', role: 'CEO', department: 'Dirección', enrollmentDate: '2026-03-20', status: 'active', tier: 'Executive', dependents: 0, pendingDocs: [], formsCompleted: 5, formsTotal: 5 },
+        { id: 'mbr-003-02', name: 'Verónica Meza', documentId: '2.222.333', email: 'vmeza@itsacorp.com.py', phone: '+595 983 444-002', role: 'Gerente RRHH', department: 'RRHH', enrollmentDate: '2026-03-20', status: 'active', tier: 'Plus', dependents: 0, pendingDocs: [], formsCompleted: 5, formsTotal: 5 },
+        { id: 'mbr-003-03', name: 'Diego Portillo', documentId: '3.333.444', email: 'dportillo@itsacorp.com.py', phone: '+595 983 444-003', role: 'Operario Línea A', department: 'Producción', enrollmentDate: '2026-03-25', status: 'pending_enrollment', tier: 'Basic', dependents: 0, pendingDocs: ['Declaración de salud', 'Copia de CI', 'Formulario de inscripción'], formsCompleted: 1, formsTotal: 5 },
+        { id: 'mbr-003-04', name: 'Sandra Lezcano', documentId: '4.444.555', email: 'slezcano@itsacorp.com.py', phone: '+595 983 444-004', role: 'Supervisora de Calidad', department: 'Calidad', enrollmentDate: '2026-03-22', status: 'active', tier: 'Plus', dependents: 0, pendingDocs: [], formsCompleted: 5, formsTotal: 5 },
+        { id: 'mbr-003-05', name: 'Ramón Villasboa', documentId: '5.555.666', email: 'rvillasboa@itsacorp.com.py', phone: '+595 983 444-005', role: 'Técnico de Mantenimiento', department: 'Mantenimiento', enrollmentDate: '2026-04-01', status: 'pending_enrollment', tier: 'Basic', dependents: 0, pendingDocs: ['Declaración de salud', 'Formulario de inscripción'], formsCompleted: 2, formsTotal: 5 },
+        { id: 'mbr-003-06', name: 'Claudia Estigarribia', documentId: '6.666.777', email: 'cestigarribia@itsacorp.com.py', phone: '+595 983 444-006', role: 'Contadora', department: 'Finanzas', enrollmentDate: '2026-03-20', status: 'active', tier: 'Plus', dependents: 0, pendingDocs: [], formsCompleted: 5, formsTotal: 5 },
+        { id: 'mbr-003-07', name: 'Miguel Ayala', documentId: '7.777.888', email: 'mayala@itsacorp.com.py', phone: '+595 983 444-007', role: 'Jefe de Planta', department: 'Producción', enrollmentDate: '2026-03-20', status: 'active', tier: 'Plus', dependents: 0, pendingDocs: [], formsCompleted: 5, formsTotal: 5 },
+        { id: 'mbr-003-08', name: 'Lorena Cáceres', documentId: '8.888.999', email: 'lcaceres@itsacorp.com.py', phone: '+595 983 444-008', role: 'Asistente Administrativa', department: 'Administración', enrollmentDate: '2026-04-03', status: 'pending_docs', tier: 'Basic', dependents: 0, pendingDocs: ['Certificado de antecedentes'], formsCompleted: 4, formsTotal: 5 },
+      ],
+
+      documents: [
+        { id: 'doc-003-01', name: 'Propuesta Continental Life - Disability', category: 'contract', uploadedBy: 'Carlos Villalba', uploadedAt: '2026-03-10', fileSize: '2.8 MB', fileType: 'PDF', version: 1, notes: 'Propuesta aceptada por cliente' },
+        { id: 'doc-003-02', name: 'Censo Inicial ITSA Corp', category: 'census', uploadedBy: 'Verónica Meza', uploadedAt: '2026-03-18', fileSize: '1.2 MB', fileType: 'XLSX', version: 2, notes: 'V2 - corregidos datos de 12 empleados' },
+        { id: 'doc-003-03', name: 'Formularios de Inscripción (Lote 1)', category: 'enrollment', uploadedBy: 'Verónica Meza', uploadedAt: '2026-03-25', fileSize: '15.4 MB', fileType: 'PDF', version: 1, notes: '180 formularios escaneados' },
+        { id: 'doc-003-04', name: 'Declaraciones de Salud (Lote 1)', category: 'enrollment', uploadedBy: 'Verónica Meza', uploadedAt: '2026-03-28', fileSize: '22.1 MB', fileType: 'PDF', version: 1, notes: '175 declaraciones recibidas' },
+      ],
+
+      billingCycles: [
+        { id: 'bill-003-01', period: 'May 2026', dueDate: '2026-05-01', status: 'upcoming', invoiceAmount: 2625, paidAmount: 0, carrierRef: '', membersBilled: 0, membersExpected: 230, discrepancy: 0, notes: 'Primer ciclo de facturación' },
+        { id: 'bill-003-02', period: 'June 2026', dueDate: '2026-06-01', status: 'upcoming', invoiceAmount: 2625, paidAmount: 0, carrierRef: '', membersBilled: 0, membersExpected: 230, discrepancy: 0, notes: '' },
+        { id: 'bill-003-03', period: 'July 2026', dueDate: '2026-07-01', status: 'upcoming', invoiceAmount: 2625, paidAmount: 0, carrierRef: '', membersBilled: 0, membersExpected: 230, discrepancy: 0, notes: '' },
+      ],
+
+      serviceRequests: [
+        { id: 'sr-003-01', type: 'inclusion', subject: 'Completar inscripción de 15 empleados pendientes', status: 'in_progress', priority: 'high', assignee: 'Carlos Villalba', created: '2026-04-01', updated: '2026-04-07', notes: 'RRHH está recopilando formularios faltantes. Fecha límite: 04/15.' },
+        { id: 'sr-003-02', type: 'amendment', subject: 'Solicitud de inclusión de cobertura dental', status: 'open', priority: 'medium', assignee: 'Carlos Villalba', created: '2026-04-05', updated: '2026-04-05', notes: 'Cliente consulta costo adicional para rider dental.' },
+        { id: 'sr-003-03', type: 'certificate', subject: 'Emisión de certificados individuales - Lote inicial', status: 'pending_carrier', priority: 'medium', assignee: 'Carlos Villalba', created: '2026-03-28', updated: '2026-04-03', notes: 'Carrier procesando 210 certificados.' },
+      ],
+
+      recentActivity: [
+        { date: '2026-04-07', text: 'Seguimiento de formularios pendientes con RRHH', type: 'onboarding', actor: 'Carlos Villalba' },
+        { date: '2026-04-05', text: 'Nueva solicitud: consulta sobre rider dental', type: 'service_request', actor: 'Ing. Andrés Caballero' },
+        { date: '2026-04-03', text: 'Certificados enviados a Continental Life para emisión', type: 'service_request', actor: 'Carlos Villalba' },
+        { date: '2026-03-28', text: 'Lote 1 de declaraciones de salud cargado (175)', type: 'document', actor: 'Verónica Meza' },
+        { date: '2026-03-25', text: 'Lote 1 de formularios de inscripción cargado (180)', type: 'document', actor: 'Verónica Meza' },
+        { date: '2026-03-20', text: 'Onboarding iniciado - primeros empleados registrados', type: 'onboarding', actor: 'Carlos Villalba' },
+      ],
+
+      hasUrgentIssues: false,
+      outstandingClaims: 0,
+      pendingTasks: 18,
+    },
+
+    // ── 4. Municipalidad Central ──
+    {
+      id: 'col-004',
+      name: 'Municipalidad Central',
+      ruc: '80078901-5',
+      lob: 'Health',
+      product: 'Salud Pública Municipal',
+      carrier: 'Vida Plena',
+      status: 'active',
+
+      contactName: 'Lic. Gustavo Ferreira',
+      contactEmail: 'gferreira@muniasuncion.gov.py',
+      contactPhone: '+595 21 440-5500',
+      hrContactName: 'Norma Jiménez',
+      hrContactEmail: 'njimenez@muniasuncion.gov.py',
+
+      effectiveDate: '2025-01-01',
+      renewalDate: '2026-01-01',
+      onboardingDate: '2024-11-15',
+
+      totalMembers: 640,
+      activeMembersCount: 625,
+      dependentsCount: 1120,
+      pendingEnrollment: 8,
+
+      monthlyPremium: 16500,
+      annualPremium: 198000,
+      commissionPct: 9,
+
+      agent: 'Carlos Villalba',
+
+      members: [
+        { id: 'mbr-004-01', name: 'Lic. Gustavo Ferreira', documentId: '1.010.101', email: 'gferreira@muniasuncion.gov.py', phone: '+595 984 555-001', role: 'Secretario General', department: 'Secretaría General', enrollmentDate: '2025-01-01', status: 'active', tier: 'Executive', dependents: 4, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-004-02', name: 'Norma Jiménez', documentId: '2.020.202', email: 'njimenez@muniasuncion.gov.py', phone: '+595 984 555-002', role: 'Directora de RRHH', department: 'RRHH', enrollmentDate: '2025-01-01', status: 'active', tier: 'Plus', dependents: 3, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-004-03', name: 'Pedro Gauto', documentId: '3.030.303', email: 'pgauto@muniasuncion.gov.py', phone: '+595 984 555-003', role: 'Inspector de Obras', department: 'Obras Públicas', enrollmentDate: '2025-01-01', status: 'active', tier: 'Basic', dependents: 2, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-004-04', name: 'María Bogado', documentId: '4.040.404', email: 'mbogado@muniasuncion.gov.py', phone: '+595 984 555-004', role: 'Asistente Social', department: 'Acción Social', enrollmentDate: '2025-02-01', status: 'active', tier: 'Basic', dependents: 1, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-004-05', name: 'Juan Arce', documentId: '5.050.505', email: 'jarce@muniasuncion.gov.py', phone: '+595 984 555-005', role: 'Conductor', department: 'Transporte', enrollmentDate: '2025-01-15', status: 'active', tier: 'Basic', dependents: 3, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-004-06', name: 'Blanca Ovelar', documentId: '6.060.606', email: 'bovelar@muniasuncion.gov.py', phone: '+595 984 555-006', role: 'Contadora Municipal', department: 'Finanzas', enrollmentDate: '2025-01-01', status: 'active', tier: 'Plus', dependents: 2, pendingDocs: [], formsCompleted: 4, formsTotal: 4 },
+        { id: 'mbr-004-07', name: 'Raúl Cabrera', documentId: '7.070.707', email: 'rcabrera@muniasuncion.gov.py', phone: '+595 984 555-007', role: 'Jardinero Municipal', department: 'Espacios Verdes', enrollmentDate: '2025-03-01', status: 'pending_docs', tier: 'Basic', dependents: 1, pendingDocs: ['Formulario de dependientes actualizado'], formsCompleted: 3, formsTotal: 4 },
+      ],
+
+      documents: [
+        { id: 'doc-004-01', name: 'Póliza Colectiva Municipal 2025', category: 'policy', uploadedBy: 'Carlos Villalba', uploadedAt: '2024-12-20', fileSize: '5.8 MB', fileType: 'PDF', version: 1, notes: '' },
+        { id: 'doc-004-02', name: 'Convenio Marco Municipalidad-Brokerage', category: 'contract', uploadedBy: 'Carlos Villalba', uploadedAt: '2024-11-25', fileSize: '3.2 MB', fileType: 'PDF', version: 1, notes: 'Aprobado por resolución municipal #2024-1820' },
+        { id: 'doc-004-03', name: 'Censo Febrero 2026', category: 'census', uploadedBy: 'Norma Jiménez', uploadedAt: '2026-02-28', fileSize: '2.1 MB', fileType: 'XLSX', version: 1, notes: '8 altas, 3 bajas' },
+        { id: 'doc-004-04', name: 'Endoso #5 - Ajuste Feb 2026', category: 'endorsement', uploadedBy: 'Carlos Villalba', uploadedAt: '2026-03-10', fileSize: '280 KB', fileType: 'PDF', version: 1, notes: '' },
+        { id: 'doc-004-05', name: 'Reporte Siniestralidad 2025 Anual', category: 'siniestralidad', uploadedBy: 'Vida Plena', uploadedAt: '2026-02-15', fileSize: '4.5 MB', fileType: 'PDF', version: 1, notes: 'Siniestralidad 82% - bandera amarilla' },
+        { id: 'doc-004-06', name: 'Carta de Reclamo - Diferencia Facturación', category: 'correspondence', uploadedBy: 'Blanca Ovelar', uploadedAt: '2026-03-22', fileSize: '95 KB', fileType: 'PDF', version: 1, notes: 'Reclamo formal por discrepancia en marzo' },
+        { id: 'doc-004-07', name: 'Endoso #6 - Inclusiones Mar 2026', category: 'endorsement', uploadedBy: 'Carlos Villalba', uploadedAt: '2026-04-01', fileSize: '310 KB', fileType: 'PDF', version: 1, notes: '' },
+        { id: 'doc-004-08', name: 'Censo Marzo 2026', category: 'census', uploadedBy: 'Norma Jiménez', uploadedAt: '2026-03-31', fileSize: '2.2 MB', fileType: 'XLSX', version: 1, notes: '5 altas nuevas' },
+      ],
+
+      billingCycles: [
+        { id: 'bill-004-01', period: 'January 2026', dueDate: '2026-01-10', status: 'paid', invoiceAmount: 16200, paidAmount: 16200, carrierRef: 'VP-2026-0640-01', membersBilled: 635, membersExpected: 635, discrepancy: 0, notes: '' },
+        { id: 'bill-004-02', period: 'February 2026', dueDate: '2026-02-10', status: 'paid', invoiceAmount: 16350, paidAmount: 16350, carrierRef: 'VP-2026-0640-02', membersBilled: 638, membersExpected: 638, discrepancy: 0, notes: '' },
+        { id: 'bill-004-03', period: 'March 2026', dueDate: '2026-03-10', status: 'disputed', invoiceAmount: 16700, paidAmount: 0, carrierRef: 'VP-2026-0640-03', membersBilled: 648, membersExpected: 640, discrepancy: 8, notes: 'Carrier facturó 8 miembros de más. Cliente reclama diferencia de $208.' },
+        { id: 'bill-004-04', period: 'April 2026', dueDate: '2026-04-10', status: 'overdue', invoiceAmount: 16500, paidAmount: 0, carrierRef: 'VP-2026-0640-04', membersBilled: 640, membersExpected: 640, discrepancy: 0, notes: 'Cliente retiene pago hasta resolución de disputa de Marzo.' },
+        { id: 'bill-004-05', period: 'May 2026', dueDate: '2026-05-10', status: 'upcoming', invoiceAmount: 16500, paidAmount: 0, carrierRef: '', membersBilled: 0, membersExpected: 640, discrepancy: 0, notes: '' },
+        { id: 'bill-004-06', period: 'June 2026', dueDate: '2026-06-10', status: 'upcoming', invoiceAmount: 16500, paidAmount: 0, carrierRef: '', membersBilled: 0, membersExpected: 640, discrepancy: 0, notes: '' },
+      ],
+
+      serviceRequests: [
+        { id: 'sr-004-01', type: 'billing', subject: 'Discrepancia facturación Marzo - 8 miembros de más', status: 'in_progress', priority: 'high', assignee: 'Carlos Villalba', created: '2026-03-15', updated: '2026-04-06', notes: 'Carrier reconoce error. Nota de crédito en proceso. Cliente retiene pago de Abril hasta resolución.' },
+        { id: 'sr-004-02', type: 'inclusion', subject: 'Alta de 5 nuevos empleados - Marzo 2026', status: 'resolved', priority: 'medium', assignee: 'Carlos Villalba', created: '2026-03-05', updated: '2026-03-18', notes: 'Endoso procesado. Todos los certificados emitidos.' },
+        { id: 'sr-004-03', type: 'exclusion', subject: 'Baja de 3 empleados retirados', status: 'resolved', priority: 'medium', assignee: 'Carlos Villalba', created: '2026-02-20', updated: '2026-03-01', notes: 'Bajas procesadas en endoso #5.' },
+        { id: 'sr-004-04', type: 'claim', subject: 'Reclamo hospitalización - Expediente #7810', status: 'pending_carrier', priority: 'medium', assignee: 'Carlos Villalba', created: '2026-03-20', updated: '2026-04-02', memberName: 'Pedro Gauto', notes: 'Documentación completa enviada a carrier.' },
+        { id: 'sr-004-05', type: 'amendment', subject: 'Solicitud de mejora de cobertura oftalmológica', status: 'open', priority: 'low', assignee: 'Carlos Villalba', created: '2026-04-03', updated: '2026-04-03', notes: 'Sindicato solicitó mejoras. Pendiente cotización de carrier.' },
+      ],
+
+      recentActivity: [
+        { date: '2026-04-06', text: 'Carrier confirmó nota de crédito en proceso por discrepancia Marzo', type: 'billing', actor: 'Vida Plena' },
+        { date: '2026-04-03', text: 'Sindicato solicita mejora en cobertura oftalmológica', type: 'service_request', actor: 'Norma Jiménez' },
+        { date: '2026-04-01', text: 'Endoso #6 procesado - inclusiones de Marzo', type: 'endorsement', actor: 'Carlos Villalba' },
+        { date: '2026-03-31', text: 'Censo Marzo 2026 recibido', type: 'document', actor: 'Norma Jiménez' },
+        { date: '2026-03-22', text: 'Carta formal de reclamo por diferencia en facturación', type: 'correspondence', actor: 'Blanca Ovelar' },
+        { date: '2026-03-15', text: 'Discrepancia detectada en factura de Marzo: 8 miembros de más', type: 'billing', actor: 'Carlos Villalba' },
+        { date: '2026-03-10', text: 'Endoso #5 procesado', type: 'endorsement', actor: 'Carlos Villalba' },
+        { date: '2026-02-15', text: 'Reporte de siniestralidad anual 2025 recibido - 82%', type: 'document', actor: 'Vida Plena' },
+      ],
+
+      hasUrgentIssues: false,
+      outstandingClaims: 1,
+      pendingTasks: 4,
+    },
+
+    // ── 5. Grupo Agrícola del Sur ──
+    {
+      id: 'col-005',
+      name: 'Grupo Agrícola del Sur S.A.',
+      ruc: '80090123-8',
+      lob: 'Life',
+      product: 'Vida Grupal Protección Familiar',
+      carrier: 'Seguros del Pacífico',
+      status: 'renewal_due',
+
+      contactName: 'Ing. Agr. Héctor Bogado',
+      contactEmail: 'hbogado@gagricsur.com.py',
+      contactPhone: '+595 71 205-600',
+      hrContactName: 'Celeste Riveros',
+      hrContactEmail: 'criveros@gagricsur.com.py',
+
+      effectiveDate: '2025-05-01',
+      renewalDate: '2026-05-01',
+      onboardingDate: '2025-04-10',
+
+      totalMembers: 175,
+      activeMembersCount: 170,
+      dependentsCount: 310,
+      pendingEnrollment: 0,
+
+      monthlyPremium: 4833,
+      annualPremium: 58000,
+      commissionPct: 11,
+
+      agent: 'María Fernanda Ortiz',
+
+      members: [
+        { id: 'mbr-005-01', name: 'Ing. Agr. Héctor Bogado', documentId: '1.515.151', email: 'hbogado@gagricsur.com.py', phone: '+595 985 666-001', role: 'Director General', department: 'Dirección', enrollmentDate: '2025-05-01', status: 'active', tier: 'Executive', dependents: 4, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-005-02', name: 'Celeste Riveros', documentId: '2.525.252', email: 'criveros@gagricsur.com.py', phone: '+595 985 666-002', role: 'Gerente de RRHH', department: 'RRHH', enrollmentDate: '2025-05-01', status: 'active', tier: 'Plus', dependents: 2, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-005-03', name: 'Tomás Aquino', documentId: '3.535.353', email: 'taquino@gagricsur.com.py', phone: '+595 985 666-003', role: 'Capataz de Campo', department: 'Operaciones de Campo', enrollmentDate: '2025-05-01', status: 'active', tier: 'Basic', dependents: 3, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-005-04', name: 'Rosa Benítez', documentId: '4.545.454', email: 'rbenitez@gagricsur.com.py', phone: '+595 985 666-004', role: 'Ingeniera Agrónoma', department: 'Técnica', enrollmentDate: '2025-05-15', status: 'active', tier: 'Plus', dependents: 1, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-005-05', name: 'Óscar Domínguez', documentId: '5.555.565', email: 'odominguez@gagricsur.com.py', phone: '+595 985 666-005', role: 'Chofer de Camión', department: 'Logística', enrollmentDate: '2025-06-01', status: 'active', tier: 'Basic', dependents: 2, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-005-06', name: 'Luz Marina Espínola', documentId: '6.565.656', email: 'lespinola@gagricsur.com.py', phone: '+595 985 666-006', role: 'Contadora', department: 'Administración', enrollmentDate: '2025-05-01', status: 'active', tier: 'Plus', dependents: 1, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-005-07', name: 'Esteban Villalba', documentId: '7.575.757', email: 'evillalba@gagricsur.com.py', phone: '+595 985 666-007', role: 'Peón Rural', department: 'Operaciones de Campo', enrollmentDate: '2025-07-01', status: 'excluded', tier: 'Basic', dependents: 0, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+      ],
+
+      documents: [
+        { id: 'doc-005-01', name: 'Póliza Vida Grupal 2025-2026', category: 'policy', uploadedBy: 'María Fernanda Ortiz', uploadedAt: '2025-04-28', fileSize: '3.5 MB', fileType: 'PDF', version: 1, notes: '' },
+        { id: 'doc-005-02', name: 'Contrato de Intermediación', category: 'contract', uploadedBy: 'María Fernanda Ortiz', uploadedAt: '2025-04-15', fileSize: '1.6 MB', fileType: 'PDF', version: 1, notes: '' },
+        { id: 'doc-005-03', name: 'Censo Actualizado Marzo 2026', category: 'census', uploadedBy: 'Celeste Riveros', uploadedAt: '2026-03-20', fileSize: '680 KB', fileType: 'XLSX', version: 1, notes: '1 exclusión (Villalba, E.) por renuncia' },
+        { id: 'doc-005-04', name: 'Propuesta de Renovación 2026-2027', category: 'other', uploadedBy: 'María Fernanda Ortiz', uploadedAt: '2026-03-25', fileSize: '2.2 MB', fileType: 'PDF', version: 1, notes: 'Incluye 3 opciones de carrier' },
+        { id: 'doc-005-05', name: 'Siniestralidad Acumulada 2025-2026', category: 'siniestralidad', uploadedBy: 'Seguros del Pacífico', uploadedAt: '2026-03-15', fileSize: '1.8 MB', fileType: 'PDF', version: 1, notes: 'Siniestralidad al 45% - muy favorable' },
+      ],
+
+      billingCycles: [
+        { id: 'bill-005-01', period: 'February 2026', dueDate: '2026-02-15', status: 'paid', invoiceAmount: 4833, paidAmount: 4833, carrierRef: 'SP-2026-0175-02', membersBilled: 175, membersExpected: 175, discrepancy: 0, notes: '' },
+        { id: 'bill-005-02', period: 'March 2026', dueDate: '2026-03-15', status: 'paid', invoiceAmount: 4810, paidAmount: 4810, carrierRef: 'SP-2026-0175-03', membersBilled: 174, membersExpected: 174, discrepancy: 0, notes: '1 baja procesada' },
+        { id: 'bill-005-03', period: 'April 2026', dueDate: '2026-04-15', status: 'invoiced', invoiceAmount: 4810, paidAmount: 0, carrierRef: 'SP-2026-0175-04', membersBilled: 174, membersExpected: 174, discrepancy: 0, notes: '' },
+      ],
+
+      serviceRequests: [
+        { id: 'sr-005-01', type: 'claim', subject: 'Reclamo fallecimiento - Beneficiario Flia. Aquino', status: 'in_progress', priority: 'high', assignee: 'María Fernanda Ortiz', created: '2026-02-10', updated: '2026-04-01', memberName: 'Tomás Aquino', notes: 'Documentación de siniestro completa. Carrier en revisión. Monto: Gs. 350.000.000.' },
+        { id: 'sr-005-02', type: 'exclusion', subject: 'Baja por renuncia - Esteban Villalba', status: 'resolved', priority: 'low', assignee: 'María Fernanda Ortiz', created: '2026-03-01', updated: '2026-03-15', memberName: 'Esteban Villalba', notes: 'Procesado en endoso.' },
+        { id: 'sr-005-03', type: 'amendment', subject: 'Propuesta de renovación 2026-2027 - Negociación', status: 'in_progress', priority: 'high', assignee: 'María Fernanda Ortiz', created: '2026-03-25', updated: '2026-04-05', notes: 'Presentadas 3 opciones. Cliente evaluando. Reunión programada para 04/12.' },
+      ],
+
+      recentActivity: [
+        { date: '2026-04-05', text: 'Seguimiento de propuesta de renovación con cliente', type: 'renewal', actor: 'María Fernanda Ortiz' },
+        { date: '2026-04-01', text: 'Carrier actualiza estado de reclamo Flia. Aquino', type: 'claim_update', actor: 'Seguros del Pacífico' },
+        { date: '2026-03-25', text: 'Propuesta de renovación enviada al cliente (3 opciones)', type: 'renewal', actor: 'María Fernanda Ortiz' },
+        { date: '2026-03-20', text: 'Censo actualizado recibido', type: 'document', actor: 'Celeste Riveros' },
+        { date: '2026-03-15', text: 'Reporte de siniestralidad recibido - 45%', type: 'document', actor: 'Seguros del Pacífico' },
+        { date: '2026-03-01', text: 'Solicitud de baja: Esteban Villalba por renuncia', type: 'exclusion', actor: 'Celeste Riveros' },
+      ],
+
+      hasUrgentIssues: false,
+      outstandingClaims: 1,
+      pendingTasks: 3,
+    },
+
+    // ── 6. Tech Solutions S.A. ──
+    {
+      id: 'col-006',
+      name: 'Tech Solutions S.A.',
+      ruc: '80101234-2',
+      lob: 'Health',
+      product: 'Salud Digital Premium',
+      carrier: 'Integral Medical',
+      status: 'active',
+
+      contactName: 'Lic. Pamela Giménez',
+      contactEmail: 'pgimenez@techsolutions.com.py',
+      contactPhone: '+595 21 730-8800',
+      hrContactName: 'Rodrigo Sanabria',
+      hrContactEmail: 'rsanabria@techsolutions.com.py',
+
+      effectiveDate: '2025-11-01',
+      renewalDate: '2026-11-01',
+      onboardingDate: '2025-10-15',
+
+      totalMembers: 62,
+      activeMembersCount: 60,
+      dependentsCount: 85,
+      pendingEnrollment: 2,
+
+      monthlyPremium: 3125,
+      annualPremium: 37500,
+      commissionPct: 10,
+
+      agent: 'María Fernanda Ortiz',
+
+      members: [
+        { id: 'mbr-006-01', name: 'Lic. Pamela Giménez', documentId: '1.616.161', email: 'pgimenez@techsolutions.com.py', phone: '+595 986 777-001', role: 'CEO', department: 'Dirección', enrollmentDate: '2025-11-01', status: 'active', tier: 'Executive', dependents: 2, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-006-02', name: 'Rodrigo Sanabria', documentId: '2.626.262', email: 'rsanabria@techsolutions.com.py', phone: '+595 986 777-002', role: 'People & Culture Lead', department: 'People', enrollmentDate: '2025-11-01', status: 'active', tier: 'Plus', dependents: 1, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-006-03', name: 'Matías Recalde', documentId: '3.636.363', email: 'mrecalde@techsolutions.com.py', phone: '+595 986 777-003', role: 'CTO', department: 'Engineering', enrollmentDate: '2025-11-01', status: 'active', tier: 'Executive', dependents: 3, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-006-04', name: 'Sofía Cardozo', documentId: '4.646.464', email: 'scardozo@techsolutions.com.py', phone: '+595 986 777-004', role: 'UX Designer', department: 'Design', enrollmentDate: '2025-11-15', status: 'active', tier: 'Plus', dependents: 0, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-006-05', name: 'Alejandro Núñez', documentId: '5.656.565', email: 'anunez@techsolutions.com.py', phone: '+595 986 777-005', role: 'Full Stack Developer', department: 'Engineering', enrollmentDate: '2025-12-01', status: 'active', tier: 'Basic', dependents: 1, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-006-06', name: 'Valeria Ocampos', documentId: '6.666.676', email: 'vocampos@techsolutions.com.py', phone: '+595 986 777-006', role: 'QA Engineer', department: 'Engineering', enrollmentDate: '2026-01-15', status: 'active', tier: 'Basic', dependents: 0, pendingDocs: [], formsCompleted: 3, formsTotal: 3 },
+        { id: 'mbr-006-07', name: 'Nicolás Franco', documentId: '7.676.767', email: 'nfranco@techsolutions.com.py', phone: '+595 986 777-007', role: 'DevOps Engineer', department: 'Engineering', enrollmentDate: '2026-03-01', status: 'pending_enrollment', tier: 'Basic', dependents: 0, pendingDocs: ['Formulario de inscripción'], formsCompleted: 2, formsTotal: 3 },
+        { id: 'mbr-006-08', name: 'Carolina Espínola', documentId: '8.686.868', email: 'cespinola@techsolutions.com.py', phone: '+595 986 777-008', role: 'Product Manager', department: 'Product', enrollmentDate: '2026-03-15', status: 'pending_enrollment', tier: 'Plus', dependents: 1, pendingDocs: ['Formulario de inscripción', 'Declaración de salud'], formsCompleted: 1, formsTotal: 3 },
+      ],
+
+      documents: [
+        { id: 'doc-006-01', name: 'Póliza Salud Digital Premium 2025-2026', category: 'policy', uploadedBy: 'María Fernanda Ortiz', uploadedAt: '2025-10-28', fileSize: '2.9 MB', fileType: 'PDF', version: 1, notes: '' },
+        { id: 'doc-006-02', name: 'Contrato de Intermediación', category: 'contract', uploadedBy: 'María Fernanda Ortiz', uploadedAt: '2025-10-20', fileSize: '1.3 MB', fileType: 'PDF', version: 1, notes: '' },
+        { id: 'doc-006-03', name: 'Censo Q1 2026', category: 'census', uploadedBy: 'Rodrigo Sanabria', uploadedAt: '2026-03-30', fileSize: '310 KB', fileType: 'XLSX', version: 1, notes: '2 nuevas altas pendientes' },
+        { id: 'doc-006-04', name: 'Endoso #2 - Inclusiones Ene 2026', category: 'endorsement', uploadedBy: 'María Fernanda Ortiz', uploadedAt: '2026-01-25', fileSize: '185 KB', fileType: 'PDF', version: 1, notes: '' },
+      ],
+
+      billingCycles: [
+        { id: 'bill-006-01', period: 'February 2026', dueDate: '2026-02-05', status: 'paid', invoiceAmount: 3050, paidAmount: 3050, carrierRef: 'IM-2026-062-02', membersBilled: 60, membersExpected: 60, discrepancy: 0, notes: '' },
+        { id: 'bill-006-02', period: 'March 2026', dueDate: '2026-03-05', status: 'paid', invoiceAmount: 3050, paidAmount: 3050, carrierRef: 'IM-2026-062-03', membersBilled: 60, membersExpected: 60, discrepancy: 0, notes: '' },
+        { id: 'bill-006-03', period: 'April 2026', dueDate: '2026-04-05', status: 'paid', invoiceAmount: 3125, paidAmount: 3125, carrierRef: 'IM-2026-062-04', membersBilled: 62, membersExpected: 62, discrepancy: 0, notes: 'Incluye 2 nuevos miembros pendientes de inscripción formal' },
+      ],
+
+      serviceRequests: [
+        { id: 'sr-006-01', type: 'inclusion', subject: 'Alta de 2 nuevos empleados - Marzo 2026', status: 'in_progress', priority: 'medium', assignee: 'María Fernanda Ortiz', created: '2026-03-10', updated: '2026-04-02', notes: 'Faltan formularios de inscripción. People & Culture dará seguimiento.' },
+        { id: 'sr-006-02', type: 'certificate', subject: 'Certificado para trámite de visa - S. Cardozo', status: 'resolved', priority: 'medium', assignee: 'María Fernanda Ortiz', created: '2026-03-18', updated: '2026-03-22', memberName: 'Sofía Cardozo', notes: 'Certificado emitido y enviado.' },
+      ],
+
+      recentActivity: [
+        { date: '2026-04-05', text: 'Factura Abril pagada a tiempo', type: 'billing', actor: 'Rodrigo Sanabria' },
+        { date: '2026-04-02', text: 'Seguimiento de formularios pendientes para nuevas altas', type: 'service_request', actor: 'María Fernanda Ortiz' },
+        { date: '2026-03-30', text: 'Censo Q1 2026 cargado', type: 'document', actor: 'Rodrigo Sanabria' },
+        { date: '2026-03-22', text: 'Certificado de visa emitido para Sofía Cardozo', type: 'service_request', actor: 'María Fernanda Ortiz' },
+        { date: '2026-03-10', text: 'Solicitud de alta para 2 nuevos empleados', type: 'inclusion', actor: 'Rodrigo Sanabria' },
+      ],
+
+      hasUrgentIssues: false,
+      outstandingClaims: 0,
+      pendingTasks: 2,
+    },
+  ]
+}
+
+/* ── Composable ── */
+
+const KEY = 'policy-ui-colectivos-v1'
+
+export function useColectivos() {
+  const accounts = useLocalStorageRef<ColectivoAccount[]>(KEY, buildDefaultAccounts)
+
+  /* ── Lookups ── */
+
+  function getAccount(id: string): ColectivoAccount | undefined {
+    return accounts.value.find(a => a.id === id)
+  }
+
+  function getAccountMembers(accountId: string): ColectivoMember[] {
+    return getAccount(accountId)?.members ?? []
+  }
+
+  function getAccountServiceRequests(accountId: string): ServiceRequest[] {
+    return getAccount(accountId)?.serviceRequests ?? []
+  }
+
+  /* ── Filtered lists ── */
+
+  const activeAccounts = computed(() =>
+    accounts.value.filter(a => a.status === 'active'),
+  )
+
+  const onboardingAccounts = computed(() =>
+    accounts.value.filter(a => a.status === 'onboarding'),
+  )
+
+  /* ── Aggregate stats ── */
+
+  const totalMembers = computed(() =>
+    accounts.value.reduce((sum, a) => sum + a.totalMembers, 0),
+  )
+
+  const totalDependents = computed(() =>
+    accounts.value.reduce((sum, a) => sum + a.dependentsCount, 0),
+  )
+
+  const totalPremium = computed(() =>
+    accounts.value.reduce((sum, a) => sum + a.annualPremium, 0),
+  )
+
+  const urgentIssuesCount = computed(() =>
+    accounts.value.filter(a => a.hasUrgentIssues).length,
+  )
+
+  return {
+    accounts,
+    getAccount,
+    getAccountMembers,
+    getAccountServiceRequests,
+    activeAccounts,
+    onboardingAccounts,
+    totalMembers,
+    totalDependents,
+    totalPremium,
+    urgentIssuesCount,
+  }
+}
diff --git a/app/composables/useCustomerAttention.ts b/app/composables/useCustomerAttention.ts
new file mode 100644
index 0000000..a71cec2
--- /dev/null
+++ b/app/composables/useCustomerAttention.ts
@@ -0,0 +1,228 @@
+import { computed } from 'vue'
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+/* ── Types ── */
+
+export type ServiceTierId = string
+
+export interface ServiceTier {
+  id: ServiceTierId
+  name: string
+  color: string
+  icon: string
+  description: string
+  minScore: number
+  benefits: string[]
+}
+
+export interface AttentionRule {
+  id: string
+  field: 'premium' | 'policy_count' | 'commission' | 'collectivo_member' | 'multi_line' | 'tenure_years' | 'has_private_policies'
+  operator: 'gte' | 'lte' | 'eq' | 'gt' | 'lt'
+  value: number | boolean
+  points: number
+  label: string
+}
+
+export interface CustomerAttentionConfig {
+  tiers: ServiceTier[]
+  rules: AttentionRule[]
+  autoClassify: boolean
+}
+
+/* ── Defaults ── */
+
+function defaultTiers(): ServiceTier[] {
+  return [
+    {
+      id: 'platinum',
+      name: 'Platinum',
+      color: '#7c3aed',
+      icon: 'i-heroicons-star',
+      description: 'VIP multi-line clients with highest lifetime value',
+      minScore: 80,
+      benefits: ['Priority claims handling', 'Dedicated account manager', 'Annual review', 'Renewal negotiation priority'],
+    },
+    {
+      id: 'gold',
+      name: 'Gold',
+      color: '#d4a017',
+      icon: 'i-heroicons-trophy',
+      description: 'Established clients with strong portfolio',
+      minScore: 55,
+      benefits: ['Priority support', 'Proactive renewal outreach', 'Cross-sell consultation'],
+    },
+    {
+      id: 'silver',
+      name: 'Silver',
+      color: '#6b7280',
+      icon: 'i-heroicons-shield-check',
+      description: 'Active clients with growth potential',
+      minScore: 30,
+      benefits: ['Standard support', 'Regular check-ins'],
+    },
+    {
+      id: 'standard',
+      name: 'Standard',
+      color: '#01696f',
+      icon: 'i-heroicons-user',
+      description: 'All active customers',
+      minScore: 0,
+      benefits: ['Standard service'],
+    },
+  ]
+}
+
+function defaultRules(): AttentionRule[] {
+  return [
+    { id: 'r1', field: 'premium', operator: 'gte', value: 5000, points: 25, label: 'Annual premium >= $5,000' },
+    { id: 'r2', field: 'premium', operator: 'gte', value: 10000, points: 40, label: 'Annual premium >= $10,000' },
+    { id: 'r3', field: 'policy_count', operator: 'gte', value: 3, points: 15, label: '3+ active policies' },
+    { id: 'r4', field: 'policy_count', operator: 'gte', value: 5, points: 25, label: '5+ active policies' },
+    { id: 'r5', field: 'multi_line', operator: 'gte', value: 3, points: 20, label: 'Multi-line (3+ different lines)' },
+    { id: 'r6', field: 'tenure_years', operator: 'gte', value: 3, points: 10, label: 'Client for 3+ years' },
+    { id: 'r7', field: 'tenure_years', operator: 'gte', value: 5, points: 20, label: 'Client for 5+ years' },
+    { id: 'r8', field: 'collectivo_member', operator: 'eq', value: true, points: 15, label: 'Collectivo member with private policies' },
+    { id: 'r9', field: 'commission', operator: 'gte', value: 1000, points: 10, label: 'Annual commission >= $1,000' },
+  ]
+}
+
+function defaultConfig(): CustomerAttentionConfig {
+  return {
+    tiers: defaultTiers(),
+    rules: defaultRules(),
+    autoClassify: true,
+  }
+}
+
+/* ── Customer input shape ── */
+
+export interface CustomerAttentionInput {
+  totalPremium: number
+  policyCount: number
+  lineCount: number
+  tenureYears: number
+  isCollectivoMember: boolean
+  hasPrivatePolicies: boolean
+  estimatedCommission: number
+}
+
+/* ── Rule evaluation ── */
+
+function evaluateRule(rule: AttentionRule, customer: CustomerAttentionInput): boolean {
+  let fieldValue: number | boolean
+
+  switch (rule.field) {
+    case 'premium':
+      fieldValue = customer.totalPremium
+      break
+    case 'policy_count':
+      fieldValue = customer.policyCount
+      break
+    case 'commission':
+      fieldValue = customer.estimatedCommission
+      break
+    case 'multi_line':
+      fieldValue = customer.lineCount
+      break
+    case 'tenure_years':
+      fieldValue = customer.tenureYears
+      break
+    case 'collectivo_member':
+      // Special: collectivo member rule only matches if also has private policies
+      return rule.value === true && customer.isCollectivoMember && customer.hasPrivatePolicies
+    case 'has_private_policies':
+      return typeof rule.value === 'boolean' ? customer.hasPrivatePolicies === rule.value : false
+    default:
+      return false
+  }
+
+  if (typeof fieldValue === 'boolean' || typeof rule.value === 'boolean') return false
+
+  switch (rule.operator) {
+    case 'gte': return (fieldValue as number) >= (rule.value as number)
+    case 'gt':  return (fieldValue as number) > (rule.value as number)
+    case 'lte': return (fieldValue as number) <= (rule.value as number)
+    case 'lt':  return (fieldValue as number) < (rule.value as number)
+    case 'eq':  return (fieldValue as number) === (rule.value as number)
+    default:    return false
+  }
+}
+
+/* ── Composable ── */
+
+export function useCustomerAttention() {
+  const config = useLocalStorageRef<CustomerAttentionConfig>('policy-ui-customer-attention-v1', defaultConfig)
+
+  const tiers = computed(() => [...config.value.tiers].sort((a, b) => b.minScore - a.minScore))
+
+  const rules = computed(() => config.value.rules)
+
+  function getScoreForCustomer(customer: CustomerAttentionInput): number {
+    let score = 0
+    for (const rule of config.value.rules) {
+      if (evaluateRule(rule, customer)) {
+        score += rule.points
+      }
+    }
+    return score
+  }
+
+  function getTierForCustomer(customer: CustomerAttentionInput): ServiceTier {
+    const score = getScoreForCustomer(customer)
+    const sorted = [...config.value.tiers].sort((a, b) => b.minScore - a.minScore)
+    for (const tier of sorted) {
+      if (score >= tier.minScore) return tier
+    }
+    // Fallback to lowest tier
+    return sorted[sorted.length - 1] ?? config.value.tiers[0]
+  }
+
+  /* ── Tier CRUD ── */
+
+  function addTier(tier: ServiceTier) {
+    config.value.tiers.push(tier)
+  }
+
+  function updateTier(id: string, patch: Partial<ServiceTier>) {
+    const idx = config.value.tiers.findIndex(t => t.id === id)
+    if (idx !== -1) {
+      config.value.tiers[idx] = { ...config.value.tiers[idx], ...patch }
+    }
+  }
+
+  function removeTier(id: string) {
+    config.value.tiers = config.value.tiers.filter(t => t.id !== id)
+  }
+
+  /* ── Rule CRUD ── */
+
+  function addRule(rule: AttentionRule) {
+    config.value.rules.push(rule)
+  }
+
+  function updateRule(id: string, patch: Partial<AttentionRule>) {
+    const idx = config.value.rules.findIndex(r => r.id === id)
+    if (idx !== -1) {
+      config.value.rules[idx] = { ...config.value.rules[idx], ...patch }
+    }
+  }
+
+  function removeRule(id: string) {
+    config.value.rules = config.value.rules.filter(r => r.id !== id)
+  }
+
+  return {
+    config,
+    tiers,
+    rules,
+    getScoreForCustomer,
+    getTierForCustomer,
+    addTier,
+    updateTier,
+    removeTier,
+    addRule,
+    updateRule,
+    removeRule,
+  }
+}
diff --git a/app/composables/useCustomerProfileVault.ts b/app/composables/useCustomerProfileVault.ts
new file mode 100644
index 0000000..642dcc1
--- /dev/null
+++ b/app/composables/useCustomerProfileVault.ts
@@ -0,0 +1,18 @@
+import { emptyCustomerProfile, type CustomerProfileVault } from '~/types/customer-profile'
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+const KEY = 'policy-ui-customer-profile-vault-v1'
+
+export function useCustomerProfileVault() {
+  const profile = useLocalStorageRef(KEY, () => emptyCustomerProfile())
+
+  function touch() {
+    profile.value.updatedAt = new Date().toISOString()
+  }
+
+  function reset() {
+    profile.value = emptyCustomerProfile()
+  }
+
+  return { profile, touch, reset }
+}
diff --git a/app/composables/useDashboardHomeWidgets.ts b/app/composables/useDashboardHomeWidgets.ts
new file mode 100644
index 0000000..62fbaa8
--- /dev/null
+++ b/app/composables/useDashboardHomeWidgets.ts
@@ -0,0 +1,273 @@
+/**
+ * Home dashboard widget visibility — role presets + per-widget toggles.
+ * Persisted locally until per-user API exists.
+ */
+
+export type DashboardWidgetId =
+  | 'hero'
+  | 'milestone'
+  | 'performance'
+  | 'tasks_alerts'
+  | 'charts'
+  | 'brokerage_health'
+  | 'quotes_line'
+  | 'notes'
+  | 'calendar'
+  | 'quick_leads'
+  | 'sales_leads'
+  | 'client_favorites'
+  | 'drafts'
+
+export type DashboardRolePresetId =
+  | 'sales_manager'
+  | 'executive_manager'
+  | 'director'
+  | 'financial'
+  | 'admin_manager'
+  | 'customer_service_manager'
+
+export type DashboardWidgetMeta = {
+  id: DashboardWidgetId
+  label: string
+  description: string
+}
+
+export const DASHBOARD_WIDGETS: DashboardWidgetMeta[] = [
+  { id: 'hero', label: 'Welcome banner', description: 'Greeting, CTAs, workspace strip' },
+  { id: 'milestone', label: 'MTD milestone', description: 'Plan vs actual snapshot' },
+  { id: 'tasks_alerts', label: 'Tasks & alerts', description: 'Daily work + exceptions' },
+  { id: 'performance', label: 'Today at a glance', description: 'Headline KPIs + sparklines' },
+  { id: 'charts', label: 'Charts', description: 'GWP trend & quoted pipeline' },
+  { id: 'brokerage_health', label: 'Brokerage health', description: 'YTD / trailing book metrics' },
+  { id: 'quotes_line', label: 'Sent quotes', description: 'Sortable list of quotes sent to clients' },
+  { id: 'notes', label: 'Notes', description: 'Personal scratchpad and reminders' },
+  { id: 'calendar', label: 'Calendar', description: 'Agenda, renewals, alerts & reminders' },
+  { id: 'quick_leads', label: 'Quick leads', description: 'Recent quick leads from the last 10 days' },
+  { id: 'sales_leads', label: 'Sales leads', description: 'All leads by source — filter by channel, campaign, or API' },
+  { id: 'client_favorites', label: 'Favorite clients', description: 'Starred clients for quick access' },
+  { id: 'drafts', label: 'Drafts', description: 'Resume in-progress quotes, solicitudes & registrations' }
+]
+
+const STORAGE_KEY = 'policy-ui.dashboard.widgets.v4'
+
+export const DEFAULT_WIDGET_ORDER: DashboardWidgetId[] = DASHBOARD_WIDGETS.map((w) => w.id)
+
+function normalizeWidgetOrder(raw: unknown): DashboardWidgetId[] {
+  const base = [...DEFAULT_WIDGET_ORDER]
+  if (!Array.isArray(raw)) return base
+  const seen = new Set<DashboardWidgetId>()
+  const out: DashboardWidgetId[] = []
+  for (const x of raw) {
+    if (typeof x === 'string' && base.includes(x as DashboardWidgetId) && !seen.has(x as DashboardWidgetId)) {
+      const id = x as DashboardWidgetId
+      seen.add(id)
+      out.push(id)
+    }
+  }
+  for (const id of base) {
+    if (!seen.has(id)) out.push(id)
+  }
+  return out
+}
+
+const ALL_ON: Record<DashboardWidgetId, boolean> = {
+  hero: true,
+  milestone: true,
+  performance: false,
+  tasks_alerts: true,
+  charts: true,
+  brokerage_health: true,
+  quotes_line: true,
+  notes: true,
+  calendar: true,
+  quick_leads: true,
+  sales_leads: true,
+  client_favorites: true,
+  drafts: true
+}
+
+export const DASHBOARD_ROLE_PRESETS: Record<
+  DashboardRolePresetId,
+  { label: string; hint: string; widgets: Record<DashboardWidgetId, boolean> }
+> = {
+  sales_manager: {
+    label: 'Sales manager',
+    hint: 'Pipeline, tasks, quotes — lighter book-of-business tile.',
+    widgets: { ...ALL_ON, brokerage_health: false }
+  },
+  executive_manager: {
+    label: 'Executive manager',
+    hint: 'Balanced operational + book view.',
+    widgets: { ...ALL_ON }
+  },
+  director: {
+    label: 'Director',
+    hint: 'Strategic KPIs & health; fewer operational tiles.',
+    widgets: {
+      ...ALL_ON,
+      tasks_alerts: false,
+      quotes_line: false
+    }
+  },
+  financial: {
+    label: 'Financial',
+    hint: 'Premium, AR, health metrics; fewer sales shortcuts.',
+    widgets: {
+      ...ALL_ON,
+      quotes_line: false,
+      tasks_alerts: true,
+      performance: false,
+      brokerage_health: true,
+      charts: true,
+      sales_leads: false
+    }
+  },
+  admin_manager: {
+    label: 'Admin / operations',
+    hint: 'Permissions, forms, and carrier setup — fewer quote shortcuts.',
+    widgets: {
+      ...ALL_ON,
+      quotes_line: false,
+      charts: false,
+      brokerage_health: true,
+      sales_leads: false
+    }
+  },
+  customer_service_manager: {
+    label: 'Customer service manager',
+    hint: 'Queues, tasks, and exceptions — lighter GWP / book tiles.',
+    widgets: {
+      ...ALL_ON,
+      charts: false,
+      brokerage_health: false,
+      quotes_line: false
+    }
+  }
+}
+
+/** Stable order for selects. */
+export const DASHBOARD_PRESET_ORDER: DashboardRolePresetId[] = [
+  'sales_manager',
+  'executive_manager',
+  'director',
+  'financial',
+  'admin_manager',
+  'customer_service_manager'
+]
+
+function cloneWidgets(w: Record<DashboardWidgetId, boolean>): Record<DashboardWidgetId, boolean> {
+  return { ...w }
+}
+
+export function useDashboardHomeWidgets() {
+  const activePreset = ref<DashboardRolePresetId>('executive_manager')
+  const widgets = ref<Record<DashboardWidgetId, boolean>>(
+    cloneWidgets(DASHBOARD_ROLE_PRESETS.executive_manager.widgets)
+  )
+  const widgetOrder = ref<DashboardWidgetId[]>([...DEFAULT_WIDGET_ORDER])
+  const layoutUnlocked = ref(false)
+  const hydrated = ref(false)
+
+  function persist() {
+    if (typeof localStorage === 'undefined') return
+    try {
+      localStorage.setItem(
+        STORAGE_KEY,
+        JSON.stringify({
+          preset: activePreset.value,
+          widgets: widgets.value,
+          widgetOrder: widgetOrder.value,
+          layoutUnlocked: layoutUnlocked.value
+        })
+      )
+    } catch {
+      /* quota */
+    }
+  }
+
+  function load() {
+    if (typeof localStorage === 'undefined') return
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY)
+      if (!raw) return
+      const data = JSON.parse(raw) as {
+        preset?: DashboardRolePresetId
+        widgets?: Partial<Record<DashboardWidgetId, boolean>>
+        widgetOrder?: DashboardWidgetId[]
+        layoutUnlocked?: boolean
+      }
+      if (data.preset && DASHBOARD_ROLE_PRESETS[data.preset]) {
+        activePreset.value = data.preset
+      }
+      if (data.widgets) {
+        const merged = { ...widgets.value }
+        for (const k of Object.keys(merged) as DashboardWidgetId[]) {
+          if (data.widgets[k] !== undefined) merged[k] = data.widgets[k]!
+        }
+        widgets.value = merged
+      }
+      widgetOrder.value = normalizeWidgetOrder(data.widgetOrder)
+      if (typeof data.layoutUnlocked === 'boolean') {
+        layoutUnlocked.value = data.layoutUnlocked
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+
+  onMounted(() => {
+    load()
+    hydrated.value = true
+  })
+
+  watch(
+    [activePreset, widgets, widgetOrder, layoutUnlocked],
+    () => {
+      if (hydrated.value) persist()
+    },
+    { deep: true }
+  )
+
+  const isPresetDirty = computed(() => {
+    const preset = DASHBOARD_ROLE_PRESETS[activePreset.value]
+    if (!preset) return false
+    return DASHBOARD_WIDGETS.some((w) => widgets.value[w.id] !== preset.widgets[w.id])
+  })
+
+  function applyPreset(id: DashboardRolePresetId) {
+    activePreset.value = id
+    const p = DASHBOARD_ROLE_PRESETS[id]
+    if (p) widgets.value = cloneWidgets(p.widgets)
+  }
+
+  function setWidget(id: DashboardWidgetId, on: boolean) {
+    widgets.value = { ...widgets.value, [id]: on }
+  }
+
+  function reapplySelectedPreset() {
+    applyPreset(activePreset.value)
+  }
+
+  function reorderWidgets(fromId: DashboardWidgetId, toId: DashboardWidgetId) {
+    if (fromId === toId) return
+    const arr = [...widgetOrder.value]
+    const fromI = arr.indexOf(fromId)
+    const toI = arr.indexOf(toId)
+    if (fromI === -1 || toI === -1) return
+    arr.splice(fromI, 1)
+    arr.splice(toI, 0, fromId)
+    widgetOrder.value = arr
+  }
+
+  return {
+    widgets,
+    widgetOrder,
+    layoutUnlocked,
+    activePreset,
+    isPresetDirty,
+    applyPreset,
+    setWidget,
+    reapplySelectedPreset,
+    reorderWidgets
+  }
+}
diff --git a/app/composables/useEmissionsQueue.ts b/app/composables/useEmissionsQueue.ts
new file mode 100644
index 0000000..58109be
--- /dev/null
+++ b/app/composables/useEmissionsQueue.ts
@@ -0,0 +1,52 @@
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+export type EmissionItem = {
+  id: string
+  createdAt: string
+  customerLabel: string
+  insurerSlug: string
+  subRamoKey: string
+  productLine: string
+  status: 'pending_review' | 'approved' | 'sent_to_insurer' | 'in_force'
+  bindToken?: string
+  /** 'auto' = generated from quote acceptance, 'manual' = created from solicitud form */
+  source?: 'auto' | 'manual'
+  /** Carrier product name when auto-generated from comparative */
+  carrierProduct?: string
+}
+
+const KEY = 'policy-ui-emissions-queue-v1'
+
+export function useEmissionsQueue() {
+  const items = useLocalStorageRef<EmissionItem[]>(KEY, () => [])
+
+  function enqueue(
+    entry: Omit<EmissionItem, 'id' | 'createdAt' | 'status'> & { status?: EmissionItem['status'] }
+  ) {
+    const row: EmissionItem = {
+      id: crypto.randomUUID?.() ?? String(Date.now()),
+      createdAt: new Date().toISOString(),
+      status: entry.status ?? 'pending_review',
+      ...entry
+    }
+    items.value = [row, ...items.value]
+    return row
+  }
+
+  function approve(id: string) {
+    const i = items.value.find((x) => x.id === id)
+    if (i) i.status = 'approved'
+  }
+
+  function sendToInsurer(id: string) {
+    const i = items.value.find((x) => x.id === id)
+    if (i) i.status = 'sent_to_insurer'
+  }
+
+  function markInForce(id: string) {
+    const i = items.value.find((x) => x.id === id)
+    if (i) i.status = 'in_force'
+  }
+
+  return { items, enqueue, approve, sendToInsurer, markInForce }
+}
diff --git a/app/composables/useFormsCatalog.ts b/app/composables/useFormsCatalog.ts
new file mode 100644
index 0000000..41605f0
--- /dev/null
+++ b/app/composables/useFormsCatalog.ts
@@ -0,0 +1,174 @@
+import catalogJson from '~/data/forms-catalog.json'
+import fieldGroupsJson from '~/data/form-field-groups.json'
+import type {
+  FormCatalogFile,
+  FormCatalogProductLine,
+  FormCatalogRow,
+  FormCatalogSelection
+} from '~/types/form-catalog'
+import type { FormFieldGroupDef, FormFieldGroupsFile } from '~/types/form-field-groups'
+
+const catalog = catalogJson as FormCatalogFile
+const fieldGroupsFile = fieldGroupsJson as FormFieldGroupsFile
+
+const PRODUCT_LINE_LABELS: Record<FormCatalogProductLine, string> = {
+  life: 'Life',
+  health_local: 'Health · local',
+  health_international: 'Health · international',
+  auto_full_coverage: 'Auto · full coverage',
+  auto_dat_liability: 'Auto · DAT (liability)',
+  home: 'Home',
+  general_liability: 'General liability',
+  any: 'Any / not specified'
+}
+
+const ALL_PRODUCT_LINES: FormCatalogProductLine[] = [
+  'life',
+  'health_local',
+  'health_international',
+  'auto_full_coverage',
+  'auto_dat_liability',
+  'home',
+  'general_liability',
+  'any'
+]
+
+export function productLineLabel(line: FormCatalogProductLine | null | undefined): string {
+  if (line == null || line === 'any') return '—'
+  return PRODUCT_LINE_LABELS[line] ?? String(line)
+}
+
+function personMatches(row: FormCatalogRow, person: 'natural' | 'juridica'): boolean {
+  if (row.personKinds === 'both') return true
+  return row.personKinds === person
+}
+
+function productLineMatches(row: FormCatalogRow, sel: FormCatalogSelection): boolean {
+  const rowPl = row.productLine
+  const selPl = sel.productLine
+
+  if (selPl === null || selPl === 'any') {
+    return rowPl == null
+  }
+  if (rowPl == null) return true
+  return rowPl === selPl
+}
+
+function subRamoMatches(row: FormCatalogRow, subRamoKey: string | null): boolean {
+  if (!subRamoKey) return false
+  if (row.subRamoKey === 'any') return true
+  return row.subRamoKey === subRamoKey
+}
+
+export function filterRows(all: FormCatalogRow[], sel: FormCatalogSelection): FormCatalogRow[] {
+  if (!sel.insurerSlug || !sel.subRamoKey) return []
+  return all.filter((row) => {
+    if (!row.insurerSlugs.includes(sel.insurerSlug!)) return false
+    if (!subRamoMatches(row, sel.subRamoKey)) return false
+    if (!personMatches(row, sel.personKind)) return false
+    if (!productLineMatches(row, sel)) return false
+    return true
+  })
+}
+
+export function resolveFieldGroupsForRows(
+  matched: FormCatalogRow[],
+  groupMap: Map<string, FormFieldGroupDef>
+): FormFieldGroupDef[] {
+  const ids = new Set<string>()
+  for (const r of matched) {
+    for (const id of r.fieldGroupIds ?? []) ids.add(id)
+  }
+  return [...ids]
+    .map((id) => groupMap.get(id))
+    .filter((g): g is FormFieldGroupDef => g != null)
+}
+
+export function buildFormMapIndex(rows: FormCatalogRow[]): Map<string, number[]> {
+  const m = new Map<string, number[]>()
+  for (const r of rows) {
+    for (const ins of r.insurerSlugs) {
+      const pl = r.productLine ?? ''
+      const key = `${ins}|${r.subRamoKey}|${pl}`
+      const list = m.get(key) ?? []
+      list.push(r.id)
+      m.set(key, list)
+    }
+  }
+  return m
+}
+
+function insurerSlugToLabel(slug: string): string {
+  return slug
+    .split('_')
+    .map((w) => w.slice(0, 1).toUpperCase() + w.slice(1))
+    .join(' ')
+}
+
+function buildInsurerItems(rows: FormCatalogRow[]) {
+  const set = new Set<string>()
+  for (const r of rows) {
+    for (const s of r.insurerSlugs) set.add(s)
+  }
+  return [...set]
+    .sort()
+    .map((value) => ({ label: insurerSlugToLabel(value), value }))
+}
+
+function buildSubRamoItems(rows: FormCatalogRow[], insurerSlug: string | null) {
+  if (!insurerSlug) return []
+  const map = new Map<string, string>()
+  for (const r of rows) {
+    if (!r.insurerSlugs.includes(insurerSlug)) continue
+    if (r.subRamoKey === 'any') continue
+    map.set(r.subRamoKey, r.subRamoLabel)
+  }
+  return [...map.entries()]
+    .sort((a, b) => a[1].localeCompare(b[1]))
+    .map(([value, label]) => ({ label, value }))
+}
+
+function productLineSelectOptions() {
+  return ALL_PRODUCT_LINES.map((value) => ({
+    label: PRODUCT_LINE_LABELS[value],
+    value
+  }))
+}
+
+export function useFormsCatalog() {
+  const rows = computed(() => catalog.rows)
+  const version = computed(() => catalog.version)
+
+  const groupById = computed(() => {
+    const m = new Map<string, FormFieldGroupDef>()
+    for (const g of fieldGroupsFile.groups) m.set(g.id, g)
+    return m
+  })
+
+  const insurerItems = computed(() => buildInsurerItems(catalog.rows))
+
+  function subRamoItems(insurerSlug: string | null) {
+    return buildSubRamoItems(catalog.rows, insurerSlug)
+  }
+
+  const productLineItems = productLineSelectOptions()
+
+  function fieldGroupsForMatched(matched: FormCatalogRow[]) {
+    return resolveFieldGroupsForRows(matched, groupById.value)
+  }
+
+  return {
+    catalog,
+    rows,
+    version,
+    fieldGroupsVersion: computed(() => fieldGroupsFile.version),
+    filterRows: (sel: FormCatalogSelection) => filterRows(catalog.rows, sel),
+    fieldGroupsForMatched,
+    buildFormMapIndex: () => buildFormMapIndex(catalog.rows),
+    insurerItems,
+    subRamoItems,
+    productLineItems,
+    productLineLabel,
+    insurerSlugToLabel
+  }
+}
diff --git a/app/composables/useHealthQuoteDraft.ts b/app/composables/useHealthQuoteDraft.ts
new file mode 100644
index 0000000..885d622
--- /dev/null
+++ b/app/composables/useHealthQuoteDraft.ts
@@ -0,0 +1,33 @@
+import type { HealthQuoteDraft } from '~/types/health-quote-intake'
+
+export function emptyHealthQuoteDraft(): HealthQuoteDraft {
+  return {
+    quoteMode: null,
+    segment: null,
+    client: {
+      fullName: '',
+      email: '',
+      phone: '',
+      documentId: '',
+      organizationName: ''
+    },
+    health: {
+      coverageArea: '',
+      networkTier: '',
+      deductible: '',
+      dateOfBirth: '',
+      age: '',
+      preexistingConditions: false,
+      preexistingDetails: ''
+    },
+    forms: {
+      medicalQuestionnaire: false,
+      beneficiaryDesignation: false,
+      groupCensus: false
+    },
+    solicit: {
+      carrierIds: [],
+      planIds: []
+    }
+  }
+}
diff --git a/app/composables/useLifeQuoteDraft.ts b/app/composables/useLifeQuoteDraft.ts
new file mode 100644
index 0000000..3dc0327
--- /dev/null
+++ b/app/composables/useLifeQuoteDraft.ts
@@ -0,0 +1,36 @@
+import type { LifeQuoteDraft } from '~/types/life-quote-intake'
+
+export function emptyLifeQuoteDraft(): LifeQuoteDraft {
+  return {
+    quoteMode: null,
+    segment: null,
+    client: {
+      fullName: '',
+      email: '',
+      phone: '',
+      documentId: '',
+      organizationName: ''
+    },
+    life: {
+      dateOfBirth: '',
+      age: '',
+      gender: '',
+      smoker: false,
+      preexistingConditions: false,
+      preexistingDetails: '',
+      coverageAmount: '',
+      coverageTerm: '',
+      beneficiaryName: '',
+      beneficiaryRelationship: ''
+    },
+    forms: {
+      medicalQuestionnaire: false,
+      beneficiaryDesignation: false,
+      groupCensus: false
+    },
+    solicit: {
+      carrierIds: [],
+      planIds: []
+    }
+  }
+}
diff --git a/app/composables/usePageTitle.ts b/app/composables/usePageTitle.ts
new file mode 100644
index 0000000..2805d3c
--- /dev/null
+++ b/app/composables/usePageTitle.ts
@@ -0,0 +1,6 @@
+export function usePageTitle(title: string) {
+  useHead({
+    title,
+    titleTemplate: (t) => (t ? `${t} · Policy UI` : 'Policy UI')
+  })
+}
diff --git a/app/composables/usePdfFieldMappings.ts b/app/composables/usePdfFieldMappings.ts
new file mode 100644
index 0000000..e71c81e
--- /dev/null
+++ b/app/composables/usePdfFieldMappings.ts
@@ -0,0 +1,12 @@
+import type { PdfFieldMappingFile } from '~/types/pdf-field-mapping'
+import mappingsJson from '~/data/pdf-field-mappings.json'
+
+const file = mappingsJson as PdfFieldMappingFile
+
+export function usePdfFieldMappings() {
+  function mappingForCatalogFormId(catalogFormId: number) {
+    return file.mappings.find((m) => m.catalogFormId === catalogFormId) ?? null
+  }
+
+  return { version: file.version, mappingForCatalogFormId, mappings: file.mappings }
+}
diff --git a/app/composables/usePolicyRegistrationModel.ts b/app/composables/usePolicyRegistrationModel.ts
new file mode 100644
index 0000000..18e3a76
--- /dev/null
+++ b/app/composables/usePolicyRegistrationModel.ts
@@ -0,0 +1,88 @@
+import type { Ref } from 'vue'
+import type { PolicyInstallmentRow, PolicyRegistration } from '~/types/brokerage-registration'
+import { POLICY_DRAFT_STORAGE_KEY } from '~/types/brokerage-registration'
+
+export function createEmptyPolicyRegistration(): PolicyRegistration {
+  return {
+    mintPolicyNumber: '',
+    contratanteId: '',
+    ramo: '',
+    subRamo: '',
+    aseguradora: '',
+    producto: '',
+    agencia: '',
+    numeroPolizaProveedor: '',
+    acreedor: '',
+    fechaEmision: '',
+    inicioVigencia: '',
+    finVigencia: '',
+    comisiones: [
+      { idx: 1, agenteId: '', porcentaje: '' },
+      { idx: 2, agenteId: '', porcentaje: '' },
+      { idx: 3, agenteId: '', porcentaje: '' }
+    ],
+    formaPago: '',
+    valorAsegurado: '',
+    primaBruta: '',
+    impuestoPct: '6',
+    primaNeta: '',
+    numCuotas: 10,
+    cuotas: [],
+    cotizacionMintId: '',
+    pdfCotizacionNombre: '',
+    pdfPolizaNombre: '',
+    notas: ''
+  }
+}
+
+export function rebuildInstallmentSchedule(p: PolicyRegistration): PolicyInstallmentRow[] {
+  const n = Math.max(1, Math.min(60, Math.floor(p.numCuotas) || 1))
+  const start = p.inicioVigencia ? new Date(p.inicioVigencia) : new Date()
+  const base = Number.isNaN(start.getTime()) ? new Date() : start
+  const per = p.primaBruta
+    ? (Number.parseFloat(String(p.primaBruta).replace(/[^0-9.-]/g, '')) || 0) / n
+    : 0
+  const rows: PolicyInstallmentRow[] = []
+  for (let i = 0; i < n; i++) {
+    const d = new Date(base)
+    d.setMonth(d.getMonth() + i)
+    rows.push({
+      n: i + 1,
+      fechaVencimiento: d.toISOString().slice(0, 16),
+      prima: per > 0 ? per.toFixed(2) : ''
+    })
+  }
+  return rows
+}
+
+export function setFinOneYearAfterInicio(p: PolicyRegistration) {
+  if (!p.inicioVigencia) return
+  const d = new Date(p.inicioVigencia)
+  if (Number.isNaN(d.getTime())) return
+  d.setFullYear(d.getFullYear() + 1)
+  p.finVigencia = d.toISOString().slice(0, 16)
+}
+
+export function usePolicyDraftPersistence(form: Ref<PolicyRegistration>) {
+  if (import.meta.server) return
+  try {
+    const raw = localStorage.getItem(POLICY_DRAFT_STORAGE_KEY)
+    if (raw) {
+      const parsed = JSON.parse(raw) as PolicyRegistration
+      form.value = { ...createEmptyPolicyRegistration(), ...parsed, cuotas: parsed.cuotas ?? [] }
+    }
+  } catch {
+    /* ignore */
+  }
+  watch(
+    form,
+    (v) => {
+      try {
+        localStorage.setItem(POLICY_DRAFT_STORAGE_KEY, JSON.stringify(v))
+      } catch {
+        /* ignore */
+      }
+    },
+    { deep: true }
+  )
+}
diff --git a/app/composables/useProfileLayouts.ts b/app/composables/useProfileLayouts.ts
new file mode 100644
index 0000000..bb550d8
--- /dev/null
+++ b/app/composables/useProfileLayouts.ts
@@ -0,0 +1,205 @@
+import { computed } from 'vue'
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+/* ── Types ── */
+
+export type ProfileRole = 'sales' | 'claims' | 'renewals' | 'general_service' | 'management' | 'superadmin'
+
+export interface ProfileSection {
+  id: string
+  label: string
+  visible: boolean
+  order: number
+}
+
+export interface ProfileLayout {
+  id: string
+  role: ProfileRole | string
+  name: string
+  description: string
+  icon: string
+  sections: ProfileSection[]
+  defaultTab: 'policies' | 'claims' | 'payments' | 'activity' | 'history' | 'relationships' | 'notes'
+  isCustom: boolean
+}
+
+/* ── Section catalog ── */
+
+const ALL_SECTION_IDS = [
+  'orientation',
+  'kpi_strip',
+  'quick_policies',
+  'service_actions',
+  'personal_details',
+  'tabbed_content',
+  'documents',
+] as const
+
+const SECTION_LABELS: Record<string, string> = {
+  orientation: 'Account Orientation',
+  kpi_strip: 'KPI Strip',
+  quick_policies: 'Quick Policies',
+  service_actions: 'Service Actions',
+  personal_details: 'Personal Details',
+  tabbed_content: 'Tabbed Content',
+  documents: 'Documents',
+}
+
+function makeSections(order: string[], hidden: string[] = []): ProfileSection[] {
+  return order.map((id, i) => ({
+    id,
+    label: SECTION_LABELS[id] ?? id,
+    visible: !hidden.includes(id),
+    order: i,
+  }))
+}
+
+/* ── Built-in layouts ── */
+
+function defaultLayouts(): ProfileLayout[] {
+  return [
+    {
+      id: 'sales',
+      role: 'sales',
+      name: 'Sales',
+      description: 'Focus on policies, quotes, and pipeline.',
+      icon: 'i-heroicons-currency-dollar',
+      sections: makeSections([
+        'orientation', 'quick_policies', 'kpi_strip', 'tabbed_content',
+        'service_actions', 'personal_details', 'documents',
+      ]),
+      defaultTab: 'policies',
+      isCustom: false,
+    },
+    {
+      id: 'claims',
+      role: 'claims',
+      name: 'Claims',
+      description: 'Focus on claims and service actions.',
+      icon: 'i-heroicons-shield-exclamation',
+      sections: makeSections([
+        'service_actions', 'orientation', 'kpi_strip', 'tabbed_content',
+        'quick_policies', 'personal_details', 'documents',
+      ]),
+      defaultTab: 'claims',
+      isCustom: false,
+    },
+    {
+      id: 'renewals',
+      role: 'renewals',
+      name: 'Renewals',
+      description: 'Focus on upcoming events and policies.',
+      icon: 'i-heroicons-arrow-path',
+      sections: makeSections([
+        'orientation', 'quick_policies', 'kpi_strip', 'tabbed_content',
+        'service_actions', 'personal_details', 'documents',
+      ]),
+      defaultTab: 'policies',
+      isCustom: false,
+    },
+    {
+      id: 'general_service',
+      role: 'general_service',
+      name: 'General Service',
+      description: 'Balanced default for service representatives.',
+      icon: 'i-heroicons-lifebuoy',
+      sections: makeSections([
+        'orientation', 'kpi_strip', 'quick_policies', 'service_actions',
+        'personal_details', 'tabbed_content', 'documents',
+      ]),
+      defaultTab: 'policies',
+      isCustom: false,
+    },
+    {
+      id: 'management',
+      role: 'management',
+      name: 'Management',
+      description: 'KPIs first, everything visible.',
+      icon: 'i-heroicons-chart-bar',
+      sections: makeSections([
+        'kpi_strip', 'orientation', 'service_actions', 'quick_policies',
+        'tabbed_content', 'personal_details', 'documents',
+      ]),
+      defaultTab: 'history',
+      isCustom: false,
+    },
+    {
+      id: 'superadmin',
+      role: 'superadmin',
+      name: 'Superadmin',
+      description: 'Everything visible, history focus.',
+      icon: 'i-heroicons-cog-8-tooth',
+      sections: makeSections([
+        'kpi_strip', 'orientation', 'service_actions', 'quick_policies',
+        'tabbed_content', 'personal_details', 'documents',
+      ]),
+      defaultTab: 'history',
+      isCustom: false,
+    },
+  ]
+}
+
+const LAYOUTS_KEY = 'policy-ui-profile-layouts-v1'
+const ACTIVE_KEY = 'policy-ui-active-profile-layout-v1'
+
+/* ── Composable ── */
+
+export function useProfileLayouts() {
+  const layouts = useLocalStorageRef<ProfileLayout[]>(LAYOUTS_KEY, defaultLayouts)
+
+  const activeLayoutId = useLocalStorageRef<{ id: string }>(ACTIVE_KEY, () => ({ id: 'general_service' }))
+
+  const activeLayout = computed<ProfileLayout>(() => {
+    const found = layouts.value.find(l => l.id === activeLayoutId.value.id)
+    return found ?? layouts.value[0] ?? defaultLayouts()[3] // fallback to general_service
+  })
+
+  const sortedSections = computed<ProfileSection[]>(() =>
+    [...activeLayout.value.sections]
+      .filter(s => s.visible)
+      .sort((a, b) => a.order - b.order)
+  )
+
+  function setActiveLayout(id: string) {
+    activeLayoutId.value = { id }
+  }
+
+  function addCustomLayout(layout: Omit<ProfileLayout, 'isCustom'>) {
+    layouts.value = [
+      ...layouts.value,
+      { ...layout, isCustom: true },
+    ]
+  }
+
+  function updateLayout(id: string, partial: Partial<ProfileLayout>) {
+    layouts.value = layouts.value.map(l =>
+      l.id === id ? { ...l, ...partial } : l
+    )
+  }
+
+  function removeCustomLayout(id: string) {
+    const target = layouts.value.find(l => l.id === id)
+    if (!target || !target.isCustom) return
+    layouts.value = layouts.value.filter(l => l.id !== id)
+    if (activeLayoutId.value.id === id) {
+      activeLayoutId.value = { id: 'general_service' }
+    }
+  }
+
+  function resetToDefaults() {
+    layouts.value = defaultLayouts()
+    activeLayoutId.value = { id: 'general_service' }
+  }
+
+  return {
+    layouts,
+    activeLayoutId: computed(() => activeLayoutId.value.id),
+    activeLayout,
+    sortedSections,
+    setActiveLayout,
+    addCustomLayout,
+    updateLayout,
+    removeCustomLayout,
+    resetToDefaults,
+  }
+}
diff --git a/app/composables/useProviderContactEmails.ts b/app/composables/useProviderContactEmails.ts
new file mode 100644
index 0000000..c79ccd9
--- /dev/null
+++ b/app/composables/useProviderContactEmails.ts
@@ -0,0 +1,26 @@
+import {
+  emptyProviderContacts,
+  PROVIDER_EMAIL_ROLE_LABEL,
+  PROVIDER_EMAIL_ROLE_ORDER,
+  type ProviderContactEmails,
+  type ProviderEmailRole
+} from '~/types/provider-contacts'
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+function storageKey(providerId: string) {
+  return `policy-ui-provider-contacts-v1-${providerId}`
+}
+
+export function useProviderContactEmails(providerId: string) {
+  const emails = useLocalStorageRef(storageKey(providerId), emptyProviderContacts)
+
+  function label(r: ProviderEmailRole) {
+    return PROVIDER_EMAIL_ROLE_LABEL[r]
+  }
+
+  return {
+    emails,
+    roles: PROVIDER_EMAIL_ROLE_ORDER,
+    label
+  }
+}
diff --git a/app/composables/useQuickLeads.ts b/app/composables/useQuickLeads.ts
new file mode 100644
index 0000000..ebacd15
--- /dev/null
+++ b/app/composables/useQuickLeads.ts
@@ -0,0 +1,46 @@
+/**
+ * Quick lead capture list — persisted in localStorage.
+ * Used by the Quick Lead form and dashboard widget.
+ */
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+export interface QuickLead {
+  id: string
+  name: string
+  phone: string
+  email: string
+  product: string
+  source: string
+  priority: 'normal' | 'high' | 'urgent'
+  note: string
+  agent: string
+  createdAt: string
+}
+
+const KEY = 'policy-ui-quick-leads-v1'
+
+export function useQuickLeads() {
+  const leads = useLocalStorageRef<QuickLead[]>(KEY, () => [])
+
+  function addLead(entry: Omit<QuickLead, 'id' | 'createdAt'>) {
+    const lead: QuickLead = {
+      id: crypto.randomUUID?.() ?? String(Date.now()),
+      createdAt: new Date().toISOString(),
+      ...entry,
+    }
+    leads.value = [lead, ...leads.value]
+    return lead
+  }
+
+  function removeLead(id: string) {
+    leads.value = leads.value.filter((l) => l.id !== id)
+  }
+
+  /** Leads from the last N days */
+  function recentLeads(days: number) {
+    const cutoff = Date.now() - days * 86_400_000
+    return leads.value.filter((l) => new Date(l.createdAt).getTime() >= cutoff)
+  }
+
+  return { leads, addLead, removeLead, recentLeads }
+}
diff --git a/app/composables/useQuoteRequestEmailEnabled.ts b/app/composables/useQuoteRequestEmailEnabled.ts
new file mode 100644
index 0000000..25542a2
--- /dev/null
+++ b/app/composables/useQuoteRequestEmailEnabled.ts
@@ -0,0 +1,37 @@
+const STORAGE_KEY = 'policy-ui.quote-request-email.v1'
+
+/**
+ * When false, quote flows record the intent locally but do not describe outbound provider emails
+ * (use when rates come from in-app tables, AI, or carrier APIs instead).
+ */
+export function useQuoteRequestEmailEnabled() {
+  const quoteRequestEmailEnabled = ref(true)
+
+  function read() {
+    if (!import.meta.client) return
+    try {
+      const v = localStorage.getItem(STORAGE_KEY)
+      if (v === '0') quoteRequestEmailEnabled.value = false
+      else if (v === '1') quoteRequestEmailEnabled.value = true
+    } catch {
+      /* ignore */
+    }
+  }
+
+  function setQuoteRequestEmailEnabled(v: boolean) {
+    quoteRequestEmailEnabled.value = v
+    if (!import.meta.client) return
+    try {
+      localStorage.setItem(STORAGE_KEY, v ? '1' : '0')
+    } catch {
+      /* ignore */
+    }
+  }
+
+  onMounted(() => read())
+
+  return {
+    quoteRequestEmailEnabled,
+    setQuoteRequestEmailEnabled
+  }
+}
diff --git a/app/composables/useQuoteSession.ts b/app/composables/useQuoteSession.ts
new file mode 100644
index 0000000..981bf82
--- /dev/null
+++ b/app/composables/useQuoteSession.ts
@@ -0,0 +1,77 @@
+import type { QuoteComparativeView } from '~/types/quote-view-model'
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+const KEY = 'policy-ui-quote-session-v1'
+
+function defaultView(): QuoteComparativeView {
+  return {
+    title: 'ANÁLISIS COMPARATIVO · VIDA UNIVERSAL',
+    subtitle: 'Protección & Ahorro',
+    tagline:
+      'Comparativa de aseguradoras — valores garantizados y proyectados. Prima mensual fija de referencia.',
+    quoteDateIso: new Date().toISOString().slice(0, 10),
+    validDays: 30,
+    client: {
+      name: 'María Claudia Piña Ríos',
+      ageYears: 30,
+      gender: 'Femenino',
+      smoker: false,
+      riskClass: 'Estándar',
+      occupation: 'Administrativo'
+    },
+    request: {
+      sumAssuredUsd: 100_000,
+      monthlyPremiumUsd: 75,
+      annualPremiumUsd: 900,
+      benefitTypeLabel: 'Opción B — Creciente',
+      additionalCoverageLabel: 'No contratadas',
+      initialDepositLabel: 'No aplica'
+    },
+    carriers: [
+      {
+        carrierName: 'ASSA COMPAÑÍA DE SEGUROS, S.A.',
+        productName: 'ASSA Universal II',
+        ratesLine: 'T. garantizada 3.5% · T. corriente 4.0%',
+        sumAssuredUsd: 100_000,
+        footnote: 'Vigente hasta edad 91',
+        cells: [
+          { yearLabel: 'Año 10', ageLabel: '40', guaranteed: 8200, projected: 12400 },
+          { yearLabel: 'Año 20', ageLabel: '50', guaranteed: 15200, projected: 24100 },
+          { yearLabel: 'Año 30', ageLabel: '60', guaranteed: 21000, projected: 38900 },
+          { yearLabel: 'Edad 65', ageLabel: '65', guaranteed: 24500, projected: 36859 }
+        ],
+        highlightProjectedUsd: 36859,
+        highlightNote: 'Valor proyectado a la edad de referencia'
+      },
+      {
+        carrierName: 'ASSA COMPAÑÍA DE SEGUROS, S.A.',
+        productName: 'ASSA Vida Segura',
+        ratesLine: 'T. garantizada 4.0% · T. corriente 4.0%',
+        sumAssuredUsd: 100_000,
+        footnote: 'Vence a los 70 años',
+        cells: [
+          { yearLabel: 'Año 10', ageLabel: '40', guaranteed: 7800, projected: 11800 },
+          { yearLabel: 'Año 20', ageLabel: '50', guaranteed: 14100, projected: 22800 },
+          { yearLabel: 'Año 30', ageLabel: '60', guaranteed: 19800, projected: 35200 },
+          { yearLabel: 'Edad 65', ageLabel: '65', guaranteed: 22100, projected: 33100 }
+        ],
+        highlightProjectedUsd: 33100,
+        highlightNote: 'Revisar vigencia del producto'
+      }
+    ],
+    accumulatedPremiumsUsd: [9000, 18_000, 27_000, 31_500],
+    advisorColumns: [
+      'Retorno garantizado a los 65: comparar valores acumulados vs primas pagadas.',
+      'Protección de largo plazo: priorizar vigencia del seguro hasta edad avanzada.',
+      'Coberturas opcionales (cáncer, cardiovascular, etc.) no incluidas en esta cotización.'
+    ]
+  }
+}
+
+export function useQuoteSession() {
+  const view = useLocalStorageRef(KEY, defaultView)
+  function reset() {
+    view.value = defaultView()
+  }
+  return { view, reset, defaultView }
+}
diff --git a/app/composables/useReferralChannels.ts b/app/composables/useReferralChannels.ts
new file mode 100644
index 0000000..699bb08
--- /dev/null
+++ b/app/composables/useReferralChannels.ts
@@ -0,0 +1,67 @@
+/**
+ * Referral channel registry — persisted in localStorage.
+ * Used across the app: quick leads, customer registration, reporting.
+ */
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+export interface ReferralChannel {
+  id: string
+  name: string
+  type: 'person' | 'company' | 'digital' | 'event' | 'other'
+  contactName: string
+  contactPhone: string
+  contactEmail: string
+  note: string
+  active: boolean
+  createdAt: string
+}
+
+const KEY = 'policy-ui-referral-channels-v1'
+
+const SEED_CHANNELS: ReferralChannel[] = [
+  { id: 'ref-001', name: 'Roberto Jiménez', type: 'person', contactName: 'Roberto Jiménez', contactPhone: '+506 8834-2291', contactEmail: 'rjimenez@email.com', note: 'Long-time VIP client — strong auto & life referrals', active: true, createdAt: '2024-06-10T10:00:00Z' },
+  { id: 'ref-002', name: 'Constructora Delta', type: 'company', contactName: 'Ing. Carlos Mora', contactPhone: '+506 2245-8800', contactEmail: 'cmora@delta.cr', note: 'Construction company — fleet and liability leads', active: true, createdAt: '2024-08-15T10:00:00Z' },
+  { id: 'ref-003', name: 'Instagram Ads', type: 'digital', contactName: '', contactPhone: '', contactEmail: '', note: 'Paid social campaigns — auto & health focus', active: true, createdAt: '2025-01-10T10:00:00Z' },
+  { id: 'ref-004', name: 'Google Ads', type: 'digital', contactName: '', contactPhone: '', contactEmail: '', note: 'Search campaigns — high intent leads', active: true, createdAt: '2025-01-10T10:00:00Z' },
+  { id: 'ref-005', name: 'Expo Comercio 2025', type: 'event', contactName: 'Comité Organizador', contactPhone: '+506 2222-0000', contactEmail: 'info@expocomercio.cr', note: 'Annual trade expo — collected 40+ contacts', active: false, createdAt: '2025-03-20T10:00:00Z' },
+  { id: 'ref-006', name: 'Cámara de Comercio', type: 'company', contactName: 'Patricia Arias', contactPhone: '+506 2233-5500', contactEmail: 'parias@camara.cr', note: 'Chamber of commerce partnership — corporate referrals', active: true, createdAt: '2024-11-05T10:00:00Z' },
+  { id: 'ref-007', name: 'Walk-in / Oficina', type: 'other', contactName: '', contactPhone: '', contactEmail: '', note: 'Foot traffic to main office', active: true, createdAt: '2024-01-01T10:00:00Z' },
+]
+
+export function useReferralChannels() {
+  const channels = useLocalStorageRef<ReferralChannel[]>(KEY, () => [])
+
+  // Seed on first use
+  if (import.meta.client && channels.value.length === 0) {
+    channels.value = [...SEED_CHANNELS]
+  }
+
+  function addChannel(entry: Omit<ReferralChannel, 'id' | 'createdAt'>) {
+    const channel: ReferralChannel = {
+      id: 'ref-' + (crypto.randomUUID?.() ?? String(Date.now())).slice(0, 8),
+      createdAt: new Date().toISOString(),
+      ...entry,
+    }
+    channels.value = [channel, ...channels.value]
+    return channel
+  }
+
+  function updateChannel(id: string, updates: Partial<Omit<ReferralChannel, 'id' | 'createdAt'>>) {
+    channels.value = channels.value.map(c =>
+      c.id === id ? { ...c, ...updates } : c
+    )
+  }
+
+  function removeChannel(id: string) {
+    channels.value = channels.value.filter(c => c.id !== id)
+  }
+
+  const activeChannels = computed(() => channels.value.filter(c => c.active))
+
+  /** Flat list for use in dropdowns */
+  const channelOptions = computed(() =>
+    activeChannels.value.map(c => ({ label: c.name, value: c.id }))
+  )
+
+  return { channels, activeChannels, channelOptions, addChannel, updateChannel, removeChannel }
+}
diff --git a/app/composables/useSalesPipeline.ts b/app/composables/useSalesPipeline.ts
new file mode 100644
index 0000000..1937463
--- /dev/null
+++ b/app/composables/useSalesPipeline.ts
@@ -0,0 +1,316 @@
+/**
+ * Sales pipeline tracker — per-deal stage + form completion tracking.
+ * Persisted in localStorage. Each deal flows:
+ *   Customer → Get Quotes → [waiting] → Present Quotes → [waiting] → Solicitud → Emission
+ */
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+
+export type PipelineStage =
+  | 'customer'
+  | 'get_quotes'
+  | 'waiting_carriers'
+  | 'present_quotes'
+  | 'waiting_client'
+  | 'solicitud'
+  | 'emission'
+
+export type FormStatus = 'not_started' | 'in_progress' | 'complete'
+
+export interface DealForm {
+  id: string
+  label: string
+  /** 0–100 */
+  completionPct: number
+  status: FormStatus
+  requiredFields: number
+  completedFields: number
+}
+
+export interface SalesDeal {
+  id: string
+  customerId: string
+  customerName: string
+  productLine: string
+  currentStage: PipelineStage
+  /** Stages that have been fully completed */
+  completedStages: PipelineStage[]
+  /** ISO timestamps for when each stage was entered */
+  stageTimestamps: Partial<Record<PipelineStage, string>>
+  /** Forms assigned to this deal, keyed by stage */
+  forms: Partial<Record<PipelineStage, DealForm[]>>
+  /** Optional carrier info */
+  carrier?: string
+  carrierProduct?: string
+  /** Bind token linking compare → solicitud */
+  bindToken?: string
+  createdAt: string
+  updatedAt: string
+}
+
+const KEY = 'policy-ui-sales-pipeline-v1'
+
+/** Ordered stages for rendering */
+export const PIPELINE_STAGES: { id: PipelineStage; label: string; isWaiting: boolean }[] = [
+  { id: 'customer', label: 'Customer', isWaiting: false },
+  { id: 'get_quotes', label: 'Get Quotes', isWaiting: false },
+  { id: 'waiting_carriers', label: 'Awaiting Carriers', isWaiting: true },
+  { id: 'present_quotes', label: 'Present Quotes', isWaiting: false },
+  { id: 'waiting_client', label: 'Awaiting Client', isWaiting: true },
+  { id: 'solicitud', label: 'Solicitud', isWaiting: false },
+  { id: 'emission', label: 'Emission', isWaiting: false },
+]
+
+function stageIndex(stage: PipelineStage): number {
+  return PIPELINE_STAGES.findIndex(s => s.id === stage)
+}
+
+/** Default forms per stage (seeded when deal enters a stage) */
+function defaultFormsForStage(stage: PipelineStage, productLine: string): DealForm[] {
+  switch (stage) {
+    case 'customer':
+      return [
+        { id: 'client-info', label: 'Client information', completionPct: 0, status: 'not_started', requiredFields: 8, completedFields: 0 },
+        { id: 'kyc-docs', label: 'KYC / ID documents', completionPct: 0, status: 'not_started', requiredFields: 3, completedFields: 0 },
+      ]
+    case 'get_quotes':
+      return [
+        { id: 'quote-request', label: 'Quote request form', completionPct: 0, status: 'not_started', requiredFields: 12, completedFields: 0 },
+        { id: 'risk-details', label: `${productLine} risk details`, completionPct: 0, status: 'not_started', requiredFields: 10, completedFields: 0 },
+      ]
+    case 'solicitud':
+      return [
+        { id: 'solicitud-form', label: 'Solicitud de seguro', completionPct: 0, status: 'not_started', requiredFields: 18, completedFields: 0 },
+        { id: 'payment-auth', label: 'Payment authorization', completionPct: 0, status: 'not_started', requiredFields: 5, completedFields: 0 },
+        { id: 'beneficiaries', label: 'Beneficiary designation', completionPct: 0, status: 'not_started', requiredFields: 4, completedFields: 0 },
+      ]
+    case 'emission':
+      return [
+        { id: 'policy-review', label: 'Policy review checklist', completionPct: 0, status: 'not_started', requiredFields: 6, completedFields: 0 },
+      ]
+    default:
+      return []
+  }
+}
+
+/** Seed demo deals */
+const SEED_DEALS: SalesDeal[] = [
+  {
+    id: 'deal-001',
+    customerId: 'cust-001',
+    customerName: 'María Elena Pérez Solano',
+    productLine: 'Auto',
+    currentStage: 'waiting_carriers',
+    completedStages: ['customer', 'get_quotes'],
+    stageTimestamps: {
+      customer: '2026-04-02T09:00:00Z',
+      get_quotes: '2026-04-02T09:30:00Z',
+      waiting_carriers: '2026-04-02T10:00:00Z',
+    },
+    forms: {
+      customer: [
+        { id: 'client-info', label: 'Client information', completionPct: 100, status: 'complete', requiredFields: 8, completedFields: 8 },
+        { id: 'kyc-docs', label: 'KYC / ID documents', completionPct: 100, status: 'complete', requiredFields: 3, completedFields: 3 },
+      ],
+      get_quotes: [
+        { id: 'quote-request', label: 'Quote request form', completionPct: 100, status: 'complete', requiredFields: 12, completedFields: 12 },
+        { id: 'risk-details', label: 'Auto risk details', completionPct: 100, status: 'complete', requiredFields: 10, completedFields: 10 },
+      ],
+    },
+    createdAt: '2026-04-02T09:00:00Z',
+    updatedAt: '2026-04-02T10:00:00Z',
+  },
+  {
+    id: 'deal-002',
+    customerId: 'cust-002',
+    customerName: 'Roberto Jiménez Mora',
+    productLine: 'Life',
+    currentStage: 'solicitud',
+    completedStages: ['customer', 'get_quotes', 'waiting_carriers', 'present_quotes', 'waiting_client'],
+    stageTimestamps: {
+      customer: '2026-03-28T11:00:00Z',
+      get_quotes: '2026-03-28T11:30:00Z',
+      waiting_carriers: '2026-03-28T12:00:00Z',
+      present_quotes: '2026-04-01T14:00:00Z',
+      waiting_client: '2026-04-01T15:00:00Z',
+      solicitud: '2026-04-03T09:00:00Z',
+    },
+    forms: {
+      customer: [
+        { id: 'client-info', label: 'Client information', completionPct: 100, status: 'complete', requiredFields: 8, completedFields: 8 },
+        { id: 'kyc-docs', label: 'KYC / ID documents', completionPct: 100, status: 'complete', requiredFields: 3, completedFields: 3 },
+      ],
+      get_quotes: [
+        { id: 'quote-request', label: 'Quote request form', completionPct: 100, status: 'complete', requiredFields: 12, completedFields: 12 },
+        { id: 'risk-details', label: 'Life risk details', completionPct: 100, status: 'complete', requiredFields: 10, completedFields: 10 },
+      ],
+      solicitud: [
+        { id: 'solicitud-form', label: 'Solicitud de seguro', completionPct: 72, status: 'in_progress', requiredFields: 18, completedFields: 13 },
+        { id: 'payment-auth', label: 'Payment authorization', completionPct: 40, status: 'in_progress', requiredFields: 5, completedFields: 2 },
+        { id: 'beneficiaries', label: 'Beneficiary designation', completionPct: 0, status: 'not_started', requiredFields: 4, completedFields: 0 },
+      ],
+    },
+    carrier: 'ASSA',
+    carrierProduct: 'Universal II',
+    bindToken: 'bind-abc123',
+    createdAt: '2026-03-28T11:00:00Z',
+    updatedAt: '2026-04-03T09:00:00Z',
+  },
+  {
+    id: 'deal-003',
+    customerId: 'cust-005',
+    customerName: 'Sofía Rojas Delgado',
+    productLine: 'Auto',
+    currentStage: 'get_quotes',
+    completedStages: ['customer'],
+    stageTimestamps: {
+      customer: '2026-04-05T08:00:00Z',
+      get_quotes: '2026-04-05T08:15:00Z',
+    },
+    forms: {
+      customer: [
+        { id: 'client-info', label: 'Client information', completionPct: 100, status: 'complete', requiredFields: 8, completedFields: 8 },
+        { id: 'kyc-docs', label: 'KYC / ID documents', completionPct: 67, status: 'in_progress', requiredFields: 3, completedFields: 2 },
+      ],
+      get_quotes: [
+        { id: 'quote-request', label: 'Quote request form', completionPct: 50, status: 'in_progress', requiredFields: 12, completedFields: 6 },
+        { id: 'risk-details', label: 'Auto risk details', completionPct: 0, status: 'not_started', requiredFields: 10, completedFields: 0 },
+      ],
+    },
+    createdAt: '2026-04-05T08:00:00Z',
+    updatedAt: '2026-04-05T08:15:00Z',
+  },
+]
+
+export function useSalesPipeline() {
+  const deals = useLocalStorageRef<SalesDeal[]>(KEY, () => [])
+
+  // Seed on first use
+  if (import.meta.client && deals.value.length === 0) {
+    deals.value = [...SEED_DEALS]
+  }
+
+  /** Get a deal by ID */
+  function getDeal(dealId: string) {
+    return deals.value.find(d => d.id === dealId)
+  }
+
+  /** Get deals for a specific customer */
+  function getDealsForCustomer(customerId: string) {
+    return deals.value.filter(d => d.customerId === customerId)
+  }
+
+  /** Get the active (most recent non-emission) deal for a customer */
+  function getActiveDeal(customerId: string) {
+    return deals.value
+      .filter(d => d.customerId === customerId && d.currentStage !== 'emission')
+      .sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())[0]
+  }
+
+  /** Create a new deal */
+  function createDeal(customerId: string, customerName: string, productLine: string): SalesDeal {
+    const now = new Date().toISOString()
+    const deal: SalesDeal = {
+      id: 'deal-' + (crypto.randomUUID?.() ?? String(Date.now())).slice(0, 8),
+      customerId,
+      customerName,
+      productLine,
+      currentStage: 'customer',
+      completedStages: [],
+      stageTimestamps: { customer: now },
+      forms: { customer: defaultFormsForStage('customer', productLine) },
+      createdAt: now,
+      updatedAt: now,
+    }
+    deals.value = [deal, ...deals.value]
+    return deal
+  }
+
+  /** Advance deal to the next stage */
+  function advanceStage(dealId: string) {
+    const deal = deals.value.find(d => d.id === dealId)
+    if (!deal) return
+
+    const currentIdx = stageIndex(deal.currentStage)
+    const nextStage = PIPELINE_STAGES[currentIdx + 1]
+    if (!nextStage) return
+
+    const now = new Date().toISOString()
+    deal.completedStages = [...new Set([...deal.completedStages, deal.currentStage])]
+    deal.currentStage = nextStage.id
+    deal.stageTimestamps = { ...deal.stageTimestamps, [nextStage.id]: now }
+    deal.updatedAt = now
+
+    // Seed forms for the new stage if not already present
+    if (!deal.forms[nextStage.id]) {
+      deal.forms = { ...deal.forms, [nextStage.id]: defaultFormsForStage(nextStage.id, deal.productLine) }
+    }
+
+    // Trigger reactivity
+    deals.value = [...deals.value]
+  }
+
+  /** Set deal to a specific stage (e.g., when quotes arrive) */
+  function setStage(dealId: string, stage: PipelineStage) {
+    const deal = deals.value.find(d => d.id === dealId)
+    if (!deal) return
+
+    const now = new Date().toISOString()
+    // Mark all stages before the target as completed
+    const targetIdx = stageIndex(stage)
+    const completed = PIPELINE_STAGES.slice(0, targetIdx).map(s => s.id)
+    deal.completedStages = [...new Set([...deal.completedStages, ...completed])]
+    deal.currentStage = stage
+    deal.stageTimestamps = { ...deal.stageTimestamps, [stage]: now }
+    deal.updatedAt = now
+
+    if (!deal.forms[stage]) {
+      deal.forms = { ...deal.forms, [stage]: defaultFormsForStage(stage, deal.productLine) }
+    }
+
+    deals.value = [...deals.value]
+  }
+
+  /** Update form completion within a deal */
+  function updateFormProgress(dealId: string, stage: PipelineStage, formId: string, completedFields: number) {
+    const deal = deals.value.find(d => d.id === dealId)
+    if (!deal) return
+    const stageForms = deal.forms[stage]
+    if (!stageForms) return
+    const form = stageForms.find(f => f.id === formId)
+    if (!form) return
+
+    form.completedFields = Math.min(completedFields, form.requiredFields)
+    form.completionPct = form.requiredFields > 0 ? Math.round((form.completedFields / form.requiredFields) * 100) : 100
+    form.status = form.completionPct === 0 ? 'not_started' : form.completionPct === 100 ? 'complete' : 'in_progress'
+    deal.updatedAt = new Date().toISOString()
+
+    deals.value = [...deals.value]
+  }
+
+  /** Remove a deal */
+  function removeDeal(dealId: string) {
+    deals.value = deals.value.filter(d => d.id !== dealId)
+  }
+
+  /** Computed: stage completion percentage for a deal's current stage forms */
+  function stageFormProgress(deal: SalesDeal, stage: PipelineStage): number {
+    const forms = deal.forms[stage]
+    if (!forms || forms.length === 0) return 0
+    const totalRequired = forms.reduce((s, f) => s + f.requiredFields, 0)
+    const totalCompleted = forms.reduce((s, f) => s + f.completedFields, 0)
+    return totalRequired > 0 ? Math.round((totalCompleted / totalRequired) * 100) : 100
+  }
+
+  return {
+    deals,
+    getDeal,
+    getDealsForCustomer,
+    getActiveDeal,
+    createDeal,
+    advanceStage,
+    setStage,
+    updateFormProgress,
+    removeDeal,
+    stageFormProgress,
+  }
+}
diff --git a/app/composables/useSidebarFeatures.ts b/app/composables/useSidebarFeatures.ts
new file mode 100644
index 0000000..2fa4359
--- /dev/null
+++ b/app/composables/useSidebarFeatures.ts
@@ -0,0 +1,23 @@
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+import type { Ref } from 'vue'
+
+interface SidebarFeatures {
+  showWorkstations: boolean
+  showAiTools: boolean
+  showLeadsHub: boolean
+}
+
+const KEY = 'policy-ui-sidebar-features-v1'
+
+let _shared: Ref<SidebarFeatures> | null = null
+
+export function useSidebarFeatures() {
+  if (!_shared) {
+    _shared = useLocalStorageRef<SidebarFeatures>(KEY, () => ({
+      showWorkstations: false,
+      showAiTools: false,
+      showLeadsHub: true,
+    }))
+  }
+  return _shared
+}
diff --git a/app/composables/useSuperAdmin.ts b/app/composables/useSuperAdmin.ts
new file mode 100644
index 0000000..cd2a8de
--- /dev/null
+++ b/app/composables/useSuperAdmin.ts
@@ -0,0 +1,21 @@
+/**
+ * Tenant-level admin (company logo, legal name, etc.).
+ * Wire to real roles/claims when auth exists. Until then:
+ * - localStorage `policy-ui.superadmin` = `1` | `0`
+ * - in dev, defaults to true when the key is unset so the org screen is reachable
+ */
+export function useSuperAdmin() {
+  const isSuperAdmin = computed(() => {
+    if (!import.meta.client) return false
+    try {
+      const v = localStorage.getItem('policy-ui.superadmin')
+      if (v === '1') return true
+      if (v === '0') return false
+      return import.meta.dev
+    } catch {
+      return false
+    }
+  })
+
+  return { isSuperAdmin }
+}
diff --git a/app/composables/useSupportTickets.ts b/app/composables/useSupportTickets.ts
new file mode 100644
index 0000000..f49ad05
--- /dev/null
+++ b/app/composables/useSupportTickets.ts
@@ -0,0 +1,184 @@
+/**
+ * Support Tickets — composable for queue state, filtering, CRUD, and mock routing.
+ * Persisted in localStorage via useLocalStorageRef.
+ */
+import { useLocalStorageRef } from '~/utils/useLocalStorageRef'
+import {
+  type SupportTicket,
+  type SupportTicketDetail,
+  type TicketMessage,
+  type TicketStatus,
+  type SupportChannel,
+  type RoutingTier,
+  type RoutedQueue,
+  type RoutingRule,
+  MOCK_SUPPORT_TICKETS,
+  MOCK_TICKET_DETAILS,
+  MOCK_ROUTING_RULES,
+} from '~/data/mock-support'
+
+interface SupportState {
+  tickets: SupportTicket[]
+  details: Record<string, SupportTicketDetail>
+  routingRules: RoutingRule[]
+}
+
+function buildDefaults(): SupportState {
+  return {
+    tickets: [...MOCK_SUPPORT_TICKETS],
+    details: { ...MOCK_TICKET_DETAILS },
+    routingRules: [...MOCK_ROUTING_RULES],
+  }
+}
+
+export function useSupportTickets() {
+  const state = useLocalStorageRef<SupportState>('policy-ui-support-tickets-v1', buildDefaults)
+
+  // ── Computed: filtered lists ──
+  const openTickets = computed(() => state.value.tickets.filter(t => t.status === 'open'))
+  const unresolvedCount = computed(() => state.value.tickets.filter(t => t.status !== 'resolved').length)
+  const breachedCount = computed(() => state.value.tickets.filter(t => t.slaPercent >= 100).length)
+  const unassignedCount = computed(() => state.value.tickets.filter(t => !t.assignedTo).length)
+  const openPoolCount = computed(() => state.value.tickets.filter(t => t.routedQueue === 'open_pool').length)
+  const inProgressCount = computed(() => state.value.tickets.filter(t => t.status === 'in_progress').length)
+
+  const kpis = computed(() => {
+    const all = state.value.tickets
+    const unresolved = all.filter(t => t.status !== 'resolved')
+    const avgDaysOpen = unresolved.length
+      ? Math.round(unresolved.reduce((sum, t) => sum + t.daysOpen, 0) / unresolved.length)
+      : 0
+    return {
+      total: all.length,
+      open: openTickets.value.length,
+      inProgress: inProgressCount.value,
+      breached: breachedCount.value,
+      avgDaysOpen,
+      unassigned: unassignedCount.value,
+      openPool: openPoolCount.value,
+    }
+  })
+
+  // ── CRUD ──
+  function updateStatus(ticketId: string, status: TicketStatus) {
+    const ticket = state.value.tickets.find(t => t.id === ticketId)
+    if (ticket) {
+      ticket.status = status
+      ticket.updatedAt = new Date().toISOString().slice(0, 10)
+    }
+    const detail = state.value.details[ticketId]
+    if (detail) {
+      detail.status = status
+      detail.updatedAt = new Date().toISOString().slice(0, 10)
+    }
+  }
+
+  function assignTicket(ticketId: string, agent: string) {
+    const ticket = state.value.tickets.find(t => t.id === ticketId)
+    if (ticket) {
+      ticket.assignedTo = agent
+      ticket.updatedAt = new Date().toISOString().slice(0, 10)
+    }
+    const detail = state.value.details[ticketId]
+    if (detail) {
+      detail.assignedTo = agent
+      detail.updatedAt = new Date().toISOString().slice(0, 10)
+      detail.messages.push({
+        id: `msg-${Date.now()}`,
+        type: 'system',
+        direction: 'internal',
+        from: 'Sistema',
+        to: null,
+        subject: null,
+        body: `Ticket asignado a ${agent}`,
+        timestamp: new Date().toISOString(),
+        aiDigest: null,
+      })
+    }
+  }
+
+  function addMessage(ticketId: string, message: Omit<TicketMessage, 'id' | 'timestamp'>) {
+    const detail = state.value.details[ticketId]
+    if (!detail) return
+    const msg: TicketMessage = {
+      ...message,
+      id: `msg-${Date.now()}`,
+      timestamp: new Date().toISOString(),
+    }
+    detail.messages.push(msg)
+    detail.messageCount = detail.messages.length
+    detail.updatedAt = new Date().toISOString().slice(0, 10)
+    detail.lastMessagePreview = msg.body.slice(0, 80)
+
+    // sync summary ticket
+    const ticket = state.value.tickets.find(t => t.id === ticketId)
+    if (ticket) {
+      ticket.messageCount = detail.messageCount
+      ticket.updatedAt = detail.updatedAt
+      ticket.lastMessagePreview = detail.lastMessagePreview
+    }
+  }
+
+  // ── Mock Routing ──
+  const routingKeywords: Record<RoutedQueue, string[]> = {
+    collections: ['pago', 'factura', 'cobro', 'recibo', 'transferencia', 'mora'],
+    claims: ['siniestro', 'accidente', 'robo', 'daño', 'choque', 'grúa', 'colisión'],
+    sales: ['cotización', 'seguro nuevo', 'precio', 'cuánto sale', 'cobertura'],
+    renewals: ['renovación', 'vencimiento', 'prórroga', 'vigencia'],
+    operations: ['endoso', 'certificado', 'modificar', 'cambio de beneficiario'],
+    open_pool: [],
+  }
+
+  function simulateRouting(channel: SupportChannel, body: string): { tier: RoutingTier; queue: RoutedQueue; confidence: number } {
+    const lower = body.toLowerCase()
+
+    // Tier 2: keyword matching
+    for (const [queue, keywords] of Object.entries(routingKeywords) as [RoutedQueue, string[]][]) {
+      if (!keywords.length) continue
+      const matched = keywords.filter(kw => lower.includes(kw))
+      if (matched.length > 0) {
+        const confidence = Math.min(0.95, 0.6 + matched.length * 0.1)
+        return { tier: 'tier2_rule', queue, confidence }
+      }
+    }
+
+    // Tier 3: no match → open pool
+    return { tier: 'tier3_open', queue: 'open_pool', confidence: 0.3 }
+  }
+
+  // ── Routing Rules CRUD ──
+  function toggleRule(ruleId: string) {
+    const rule = state.value.routingRules.find(r => r.id === ruleId)
+    if (rule) rule.enabled = !rule.enabled
+  }
+
+  function updateRule(ruleId: string, updates: Partial<RoutingRule>) {
+    const rule = state.value.routingRules.find(r => r.id === ruleId)
+    if (rule) Object.assign(rule, updates)
+  }
+
+  function getDetail(ticketId: string): SupportTicketDetail | undefined {
+    return state.value.details[ticketId]
+  }
+
+  return {
+    state,
+    // computed
+    openTickets,
+    unresolvedCount,
+    breachedCount,
+    unassignedCount,
+    openPoolCount,
+    inProgressCount,
+    kpis,
+    // CRUD
+    updateStatus,
+    assignTicket,
+    addMessage,
+    getDetail,
+    // routing
+    simulateRouting,
+    toggleRule,
+    updateRule,
+  }
+}
diff --git a/app/composables/useWelcomeDashboard.ts b/app/composables/useWelcomeDashboard.ts
new file mode 100644
index 0000000..8ada842
--- /dev/null
+++ b/app/composables/useWelcomeDashboard.ts
@@ -0,0 +1,25 @@
+import type { WelcomeDashboardConfig } from '~/types/welcome-dashboard'
+
+/**
+ * Home / welcome dashboard content. Reads `app.config` first; later merge runtime config or APIs.
+ * Brokerage company name from Settings → Personalization overrides `productName` when set.
+ */
+export function useWelcomeDashboard(): ComputedRef<WelcomeDashboardConfig> {
+  const app = useAppConfig()
+  const { saved: branding } = useBrokerageBranding()
+
+  return computed((): WelcomeDashboardConfig => {
+    const base = (app.welcomeDashboard ?? {}) as Partial<WelcomeDashboardConfig>
+    const fromBranding = branding.value.companyName?.trim()
+    return {
+      greetingName: base.greetingName ?? 'User',
+      productName: fromBranding || base.productName || 'Segur-OS Beta',
+      subtitle: base.subtitle ?? '',
+      dailyTasks: base.dailyTasks ?? [],
+      alerts: base.alerts ?? [],
+      performanceKpis: base.performanceKpis ?? [],
+      ceoKpis: base.ceoKpis ?? [],
+      quickLinks: base.quickLinks ?? []
+    }
+  })
+}
diff --git a/app/data/auto-quote-intake.ts b/app/data/auto-quote-intake.ts
new file mode 100644
index 0000000..304a99a
--- /dev/null
+++ b/app/data/auto-quote-intake.ts
@@ -0,0 +1,70 @@
+/** Auto quoting — option lists aligned with grid filters / production LOB vocabulary (ES labels). */
+
+export const AUTO_RAMO_LABEL = 'Vehículos'
+
+/** First option is empty — pair with placeholder “Select one” in UI */
+export const AUTO_SUB_RAMO_OPTIONS: { label: string; value: string }[] = [
+  { label: 'Manual', value: 'manual' },
+  { label: 'Cobertura completa', value: 'cobertura_completa' },
+  { label: 'Daños a terceros', value: 'danos_terceros' }
+]
+
+export const AUTO_CLASE_OPTIONS: { label: string; value: string }[] = [
+  { label: 'Pickup', value: 'pickup' },
+  { label: 'Mula', value: 'mula' },
+  { label: 'Van', value: 'van' },
+  { label: 'MiniVan', value: 'minivan' },
+  { label: 'Panel', value: 'panel' },
+  { label: 'Camión', value: 'camion' },
+  { label: 'Camioneta', value: 'camioneta' },
+  { label: 'Sedan', value: 'sedan' },
+  { label: 'Cabezal', value: 'cabezal' },
+  { label: 'Bus (0-15)', value: 'bus_0_15' },
+  { label: 'Bus (16-30)', value: 'bus_16_30' },
+  { label: 'Bus (+30)', value: 'bus_30_plus' },
+  { label: 'Liviano', value: 'liviano' },
+  { label: 'Mediano', value: 'mediano' },
+  { label: 'Pesado', value: 'pesado' },
+  { label: 'Moto', value: 'moto' }
+]
+
+export const AUTO_USO_OPTIONS: { label: string; value: string }[] = [
+  { label: 'Particular', value: 'particular' },
+  { label: 'Comercial', value: 'comercial' }
+]
+
+export const AUTO_MARCA_OPTIONS: { label: string; value: string }[] = [
+  { label: 'Toyota', value: 'toyota' }
+]
+
+export const AUTO_MODELO_OPTIONS: { label: string; value: string }[] = [
+  { label: 'Cellica', value: 'cellica' },
+  { label: 'Corolla', value: 'corolla' }
+]
+
+const currentYear = new Date().getFullYear()
+
+export const AUTO_YEAR_OPTIONS: { label: string; value: string }[] = [
+  ...Array.from({ length: 22 }, (_, i) => {
+    const y = String(currentYear - i)
+    return { label: y, value: y }
+  })
+]
+
+/**
+ * Carriers available for solicit — in production, matches providers configured under Settings / Providers
+ * (each has a quoting email on file).
+ */
+export const AUTO_QUOTE_CARRIERS: { id: string; name: string; detail: string }[] = [
+  { id: 'mapfre', name: 'Mapfre', detail: 'Quoting email on file in provider profile' },
+  { id: 'seguros_aurora', name: 'Seguros Aurora', detail: 'Quoting email on file in provider profile' },
+  { id: 'continental', name: 'Continental', detail: 'Quoting email on file in provider profile' },
+  { id: 'internacional', name: 'Internacional', detail: 'Quoting email on file in provider profile' }
+]
+
+/** Predetermined plan packages — comparative mode builds side-by-side rows from these */
+export const AUTO_COVERAGE_PLANS: { id: string; label: string; hint: string }[] = [
+  { id: 'cc_full', label: 'Cobertura completa', hint: 'Collision, comprehensive, liability' },
+  { id: 'dat', label: 'Daños a terceros', hint: 'Third-party liability' },
+  { id: 'plan_corporate', label: 'Paquete corporativo', hint: 'Fleet-friendly endorsements' }
+]
diff --git a/app/data/form-field-groups.json b/app/data/form-field-groups.json
new file mode 100644
index 0000000..56faaff
--- /dev/null
+++ b/app/data/form-field-groups.json
@@ -0,0 +1,41 @@
+{
+  "version": 1,
+  "groups": [
+    {
+      "id": "kyc_identity",
+      "title": "Identificación",
+      "description": "Cédula, pasaporte, PEP según SSRP",
+      "fieldKeys": ["full_name", "document_id", "document_expiry", "nationality"]
+    },
+    {
+      "id": "life_risk_health",
+      "title": "Salud y hábitos (vida)",
+      "description": "Declaración de salud, tabaco, deportes de riesgo",
+      "fieldKeys": ["smoking", "height_cm", "weight_kg", "medical_conditions"]
+    },
+    {
+      "id": "auto_vehicle",
+      "title": "Vehículo",
+      "description": "Placa, uso, valor, accesorios",
+      "fieldKeys": ["plate", "vin", "year", "use_type", "declared_value"]
+    },
+    {
+      "id": "health_local_cover",
+      "title": "Salud local · cobertura",
+      "description": "Red, deducible, preexistencias",
+      "fieldKeys": ["network", "deductible_usd", "preexisting_disclosure"]
+    },
+    {
+      "id": "health_intl_cover",
+      "title": "Salud internacional",
+      "description": "Zona de cobertura, repatriación, USA cover",
+      "fieldKeys": ["coverage_zone", "usa_cover", "repatriation"]
+    },
+    {
+      "id": "home_property",
+      "title": "Propiedad (hogar)",
+      "description": "Ubicación, construcción, suma contenido",
+      "fieldKeys": ["address", "construction_type", "contents_sum"]
+    }
+  ]
+}
diff --git a/app/data/forms-catalog.json b/app/data/forms-catalog.json
new file mode 100644
index 0000000..7d075ed
--- /dev/null
+++ b/app/data/forms-catalog.json
@@ -0,0 +1,116 @@
+{
+  "version": 1,
+  "rows": [
+    {
+      "id": 39,
+      "description": "1031083 GE_ADB_GEN_OPTIMA_DIG 250507",
+      "insurerSlugs": ["optima"],
+      "subRamoKey": "danos_terceros_completa",
+      "subRamoLabel": "Daños a terceros · Cobertura completa",
+      "personKinds": "both",
+      "productLine": "auto_full_coverage",
+      "fileUrl": "/forms/README.txt",
+      "fileLabel": "17569365751031083-GE_ADB_GEN_OPTIMA.pdf",
+      "badge": 39,
+      "kind": "carrier_pdf",
+      "fieldGroupIds": ["kyc_identity", "auto_vehicle"]
+    },
+    {
+      "id": 38,
+      "description": "1031082 GE_ADB_GEN_OPTIMA_DAT",
+      "insurerSlugs": ["optima"],
+      "subRamoKey": "vehiculos_dat",
+      "subRamoLabel": "Vehículos · Daños a terceros (DAT)",
+      "personKinds": "both",
+      "productLine": "auto_dat_liability",
+      "fileUrl": "/forms/README.txt",
+      "fileLabel": "OPTIMA_DAT_solicitud.pdf",
+      "badge": 38,
+      "kind": "carrier_pdf",
+      "fieldGroupIds": ["kyc_identity", "auto_vehicle"]
+    },
+    {
+      "id": 37,
+      "description": "MAPFRE_MUNDIAL_AUTO_FULL",
+      "insurerSlugs": ["mapfre"],
+      "subRamoKey": "danos_terceros_completa",
+      "subRamoLabel": "Daños a terceros · Cobertura completa",
+      "personKinds": "both",
+      "productLine": "auto_full_coverage",
+      "fileUrl": "/forms/README.txt",
+      "fileLabel": "MAPFRE_MUNDIAL_FOREVER_PLUS.pdf",
+      "badge": 37,
+      "kind": "carrier_pdf",
+      "fieldGroupIds": ["kyc_identity", "auto_vehicle"]
+    },
+    {
+      "id": 36,
+      "description": "ASSA_VIDA_UNIVERSAL_PACK",
+      "insurerSlugs": ["assa"],
+      "subRamoKey": "vida_universal",
+      "subRamoLabel": "Vida universal · Protección y ahorro",
+      "personKinds": "natural",
+      "productLine": "life",
+      "fileUrl": "/forms/README.txt",
+      "fileLabel": "ASSA_Universal_II_illustration.pdf",
+      "badge": 36,
+      "kind": "carrier_pdf",
+      "fieldGroupIds": ["kyc_identity", "life_risk_health"]
+    },
+    {
+      "id": 35,
+      "description": "SALUD_LOCAL_KYC",
+      "insurerSlugs": ["mapfre", "assa"],
+      "subRamoKey": "salud_local",
+      "subRamoLabel": "Salud local",
+      "personKinds": "both",
+      "productLine": "health_local",
+      "fileUrl": "/forms/README.txt",
+      "fileLabel": "KYC_salud_local.pdf",
+      "badge": 35,
+      "kind": "carrier_pdf",
+      "fieldGroupIds": ["kyc_identity", "health_local_cover"]
+    },
+    {
+      "id": 34,
+      "description": "SALUD_INTERNACIONAL_KYC",
+      "insurerSlugs": ["palig", "mapfre"],
+      "subRamoKey": "salud_internacional",
+      "subRamoLabel": "Salud internacional / IPMI",
+      "personKinds": "both",
+      "productLine": "health_international",
+      "fileUrl": "/forms/README.txt",
+      "fileLabel": "IPMI_solicitud.pdf",
+      "badge": 34,
+      "kind": "carrier_pdf",
+      "fieldGroupIds": ["kyc_identity", "health_intl_cover"]
+    },
+    {
+      "id": 33,
+      "description": "CEDULA_NATURAL",
+      "insurerSlugs": ["optima", "mapfre", "assa", "acerta", "fedpa", "ancon"],
+      "subRamoKey": "any",
+      "subRamoLabel": "Cualquier ramo (identificación)",
+      "personKinds": "natural",
+      "productLine": null,
+      "fileUrl": "/forms/README.txt",
+      "fileLabel": "cedula_ejemplo.png",
+      "kind": "identity",
+      "fieldGroupIds": ["kyc_identity"]
+    },
+    {
+      "id": 32,
+      "description": "ACERTA_VEH_FULL_1012013",
+      "insurerSlugs": ["acerta"],
+      "subRamoKey": "danos_terceros_completa",
+      "subRamoLabel": "Daños a terceros · Cobertura completa",
+      "personKinds": "both",
+      "productLine": "auto_full_coverage",
+      "fileUrl": "/forms/README.txt",
+      "fileLabel": "GE_ATC_GEN_ACERTA_DIG.pdf",
+      "badge": 32,
+      "kind": "carrier_pdf",
+      "fieldGroupIds": ["kyc_identity", "auto_vehicle"]
+    }
+  ]
+}
diff --git a/app/data/health-quote-intake.ts b/app/data/health-quote-intake.ts
new file mode 100644
index 0000000..80d7697
--- /dev/null
+++ b/app/data/health-quote-intake.ts
@@ -0,0 +1,53 @@
+/** Health quoting — mock carriers, plans, and reference rate table (age bands). */
+
+export const HEALTH_QUOTE_CARRIERS: { id: string; name: string; detail: string; hasPublishedRateTable?: boolean }[] = [
+  {
+    id: 'vida_plena',
+    name: 'Vida Plena Salud',
+    detail: 'Quoting email on file · published age-banded table',
+    hasPublishedRateTable: true
+  },
+  {
+    id: 'salud_global',
+    name: 'Salud Global',
+    detail: 'Quoting email on file',
+    hasPublishedRateTable: false
+  },
+  {
+    id: 'integral_med',
+    name: 'Integral Medical',
+    detail: 'Quoting email on file',
+    hasPublishedRateTable: true
+  }
+]
+
+export const HEALTH_COVERAGE_PLANS: { id: string; label: string; hint: string }[] = [
+  { id: 'local_base', label: 'Local · Base', hint: 'In-country network, standard deductible' },
+  { id: 'local_plus', label: 'Local · Plus', hint: 'Broader network, lower copay' },
+  { id: 'intl_major', label: 'International · Major medical', hint: 'Evacuation + US/EU coverage tier' }
+]
+
+export const HEALTH_COVERAGE_AREA: { label: string; value: string }[] = [
+  { label: 'Local', value: 'local' },
+  { label: 'International', value: 'international' }
+]
+
+export const HEALTH_NETWORK_TIER: { label: string; value: string }[] = [
+  { label: 'Preferred / cerrado', value: 'preferred' },
+  { label: 'Open / amplio', value: 'open' }
+]
+
+export const HEALTH_DEDUCTIBLE: { label: string; value: string }[] = [
+  { label: '$500', value: '500' },
+  { label: '$1,000', value: '1000' },
+  { label: '$2,500', value: '2500' }
+]
+
+/** Mock age-band premium table (USD/mo) — some carriers publish this instead of email-only quotes */
+export const HEALTH_AGE_BAND_REFERENCE: { ageBand: string; employee: number; spouse: number; children: number }[] = [
+  { ageBand: '0–17', employee: 0, spouse: 0, children: 118 },
+  { ageBand: '18–29', employee: 142, spouse: 198, children: 0 },
+  { ageBand: '30–44', employee: 186, spouse: 251, children: 0 },
+  { ageBand: '45–54', employee: 264, spouse: 318, children: 0 },
+  { ageBand: '55–64', employee: 352, spouse: 401, children: 0 }
+]
diff --git a/app/data/life-quote-intake.ts b/app/data/life-quote-intake.ts
new file mode 100644
index 0000000..cab3a09
--- /dev/null
+++ b/app/data/life-quote-intake.ts
@@ -0,0 +1,45 @@
+/** Life quoting — mock carriers, plans, and option lists. */
+
+export const LIFE_QUOTE_CARRIERS: { id: string; name: string; detail: string }[] = [
+  { id: 'vida_plena', name: 'Vida Plena', detail: 'Quoting email on file in provider profile' },
+  { id: 'seguros_del_pacifico', name: 'Seguros del Pacífico', detail: 'Quoting email on file in provider profile' },
+  { id: 'continental_life', name: 'Continental Life', detail: 'Quoting email on file in provider profile' }
+]
+
+export const LIFE_COVERAGE_PLANS: { id: string; label: string; hint: string }[] = [
+  { id: 'term_basic', label: 'Term life · Basic', hint: 'Level-premium term, standard coverage' },
+  { id: 'term_plus', label: 'Term life · Plus', hint: 'Term with accidental-death rider' },
+  { id: 'whole_life', label: 'Whole life', hint: 'Permanent coverage with cash-value component' },
+  { id: 'keyman', label: 'Key person', hint: 'Business-owned policy on key employee' }
+]
+
+export const LIFE_GENDER_OPTIONS: { label: string; value: string }[] = [
+  { label: 'Male', value: 'male' },
+  { label: 'Female', value: 'female' }
+]
+
+export const LIFE_COVERAGE_TERM_OPTIONS: { label: string; value: string }[] = [
+  { label: '10 years', value: '10' },
+  { label: '15 years', value: '15' },
+  { label: '20 years', value: '20' },
+  { label: '30 years', value: '30' },
+  { label: 'Whole life', value: 'whole' }
+]
+
+export const LIFE_COVERAGE_AMOUNT_OPTIONS: { label: string; value: string }[] = [
+  { label: '$25,000', value: '25000' },
+  { label: '$50,000', value: '50000' },
+  { label: '$100,000', value: '100000' },
+  { label: '$250,000', value: '250000' },
+  { label: '$500,000', value: '500000' },
+  { label: '$1,000,000', value: '1000000' }
+]
+
+export const LIFE_BENEFICIARY_RELATIONSHIP_OPTIONS: { label: string; value: string }[] = [
+  { label: 'Spouse', value: 'spouse' },
+  { label: 'Child', value: 'child' },
+  { label: 'Parent', value: 'parent' },
+  { label: 'Sibling', value: 'sibling' },
+  { label: 'Business entity', value: 'business' },
+  { label: 'Other', value: 'other' }
+]
diff --git a/app/data/mock-analytics.ts b/app/data/mock-analytics.ts
new file mode 100644
index 0000000..6340e55
--- /dev/null
+++ b/app/data/mock-analytics.ts
@@ -0,0 +1,363 @@
+// ─── Business Analytics — Types, Labels, Mock Data ───────────────────────────
+
+export type AnalyticsTimePoint = { m: string; v: number; display: string }
+export type AnalyticsDomainId = 'production' | 'claims' | 'pipeline' | 'service'
+export type AnalyticsChartType = 'line' | 'bar' | 'area'
+
+export interface AnalyticsMetric {
+  id: string
+  domain: AnalyticsDomainId
+  label: string
+  unit: string
+  data12m: AnalyticsTimePoint[]
+  change: string
+  changeTone: 'positive' | 'negative' | 'neutral'
+  defaultChartType: AnalyticsChartType
+}
+
+export interface AnalyticsKpiSummary {
+  id: string
+  label: string
+  value: string
+  change: string
+  changeTone: 'positive' | 'negative' | 'neutral'
+  hint: string
+  sparkline: number[]
+}
+
+// ─── Domain Labels ───────────────────────────────────────────────────────────
+
+export const ANALYTICS_DOMAIN_LABELS: Record<AnalyticsDomainId, string> = {
+  production: 'Producción',
+  claims: 'Siniestros',
+  pipeline: 'Pipeline',
+  service: 'Servicio',
+}
+
+// ─── Headline KPI Summaries ──────────────────────────────────────────────────
+
+export const ANALYTICS_KPI_SUMMARIES: AnalyticsKpiSummary[] = [
+  { id: 'gwp', label: 'GWP Written', value: '$5.41M', change: '+6.2%', changeTone: 'positive', hint: 'Gross written premium YTD', sparkline: [72, 68, 76, 74, 81, 88, 85, 90, 87, 92, 95, 98] },
+  { id: 'policies', label: 'Active Policies', value: '342', change: '+12', changeTone: 'positive', hint: 'Currently active policies', sparkline: [290, 295, 298, 305, 310, 315, 318, 322, 328, 332, 338, 342] },
+  { id: 'loss-ratio', label: 'Loss Ratio', value: '58%', change: '-3.1%', changeTone: 'positive', hint: 'Claims paid / earned premium', sparkline: [68, 72, 65, 63, 60, 58, 61, 59, 57, 60, 58, 58] },
+  { id: 'retention', label: 'Retention Rate', value: '91%', change: '+1.2%', changeTone: 'positive', hint: 'Client renewal rate', sparkline: [86, 87, 88, 87, 89, 90, 89, 90, 91, 90, 91, 91] },
+  { id: 'open-claims', label: 'Open Claims', value: '7', change: '-2', changeTone: 'positive', hint: 'Currently unresolved claims', sparkline: [12, 11, 10, 9, 11, 10, 8, 9, 8, 7, 8, 7] },
+  { id: 'pipeline-value', label: 'Pipeline Value', value: '$6.2M', change: '+$820K', changeTone: 'positive', hint: 'Open quoted premium', sparkline: [42, 45, 48, 50, 52, 55, 53, 56, 58, 60, 62, 65] },
+]
+
+// ─── Metrics: Production & Revenue ───────────────────────────────────────────
+
+const productionMetrics: AnalyticsMetric[] = [
+  {
+    id: 'gwp', domain: 'production', label: 'GWP Written', unit: '$',
+    change: '+6.2%', changeTone: 'positive', defaultChartType: 'area',
+    data12m: [
+      { m: 'May', v: 62, display: '$3.82M' }, { m: 'Jun', v: 65, display: '$4.01M' },
+      { m: 'Jul', v: 60, display: '$3.70M' }, { m: 'Aug', v: 68, display: '$4.19M' },
+      { m: 'Sep', v: 71, display: '$4.38M' }, { m: 'Oct', v: 72, display: '$4.52M' },
+      { m: 'Nov', v: 68, display: '$4.28M' }, { m: 'Dec', v: 76, display: '$4.71M' },
+      { m: 'Jan', v: 74, display: '$4.61M' }, { m: 'Feb', v: 81, display: '$4.98M' },
+      { m: 'Mar', v: 88, display: '$5.41M' }, { m: 'Apr', v: 91, display: '$5.58M' },
+    ],
+  },
+  {
+    id: 'premium-by-lob', domain: 'production', label: 'Premium by LOB', unit: '$',
+    change: '+4.8%', changeTone: 'positive', defaultChartType: 'bar',
+    data12m: [
+      { m: 'Auto', v: 85, display: '$1.82M' }, { m: 'Health', v: 72, display: '$1.54M' },
+      { m: 'Life', v: 48, display: '$1.03M' }, { m: 'Property', v: 35, display: '$750K' },
+      { m: 'Marine', v: 18, display: '$386K' }, { m: 'Liability', v: 12, display: '$257K' },
+      { m: 'Surety', v: 8, display: '$171K' }, { m: 'Travel', v: 5, display: '$107K' },
+      { m: 'Other', v: 3, display: '$64K' }, { m: '', v: 0, display: '' },
+      { m: '', v: 0, display: '' }, { m: '', v: 0, display: '' },
+    ],
+  },
+  {
+    id: 'new-biz-vs-renewal', domain: 'production', label: 'New Biz vs Renewal', unit: '$',
+    change: '+$820K', changeTone: 'positive', defaultChartType: 'bar',
+    data12m: [
+      { m: 'May', v: 45, display: '$1.8M' }, { m: 'Jun', v: 48, display: '$1.9M' },
+      { m: 'Jul', v: 42, display: '$1.7M' }, { m: 'Aug', v: 52, display: '$2.1M' },
+      { m: 'Sep', v: 55, display: '$2.2M' }, { m: 'Oct', v: 52, display: '$2.4M' },
+      { m: 'Nov', v: 48, display: '$2.2M' }, { m: 'Dec', v: 62, display: '$2.9M' },
+      { m: 'Jan', v: 58, display: '$2.7M' }, { m: 'Feb', v: 64, display: '$3.0M' },
+      { m: 'Mar', v: 70, display: '$3.2M' }, { m: 'Apr', v: 73, display: '$3.4M' },
+    ],
+  },
+  {
+    id: 'commission-revenue', domain: 'production', label: 'Commission Revenue', unit: '$',
+    change: '+8.4%', changeTone: 'positive', defaultChartType: 'area',
+    data12m: [
+      { m: 'May', v: 48, display: '$590K' }, { m: 'Jun', v: 50, display: '$615K' },
+      { m: 'Jul', v: 46, display: '$565K' }, { m: 'Aug', v: 53, display: '$652K' },
+      { m: 'Sep', v: 55, display: '$680K' }, { m: 'Oct', v: 55, display: '$680K' },
+      { m: 'Nov', v: 52, display: '$640K' }, { m: 'Dec', v: 60, display: '$740K' },
+      { m: 'Jan', v: 58, display: '$715K' }, { m: 'Feb', v: 65, display: '$800K' },
+      { m: 'Mar', v: 72, display: '$886K' }, { m: 'Apr', v: 75, display: '$923K' },
+    ],
+  },
+  {
+    id: 'policies-bound', domain: 'production', label: 'Policies Bound', unit: '#',
+    change: '+12', changeTone: 'positive', defaultChartType: 'bar',
+    data12m: [
+      { m: 'May', v: 28, display: '28' }, { m: 'Jun', v: 30, display: '30' },
+      { m: 'Jul', v: 25, display: '25' }, { m: 'Aug', v: 33, display: '33' },
+      { m: 'Sep', v: 35, display: '35' }, { m: 'Oct', v: 32, display: '32' },
+      { m: 'Nov', v: 28, display: '28' }, { m: 'Dec', v: 35, display: '35' },
+      { m: 'Jan', v: 38, display: '38' }, { m: 'Feb', v: 36, display: '36' },
+      { m: 'Mar', v: 42, display: '42' }, { m: 'Apr', v: 44, display: '44' },
+    ],
+  },
+  {
+    id: 'avg-premium', domain: 'production', label: 'Avg Premium', unit: '$',
+    change: '+2.1%', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 52, display: '$12.4K' }, { m: 'Jun', v: 53, display: '$12.6K' },
+      { m: 'Jul', v: 51, display: '$12.1K' }, { m: 'Aug', v: 54, display: '$12.8K' },
+      { m: 'Sep', v: 55, display: '$13.1K' }, { m: 'Oct', v: 56, display: '$13.3K' },
+      { m: 'Nov', v: 55, display: '$13.1K' }, { m: 'Dec', v: 57, display: '$13.6K' },
+      { m: 'Jan', v: 56, display: '$13.3K' }, { m: 'Feb', v: 58, display: '$13.8K' },
+      { m: 'Mar', v: 59, display: '$14.0K' }, { m: 'Apr', v: 60, display: '$14.3K' },
+    ],
+  },
+]
+
+// ─── Metrics: Claims & Loss ──────────────────────────────────────────────────
+
+const claimsMetrics: AnalyticsMetric[] = [
+  {
+    id: 'claims-count', domain: 'claims', label: 'Claims Opened', unit: '#',
+    change: '-2', changeTone: 'positive', defaultChartType: 'bar',
+    data12m: [
+      { m: 'May', v: 8, display: '8' }, { m: 'Jun', v: 6, display: '6' },
+      { m: 'Jul', v: 10, display: '10' }, { m: 'Aug', v: 7, display: '7' },
+      { m: 'Sep', v: 9, display: '9' }, { m: 'Oct', v: 8, display: '8' },
+      { m: 'Nov', v: 6, display: '6' }, { m: 'Dec', v: 5, display: '5' },
+      { m: 'Jan', v: 7, display: '7' }, { m: 'Feb', v: 8, display: '8' },
+      { m: 'Mar', v: 6, display: '6' }, { m: 'Apr', v: 5, display: '5' },
+    ],
+  },
+  {
+    id: 'loss-ratio', domain: 'claims', label: 'Loss Ratio', unit: '%',
+    change: '-3.1%', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 66, display: '66%' }, { m: 'Jun', v: 64, display: '64%' },
+      { m: 'Jul', v: 70, display: '70%' }, { m: 'Aug', v: 67, display: '67%' },
+      { m: 'Sep', v: 65, display: '65%' }, { m: 'Oct', v: 68, display: '68%' },
+      { m: 'Nov', v: 72, display: '72%' }, { m: 'Dec', v: 65, display: '65%' },
+      { m: 'Jan', v: 63, display: '63%' }, { m: 'Feb', v: 60, display: '60%' },
+      { m: 'Mar', v: 58, display: '58%' }, { m: 'Apr', v: 57, display: '57%' },
+    ],
+  },
+  {
+    id: 'avg-resolution-days', domain: 'claims', label: 'Avg Resolution', unit: 'days',
+    change: '-4d', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 38, display: '38d' }, { m: 'Jun', v: 35, display: '35d' },
+      { m: 'Jul', v: 40, display: '40d' }, { m: 'Aug', v: 36, display: '36d' },
+      { m: 'Sep', v: 34, display: '34d' }, { m: 'Oct', v: 32, display: '32d' },
+      { m: 'Nov', v: 30, display: '30d' }, { m: 'Dec', v: 28, display: '28d' },
+      { m: 'Jan', v: 31, display: '31d' }, { m: 'Feb', v: 29, display: '29d' },
+      { m: 'Mar', v: 27, display: '27d' }, { m: 'Apr', v: 26, display: '26d' },
+    ],
+  },
+  {
+    id: 'reserve-trend', domain: 'claims', label: 'Reserve Trend', unit: '$',
+    change: '-$45K', changeTone: 'positive', defaultChartType: 'area',
+    data12m: [
+      { m: 'May', v: 75, display: '$380K' }, { m: 'Jun', v: 70, display: '$355K' },
+      { m: 'Jul', v: 80, display: '$405K' }, { m: 'Aug', v: 72, display: '$365K' },
+      { m: 'Sep', v: 68, display: '$345K' }, { m: 'Oct', v: 65, display: '$330K' },
+      { m: 'Nov', v: 60, display: '$304K' }, { m: 'Dec', v: 58, display: '$294K' },
+      { m: 'Jan', v: 62, display: '$314K' }, { m: 'Feb', v: 57, display: '$289K' },
+      { m: 'Mar', v: 55, display: '$279K' }, { m: 'Apr', v: 52, display: '$264K' },
+    ],
+  },
+  {
+    id: 'claims-by-status', domain: 'claims', label: 'Claims by Status', unit: '#',
+    change: '', changeTone: 'neutral', defaultChartType: 'bar',
+    data12m: [
+      { m: 'Open', v: 3, display: '3' }, { m: 'Review', v: 3, display: '3' },
+      { m: 'Docs', v: 1, display: '1' }, { m: 'Approved', v: 2, display: '2' },
+      { m: 'Denied', v: 0, display: '0' }, { m: 'Closed', v: 1, display: '1' },
+      { m: '', v: 0, display: '' }, { m: '', v: 0, display: '' },
+      { m: '', v: 0, display: '' }, { m: '', v: 0, display: '' },
+      { m: '', v: 0, display: '' }, { m: '', v: 0, display: '' },
+    ],
+  },
+  {
+    id: 'severity-trend', domain: 'claims', label: 'Avg Severity', unit: '$',
+    change: '-$2.1K', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 65, display: '$18.5K' }, { m: 'Jun', v: 60, display: '$17.1K' },
+      { m: 'Jul', v: 72, display: '$20.5K' }, { m: 'Aug', v: 63, display: '$17.9K' },
+      { m: 'Sep', v: 58, display: '$16.5K' }, { m: 'Oct', v: 55, display: '$15.7K' },
+      { m: 'Nov', v: 52, display: '$14.8K' }, { m: 'Dec', v: 50, display: '$14.2K' },
+      { m: 'Jan', v: 54, display: '$15.4K' }, { m: 'Feb', v: 48, display: '$13.7K' },
+      { m: 'Mar', v: 46, display: '$13.1K' }, { m: 'Apr', v: 44, display: '$12.5K' },
+    ],
+  },
+]
+
+// ─── Metrics: Sales Pipeline ─────────────────────────────────────────────────
+
+const pipelineMetrics: AnalyticsMetric[] = [
+  {
+    id: 'conversion-rate', domain: 'pipeline', label: 'Conversion Rate', unit: '%',
+    change: '+2.8%', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 28, display: '28%' }, { m: 'Jun', v: 30, display: '30%' },
+      { m: 'Jul', v: 27, display: '27%' }, { m: 'Aug', v: 32, display: '32%' },
+      { m: 'Sep', v: 31, display: '31%' }, { m: 'Oct', v: 33, display: '33%' },
+      { m: 'Nov', v: 30, display: '30%' }, { m: 'Dec', v: 35, display: '35%' },
+      { m: 'Jan', v: 34, display: '34%' }, { m: 'Feb', v: 36, display: '36%' },
+      { m: 'Mar', v: 38, display: '38%' }, { m: 'Apr', v: 39, display: '39%' },
+    ],
+  },
+  {
+    id: 'pipeline-value', domain: 'pipeline', label: 'Pipeline Value', unit: '$',
+    change: '+$820K', changeTone: 'positive', defaultChartType: 'area',
+    data12m: [
+      { m: 'May', v: 42, display: '$3.8M' }, { m: 'Jun', v: 45, display: '$4.1M' },
+      { m: 'Jul', v: 40, display: '$3.6M' }, { m: 'Aug', v: 48, display: '$4.4M' },
+      { m: 'Sep', v: 52, display: '$4.7M' }, { m: 'Oct', v: 55, display: '$5.0M' },
+      { m: 'Nov', v: 50, display: '$4.5M' }, { m: 'Dec', v: 58, display: '$5.3M' },
+      { m: 'Jan', v: 56, display: '$5.1M' }, { m: 'Feb', v: 60, display: '$5.5M' },
+      { m: 'Mar', v: 65, display: '$5.9M' }, { m: 'Apr', v: 68, display: '$6.2M' },
+    ],
+  },
+  {
+    id: 'lead-sources', domain: 'pipeline', label: 'Lead Sources', unit: '#',
+    change: '+18%', changeTone: 'positive', defaultChartType: 'bar',
+    data12m: [
+      { m: 'Referral', v: 85, display: '85' }, { m: 'Walk-in', v: 42, display: '42' },
+      { m: 'WhatsApp', v: 38, display: '38' }, { m: 'Google', v: 28, display: '28' },
+      { m: 'Instagram', v: 22, display: '22' }, { m: 'Facebook', v: 15, display: '15' },
+      { m: 'Partner', v: 12, display: '12' }, { m: 'Event', v: 8, display: '8' },
+      { m: 'Other', v: 6, display: '6' }, { m: '', v: 0, display: '' },
+      { m: '', v: 0, display: '' }, { m: '', v: 0, display: '' },
+    ],
+  },
+  {
+    id: 'quote-to-bind-days', domain: 'pipeline', label: 'Quote-to-Bind', unit: 'days',
+    change: '-2d', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 18, display: '18d' }, { m: 'Jun', v: 16, display: '16d' },
+      { m: 'Jul', v: 20, display: '20d' }, { m: 'Aug', v: 15, display: '15d' },
+      { m: 'Sep', v: 14, display: '14d' }, { m: 'Oct', v: 13, display: '13d' },
+      { m: 'Nov', v: 15, display: '15d' }, { m: 'Dec', v: 12, display: '12d' },
+      { m: 'Jan', v: 14, display: '14d' }, { m: 'Feb', v: 11, display: '11d' },
+      { m: 'Mar', v: 10, display: '10d' }, { m: 'Apr', v: 9, display: '9d' },
+    ],
+  },
+  {
+    id: 'agent-performance', domain: 'pipeline', label: 'Agent Performance', unit: '#',
+    change: '', changeTone: 'neutral', defaultChartType: 'bar',
+    data12m: [
+      { m: 'Ana R.', v: 88, display: '44 pólizas' }, { m: 'Marco V.', v: 72, display: '36 pólizas' },
+      { m: 'Carlos V.', v: 64, display: '32 pólizas' }, { m: 'María F.', v: 56, display: '28 pólizas' },
+      { m: 'Luis G.', v: 40, display: '20 pólizas' }, { m: '', v: 0, display: '' },
+      { m: '', v: 0, display: '' }, { m: '', v: 0, display: '' },
+      { m: '', v: 0, display: '' }, { m: '', v: 0, display: '' },
+      { m: '', v: 0, display: '' }, { m: '', v: 0, display: '' },
+    ],
+  },
+  {
+    id: 'win-rate', domain: 'pipeline', label: 'Win Rate', unit: '%',
+    change: '+3.5%', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 35, display: '35%' }, { m: 'Jun', v: 38, display: '38%' },
+      { m: 'Jul', v: 33, display: '33%' }, { m: 'Aug', v: 40, display: '40%' },
+      { m: 'Sep', v: 42, display: '42%' }, { m: 'Oct', v: 41, display: '41%' },
+      { m: 'Nov', v: 39, display: '39%' }, { m: 'Dec', v: 44, display: '44%' },
+      { m: 'Jan', v: 43, display: '43%' }, { m: 'Feb', v: 46, display: '46%' },
+      { m: 'Mar', v: 48, display: '48%' }, { m: 'Apr', v: 50, display: '50%' },
+    ],
+  },
+]
+
+// ─── Metrics: Customer & Service ─────────────────────────────────────────────
+
+const serviceMetrics: AnalyticsMetric[] = [
+  {
+    id: 'support-volume', domain: 'service', label: 'Tickets Opened', unit: '#',
+    change: '+15%', changeTone: 'negative', defaultChartType: 'bar',
+    data12m: [
+      { m: 'May', v: 22, display: '22' }, { m: 'Jun', v: 25, display: '25' },
+      { m: 'Jul', v: 28, display: '28' }, { m: 'Aug', v: 24, display: '24' },
+      { m: 'Sep', v: 30, display: '30' }, { m: 'Oct', v: 27, display: '27' },
+      { m: 'Nov', v: 32, display: '32' }, { m: 'Dec', v: 20, display: '20' },
+      { m: 'Jan', v: 26, display: '26' }, { m: 'Feb', v: 29, display: '29' },
+      { m: 'Mar', v: 34, display: '34' }, { m: 'Apr', v: 36, display: '36' },
+    ],
+  },
+  {
+    id: 'sla-compliance', domain: 'service', label: 'SLA Compliance', unit: '%',
+    change: '+4%', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 78, display: '78%' }, { m: 'Jun', v: 80, display: '80%' },
+      { m: 'Jul', v: 76, display: '76%' }, { m: 'Aug', v: 82, display: '82%' },
+      { m: 'Sep', v: 84, display: '84%' }, { m: 'Oct', v: 83, display: '83%' },
+      { m: 'Nov', v: 85, display: '85%' }, { m: 'Dec', v: 88, display: '88%' },
+      { m: 'Jan', v: 86, display: '86%' }, { m: 'Feb', v: 89, display: '89%' },
+      { m: 'Mar', v: 90, display: '90%' }, { m: 'Apr', v: 92, display: '92%' },
+    ],
+  },
+  {
+    id: 'avg-response-time', domain: 'service', label: 'Avg Response Time', unit: 'hrs',
+    change: '-1.2h', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 72, display: '5.8h' }, { m: 'Jun', v: 68, display: '5.4h' },
+      { m: 'Jul', v: 75, display: '6.0h' }, { m: 'Aug', v: 65, display: '5.2h' },
+      { m: 'Sep', v: 60, display: '4.8h' }, { m: 'Oct', v: 55, display: '4.4h' },
+      { m: 'Nov', v: 52, display: '4.2h' }, { m: 'Dec', v: 48, display: '3.8h' },
+      { m: 'Jan', v: 50, display: '4.0h' }, { m: 'Feb', v: 45, display: '3.6h' },
+      { m: 'Mar', v: 42, display: '3.4h' }, { m: 'Apr', v: 40, display: '3.2h' },
+    ],
+  },
+  {
+    id: 'retention-rate', domain: 'service', label: 'Retention Rate', unit: '%',
+    change: '+1.2%', changeTone: 'positive', defaultChartType: 'area',
+    data12m: [
+      { m: 'May', v: 84, display: '84%' }, { m: 'Jun', v: 85, display: '85%' },
+      { m: 'Jul', v: 86, display: '86%' }, { m: 'Aug', v: 87, display: '87%' },
+      { m: 'Sep', v: 88, display: '88%' }, { m: 'Oct', v: 88, display: '88%' },
+      { m: 'Nov', v: 87, display: '87%' }, { m: 'Dec', v: 89, display: '89%' },
+      { m: 'Jan', v: 90, display: '90%' }, { m: 'Feb', v: 90, display: '90%' },
+      { m: 'Mar', v: 91, display: '91%' }, { m: 'Apr', v: 91, display: '91%' },
+    ],
+  },
+  {
+    id: 'nps-score', domain: 'service', label: 'NPS Score', unit: '#',
+    change: '+5', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 42, display: '42' }, { m: 'Jun', v: 44, display: '44' },
+      { m: 'Jul', v: 40, display: '40' }, { m: 'Aug', v: 46, display: '46' },
+      { m: 'Sep', v: 48, display: '48' }, { m: 'Oct', v: 50, display: '50' },
+      { m: 'Nov', v: 48, display: '48' }, { m: 'Dec', v: 52, display: '52' },
+      { m: 'Jan', v: 54, display: '54' }, { m: 'Feb', v: 55, display: '55' },
+      { m: 'Mar', v: 58, display: '58' }, { m: 'Apr', v: 60, display: '60' },
+    ],
+  },
+  {
+    id: 'ticket-resolution-days', domain: 'service', label: 'Ticket Resolution', unit: 'days',
+    change: '-0.8d', changeTone: 'positive', defaultChartType: 'line',
+    data12m: [
+      { m: 'May', v: 55, display: '4.4d' }, { m: 'Jun', v: 52, display: '4.2d' },
+      { m: 'Jul', v: 58, display: '4.6d' }, { m: 'Aug', v: 50, display: '4.0d' },
+      { m: 'Sep', v: 48, display: '3.8d' }, { m: 'Oct', v: 45, display: '3.6d' },
+      { m: 'Nov', v: 42, display: '3.4d' }, { m: 'Dec', v: 40, display: '3.2d' },
+      { m: 'Jan', v: 43, display: '3.4d' }, { m: 'Feb', v: 38, display: '3.0d' },
+      { m: 'Mar', v: 36, display: '2.9d' }, { m: 'Apr', v: 34, display: '2.7d' },
+    ],
+  },
+]
+
+// ─── Combined Export ─────────────────────────────────────────────────────────
+
+export const ANALYTICS_METRICS: AnalyticsMetric[] = [
+  ...productionMetrics,
+  ...claimsMetrics,
+  ...pipelineMetrics,
+  ...serviceMetrics,
+]
diff --git a/app/data/mock-claims.ts b/app/data/mock-claims.ts
new file mode 100644
index 0000000..6900801
--- /dev/null
+++ b/app/data/mock-claims.ts
@@ -0,0 +1,550 @@
+// ── Claims Management — Types & Mock Data ───────────────────────────────────
+
+export type CarrierStatus =
+  | 'fnol_submitted'
+  | 'acknowledged'
+  | 'investigation'
+  | 'documentation_pending'
+  | 'reserved'
+  | 'negotiation'
+  | 'settlement_offered'
+  | 'closed'
+
+export type BrokerWorkflowStatus =
+  | 'waiting_carrier'
+  | 'waiting_insured_docs'
+  | 'needs_escalation'
+  | 'client_update_overdue'
+  | 'ready_to_close'
+
+export type ClaimPriority = 'critical' | 'high' | 'medium' | 'low'
+
+export type PartyRole = 'insured' | 'adjuster' | 'carrier_contact' | 'handler' | 'attorney'
+
+export interface ClaimParty {
+  id: string
+  role: PartyRole
+  name: string
+  initials: string
+  email?: string
+  phone?: string
+  company?: string
+  unreadComms: number
+}
+
+export type TaskType = 'document' | 'communication' | 'escalation' | 'general'
+export type TaskStatus = 'open' | 'in_progress' | 'overdue' | 'done'
+
+export interface ClaimTask {
+  id: string
+  title: string
+  status: TaskStatus
+  assignee: string
+  dueDate: string
+  slaPercent: number
+  type: TaskType
+  isSystemSuggested?: boolean
+  dismissedUntil?: string | null
+}
+
+export type CommType = 'email' | 'call' | 'note' | 'system'
+
+export interface ClaimCommEntry {
+  id: string
+  type: CommType
+  partyId: string
+  from: string
+  to?: string
+  subject?: string
+  body: string
+  timestamp: string
+  threadId?: string
+  aiDigest?: string
+}
+
+export type DocCategory = 'fnol' | 'evidence' | 'estimates' | 'correspondence' | 'settlement'
+
+export interface ClaimDocument {
+  id: string
+  name: string
+  category: DocCategory
+  uploadedBy: string
+  uploadedAt: string
+  size: string
+  required: boolean
+  received: boolean
+}
+
+export type IntakeStatus = 'not_sent' | 'sent' | 'in_progress' | 'completed'
+export type GeneratedFormStatus = 'draft' | 'ready_for_signature' | 'signed' | 'submitted'
+
+export interface GeneratedForm {
+  id: string
+  carrierFormName: string
+  carrier: string
+  lob: string
+  status: GeneratedFormStatus
+  generatedAt: string
+  signedAt: string | null
+}
+
+export type FinancialType = 'reserve_change' | 'payment' | 'subrogation' | 'expense'
+
+export interface ClaimFinancialEntry {
+  id: string
+  type: FinancialType
+  date: string
+  amount: number
+  description: string
+  annotation?: string
+}
+
+export interface ClaimDetail {
+  id: string
+  customerId: string
+  customerName: string
+  policyId: string
+  policyNumber: string
+  carrier: string
+  lob: string
+  type: string
+  carrierStatus: CarrierStatus
+  workflowStatus: BrokerWorkflowStatus
+  priority: ClaimPriority
+  dateFiled: string
+  daysOpen: number
+  handler: string
+  reservedAmount: number
+  paidAmount: number
+  parties: ClaimParty[]
+  tasks: ClaimTask[]
+  communications: ClaimCommEntry[]
+  documents: ClaimDocument[]
+  financials: ClaimFinancialEntry[]
+  aiRecap: string
+  aiRecapSourceCount: number
+  keyDates: { label: string; date: string; done: boolean }[]
+  reserveHistory: { date: string; amount: number; annotation: string }[]
+  intakeToken: string | null
+  intakeStatus: IntakeStatus
+  intakeSentAt: string | null
+  intakeCompletedAt: string | null
+  generatedForms: GeneratedForm[]
+}
+
+// ── Label Maps ──────────────────────────────────────────────────────────────
+
+export const CARRIER_STATUS_LABELS: Record<CarrierStatus, string> = {
+  fnol_submitted: 'FNOL Submitted',
+  acknowledged: 'Acknowledged',
+  investigation: 'Investigation',
+  documentation_pending: 'Documentation Pending',
+  reserved: 'Reserved',
+  negotiation: 'Negotiation',
+  settlement_offered: 'Settlement Offered',
+  closed: 'Closed',
+}
+
+export const WORKFLOW_STATUS_LABELS: Record<BrokerWorkflowStatus, string> = {
+  waiting_carrier: 'Waiting on Carrier',
+  waiting_insured_docs: 'Waiting on Insured Docs',
+  needs_escalation: 'Needs Escalation',
+  client_update_overdue: 'Client Update Overdue',
+  ready_to_close: 'Ready to Close',
+}
+
+export const PRIORITY_LABELS: Record<ClaimPriority, string> = {
+  critical: 'Critical',
+  high: 'High',
+  medium: 'Medium',
+  low: 'Low',
+}
+
+export const TASK_STATUS_LABELS: Record<TaskStatus, string> = {
+  open: 'Open',
+  in_progress: 'In Progress',
+  overdue: 'Overdue',
+  done: 'Done',
+}
+
+export const DOC_CATEGORY_LABELS: Record<DocCategory, string> = {
+  fnol: 'FNOL & Notice',
+  evidence: 'Evidence & Photos',
+  estimates: 'Estimates & Appraisals',
+  correspondence: 'Correspondence',
+  settlement: 'Settlement',
+}
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+export function slaColor(percent: number): 'green' | 'amber' | 'red' {
+  if (percent >= 100) return 'red'
+  if (percent >= 75) return 'amber'
+  return 'green'
+}
+
+export function fmtClaimMoney(n: number): string {
+  if (n >= 1_000_000) return '$' + (n / 1_000_000).toFixed(1) + 'M'
+  if (n >= 1_000) return '$' + (n / 1_000).toFixed(1) + 'K'
+  return '$' + n.toLocaleString()
+}
+
+// ── Mock Data ───────────────────────────────────────────────────────────────
+
+const clm0048: ClaimDetail = {
+  id: 'CLM-0048',
+  customerId: 'corp-hotel-pacifico',
+  customerName: 'Hotel Pacífico S.A.',
+  policyId: 'POL-2024-HP-001',
+  policyNumber: 'PROP-2024-HP-001',
+  carrier: 'ASSA',
+  lob: 'General Risk',
+  type: 'Fire damage — kitchen wing',
+  carrierStatus: 'investigation',
+  workflowStatus: 'waiting_carrier',
+  priority: 'critical',
+  dateFiled: '2026-04-05',
+  daysOpen: 3,
+  handler: 'Ana R.',
+  reservedAmount: 128_000,
+  paidAmount: 0,
+
+  parties: [
+    { id: 'p1', role: 'insured', name: 'Carlos Montero', initials: 'CM', email: 'cmontero@hotelpacifico.cr', phone: '+506 2643-1200', company: 'Hotel Pacífico S.A.', unreadComms: 2 },
+    { id: 'p2', role: 'adjuster', name: 'Roberto Méndez', initials: 'RM', email: 'rmendez@peritajes.cr', phone: '+506 8844-2200', company: 'Peritajes CR', unreadComms: 0 },
+    { id: 'p3', role: 'carrier_contact', name: 'Lucía Vargas', initials: 'LV', email: 'lvargas@assa.cr', phone: '+506 2222-5000', company: 'ASSA', unreadComms: 1 },
+    { id: 'p4', role: 'handler', name: 'Ana Ramírez', initials: 'AR', email: 'ana.r@seguros.cr', phone: '+506 8855-3300', unreadComms: 0 },
+  ],
+
+  tasks: [
+    { id: 't1', title: 'Upload police/fire report', status: 'overdue', assignee: 'Ana R.', dueDate: '2026-04-07', slaPercent: 110, type: 'document' },
+    { id: 't2', title: 'Follow up with adjuster — no site visit scheduled', status: 'open', assignee: 'Ana R.', dueDate: '2026-04-09', slaPercent: 60, type: 'communication' },
+    { id: 't3', title: 'Send initial status update to insured', status: 'open', assignee: 'Ana R.', dueDate: '2026-04-08', slaPercent: 85, type: 'communication' },
+    { id: 't4', title: 'Carrier non-response 3 days — escalate?', status: 'open', assignee: 'Ana R.', dueDate: '2026-04-08', slaPercent: 90, type: 'escalation', isSystemSuggested: true },
+    { id: 't5', title: 'Request preliminary damage estimate from adjuster', status: 'open', assignee: 'Ana R.', dueDate: '2026-04-12', slaPercent: 30, type: 'general' },
+    { id: 't6', title: 'Confirm policy coverage for fire peril', status: 'done', assignee: 'Ana R.', dueDate: '2026-04-06', slaPercent: 100, type: 'general' },
+  ],
+
+  communications: [
+    { id: 'c1', type: 'system', partyId: 'p4', from: 'System', body: 'Claim CLM-0048 created. FNOL submitted to ASSA.', timestamp: '2026-04-05T09:15:00' },
+    { id: 'c2', type: 'email', partyId: 'p1', from: 'Carlos Montero', to: 'Ana Ramírez', subject: 'Fire Incident — Hotel Pacífico Kitchen Wing', body: 'Ana, the fire started around 2am in the kitchen exhaust system. The fire department responded within 20 minutes. The kitchen wing sustained significant structural damage, and the adjacent dining area has smoke and water damage. We have temporarily closed the restaurant. Attached are initial photos from the scene. We need to process this claim urgently as we are losing revenue daily.', timestamp: '2026-04-05T10:30:00', threadId: 'th1' },
+    { id: 'c3', type: 'email', partyId: 'p4', from: 'Ana Ramírez', to: 'Lucía Vargas', subject: 'FNOL — Hotel Pacífico Fire Claim CLM-0048', body: 'Lucía, please find attached the FNOL for Hotel Pacífico. Fire damage to kitchen wing on April 5. Policy PROP-2024-HP-001 covers fire peril with $500K limit. Requesting immediate adjuster assignment. This is a high-value commercial client with business interruption exposure.', timestamp: '2026-04-05T11:45:00', threadId: 'th2' },
+    { id: 'c4', type: 'call', partyId: 'p1', from: 'Ana Ramírez', body: 'Called Carlos Montero to confirm FNOL was submitted. Discussed initial documentation needed: fire report, photos, inventory of damaged equipment. Carlos will send equipment list by end of day. Advised to keep all receipts for temporary repairs.', timestamp: '2026-04-05T14:00:00' },
+    { id: 'c5', type: 'email', partyId: 'p3', from: 'Lucía Vargas', to: 'Ana Ramírez', subject: 'RE: FNOL — Hotel Pacífico Fire Claim CLM-0048', body: 'Ana, claim received and logged under ASSA reference FI-2026-04412. We are assigning adjuster Roberto Méndez from Peritajes CR. He will contact you to schedule site inspection.', timestamp: '2026-04-06T09:00:00', threadId: 'th2', aiDigest: 'ASSA acknowledged claim as FI-2026-04412. Adjuster Roberto Méndez (Peritajes CR) assigned. Site inspection pending scheduling.' },
+    { id: 'c6', type: 'system', partyId: 'p4', from: 'System', body: 'Carrier status updated: FNOL Submitted → Acknowledged', timestamp: '2026-04-06T09:05:00' },
+    { id: 'c7', type: 'note', partyId: 'p4', from: 'Ana Ramírez', body: 'Reviewed policy. Fire peril covered. Business interruption sublimit $200K with 48h waiting period. Need to flag BI exposure to carrier early — hotel restaurant closure = significant daily revenue loss.', timestamp: '2026-04-06T10:30:00' },
+    { id: 'c8', type: 'email', partyId: 'p2', from: 'Roberto Méndez', to: 'Ana Ramírez', subject: 'Site Inspection — Hotel Pacífico', body: 'Good morning Ana. I have been assigned to inspect the fire damage at Hotel Pacífico. Could you coordinate with the insured for access? I am available Thursday or Friday this week.', timestamp: '2026-04-07T08:00:00', threadId: 'th3' },
+    { id: 'c9', type: 'email', partyId: 'p4', from: 'Ana Ramírez', to: 'Roberto Méndez', subject: 'RE: Site Inspection — Hotel Pacífico', body: 'Roberto, Thursday works. I will confirm with the hotel and send you the contact details. Please plan for approximately 3 hours — the damage area covers the kitchen wing and adjacent dining area.', timestamp: '2026-04-07T09:15:00', threadId: 'th3' },
+    { id: 'c10', type: 'system', partyId: 'p4', from: 'System', body: 'Carrier status updated: Acknowledged → Investigation', timestamp: '2026-04-07T10:00:00' },
+    { id: 'c11', type: 'email', partyId: 'p1', from: 'Carlos Montero', to: 'Ana Ramírez', subject: 'RE: Fire Incident — Equipment Inventory', body: 'Ana, attached is the damaged equipment inventory as requested. Total estimated replacement value approximately $85,000. Also including photos of the structural damage to the exhaust hood and ceiling. The fire inspector\'s preliminary report should be ready by Friday.', timestamp: '2026-04-07T16:00:00', threadId: 'th1', aiDigest: 'Insured provided equipment inventory ($85K estimated). Structural damage photos attached. Fire inspector report expected Friday.' },
+    { id: 'c12', type: 'note', partyId: 'p4', from: 'Ana Ramírez', body: 'Equipment inventory received — $85K. Combined with structural estimates, total exposure could exceed $150K. May need to flag for reserve increase once adjuster report comes in. BI claim will be separate — need to start documenting daily revenue loss.', timestamp: '2026-04-08T08:30:00' },
+  ],
+
+  documents: [
+    { id: 'd1', name: 'FNOL-CLM0048.pdf', category: 'fnol', uploadedBy: 'Ana R.', uploadedAt: '2026-04-05', size: '245 KB', required: true, received: true },
+    { id: 'd2', name: 'Policy-Declarations-HP.pdf', category: 'fnol', uploadedBy: 'Ana R.', uploadedAt: '2026-04-05', size: '1.2 MB', required: true, received: true },
+    { id: 'd3', name: 'Initial-Photos-Kitchen.zip', category: 'evidence', uploadedBy: 'Carlos Montero', uploadedAt: '2026-04-05', size: '18.4 MB', required: true, received: true },
+    { id: 'd4', name: 'Equipment-Inventory.xlsx', category: 'estimates', uploadedBy: 'Carlos Montero', uploadedAt: '2026-04-07', size: '89 KB', required: true, received: true },
+    { id: 'd5', name: 'Structural-Damage-Photos.zip', category: 'evidence', uploadedBy: 'Carlos Montero', uploadedAt: '2026-04-07', size: '24.1 MB', required: false, received: true },
+    { id: 'd6', name: 'ASSA-Acknowledgment-FI202604412.pdf', category: 'correspondence', uploadedBy: 'Ana R.', uploadedAt: '2026-04-06', size: '156 KB', required: false, received: true },
+    { id: 'd7', name: 'Fire-Inspector-Report.pdf', category: 'evidence', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+    { id: 'd8', name: 'Adjuster-Preliminary-Estimate.pdf', category: 'estimates', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+    { id: 'd9', name: 'Business-Interruption-Docs.pdf', category: 'estimates', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+    { id: 'd10', name: 'Police-Fire-Report.pdf', category: 'fnol', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+  ],
+
+  financials: [
+    { id: 'f1', type: 'reserve_change', date: '2026-04-05', amount: 128_000, description: 'Initial reserve set', annotation: 'Based on preliminary damage assessment and policy limits' },
+    { id: 'f2', type: 'expense', date: '2026-04-06', amount: 1_500, description: 'Adjuster assignment fee — Peritajes CR', annotation: 'Standard commercial property rate' },
+    { id: 'f3', type: 'expense', date: '2026-04-07', amount: 450, description: 'Emergency structural assessment', annotation: 'Required for safety clearance' },
+  ],
+
+  aiRecap: 'Siniestro por incendio en el ala de cocina del Hotel Pacífico, reportado el 5 de abril de 2026. El fuego se originó en el sistema de extracción de la cocina alrededor de las 2am. Los bomberos respondieron en 20 minutos. Daños significativos a la estructura de la cocina y daños por humo y agua en el comedor adyacente. El restaurante está cerrado temporalmente.\n\nASSA acusó recibo el 6 de abril (ref. FI-2026-04412) y asignó al ajustador Roberto Méndez de Peritajes CR. La inspección del sitio está pendiente de programar para esta semana.\n\nEl asegurado proporcionó un inventario de equipos dañados valorado en ~$85K. La exposición total podría superar $150K una vez que se complete la evaluación estructural. Hay exposición adicional por interrupción de negocio (sublímite de $200K con período de espera de 48h).\n\nPendiente: reporte del inspector de bomberos (esperado viernes), estimación preliminar del ajustador, documentación de pérdida de ingresos diarios para reclamo de BI.',
+  aiRecapSourceCount: 14,
+
+  keyDates: [
+    { label: 'FNOL Filed', date: '2026-04-05', done: true },
+    { label: 'Carrier Acknowledged', date: '2026-04-06', done: true },
+    { label: 'Adjuster Assigned', date: '2026-04-06', done: true },
+    { label: 'Investigation Started', date: '2026-04-07', done: true },
+    { label: 'Site Inspection', date: '2026-04-10', done: false },
+    { label: 'Preliminary Estimate', date: '', done: false },
+    { label: 'Reserve Review', date: '', done: false },
+    { label: 'Settlement', date: '', done: false },
+  ],
+
+  reserveHistory: [
+    { date: '2026-04-05', amount: 128_000, annotation: 'Initial reserve — fire damage assessment pending' },
+  ],
+  intakeToken: 'tk_hp_048_a3f1',
+  intakeStatus: 'completed',
+  intakeSentAt: '2026-04-05T14:30:00Z',
+  intakeCompletedAt: '2026-04-06T09:12:00Z',
+  generatedForms: [
+    { id: 'gf-048-1', carrierFormName: 'Aviso de Pérdida — ASSA', carrier: 'ASSA', lob: 'General Risk', status: 'ready_for_signature', generatedAt: '2026-04-06T10:00:00Z', signedAt: null },
+  ],
+}
+
+const clm0047: ClaimDetail = {
+  id: 'CLM-0047',
+  customerId: 'corp-empresa-abc',
+  customerName: 'Empresa ABC S.A.',
+  policyId: 'POL-2024-ABC-FLEET',
+  policyNumber: 'AUTO-2024-FLEET-007',
+  carrier: 'Qualitas',
+  lob: 'Auto',
+  type: 'Auto collision — fleet vehicle',
+  carrierStatus: 'documentation_pending',
+  workflowStatus: 'waiting_insured_docs',
+  priority: 'high',
+  dateFiled: '2026-04-03',
+  daysOpen: 5,
+  handler: 'Marco V.',
+  reservedAmount: 14_200,
+  paidAmount: 0,
+
+  parties: [
+    { id: 'p1', role: 'insured', name: 'Fernando Solano', initials: 'FS', email: 'fsolano@empresaabc.cr', phone: '+506 2255-8800', company: 'Empresa ABC S.A.', unreadComms: 0 },
+    { id: 'p2', role: 'adjuster', name: 'Patricia Ulate', initials: 'PU', email: 'pulate@qualitas.cr', phone: '+506 2233-4400', company: 'Qualitas', unreadComms: 1 },
+    { id: 'p3', role: 'carrier_contact', name: 'Diego Mora', initials: 'DM', email: 'dmora@qualitas.cr', phone: '+506 2233-4401', company: 'Qualitas', unreadComms: 0 },
+    { id: 'p4', role: 'handler', name: 'Marco Vargas', initials: 'MV', email: 'marco.v@seguros.cr', phone: '+506 8866-4400', unreadComms: 0 },
+  ],
+
+  tasks: [
+    { id: 't1', title: 'Obtain police report from insured', status: 'overdue', assignee: 'Marco V.', dueDate: '2026-04-06', slaPercent: 120, type: 'document' },
+    { id: 't2', title: 'Submit repair estimates to carrier', status: 'open', assignee: 'Marco V.', dueDate: '2026-04-10', slaPercent: 50, type: 'document' },
+    { id: 't3', title: 'Confirm driver was authorized fleet operator', status: 'open', assignee: 'Marco V.', dueDate: '2026-04-09', slaPercent: 65, type: 'general' },
+    { id: 't4', title: 'Send client status update — 5 days no communication', status: 'open', assignee: 'Marco V.', dueDate: '2026-04-08', slaPercent: 92, type: 'communication', isSystemSuggested: true },
+    { id: 't5', title: 'Request adjuster photos from body shop', status: 'done', assignee: 'Marco V.', dueDate: '2026-04-05', slaPercent: 100, type: 'general' },
+  ],
+
+  communications: [
+    { id: 'c1', type: 'system', partyId: 'p4', from: 'System', body: 'Claim CLM-0047 created. FNOL submitted to Qualitas.', timestamp: '2026-04-03T08:30:00' },
+    { id: 'c2', type: 'email', partyId: 'p1', from: 'Fernando Solano', to: 'Marco Vargas', subject: 'Fleet Vehicle Accident — Unit 07', body: 'Marco, one of our delivery trucks (Unit 07, plates SJO-7744) was involved in a collision yesterday on Ruta 27 near Escazú. The driver (José Mora) is fine but the front end is heavily damaged. The vehicle was towed to Taller Central in La Uruca. Police were called and a report was filed.', timestamp: '2026-04-03T09:00:00', threadId: 'th1' },
+    { id: 'c3', type: 'email', partyId: 'p4', from: 'Marco Vargas', to: 'Diego Mora', subject: 'FNOL — Empresa ABC Fleet Collision CLM-0047', body: 'Diego, submitting FNOL for fleet collision. Policy AUTO-2024-FLEET-007, Unit 07 (SJO-7744). Collision on Ruta 27, 2 April. Vehicle at Taller Central, La Uruca. Police report filed. Requesting adjuster assignment.', timestamp: '2026-04-03T10:15:00', threadId: 'th2' },
+    { id: 'c4', type: 'email', partyId: 'p3', from: 'Diego Mora', to: 'Marco Vargas', subject: 'RE: FNOL — Empresa ABC Fleet Collision', body: 'Marco, claim received under Qualitas ref QAC-2026-1182. Adjuster Patricia Ulate will handle. She will coordinate directly with the body shop for inspection. Please provide the police report and driver authorization docs at your earliest convenience.', timestamp: '2026-04-04T08:00:00', threadId: 'th2', aiDigest: 'Qualitas acknowledged as QAC-2026-1182. Adjuster Patricia Ulate assigned. Requesting police report and driver authorization docs.' },
+    { id: 'c5', type: 'call', partyId: 'p2', from: 'Marco Vargas', body: 'Called Patricia Ulate. She confirmed she will visit Taller Central on Monday for inspection. Needs police report before she can proceed with estimate. Estimated repair range $12K–$16K based on initial description.', timestamp: '2026-04-04T14:30:00' },
+    { id: 'c6', type: 'system', partyId: 'p4', from: 'System', body: 'Carrier status updated: Acknowledged → Documentation Pending', timestamp: '2026-04-05T09:00:00' },
+    { id: 'c7', type: 'note', partyId: 'p4', from: 'Marco Vargas', body: 'Insured has not yet sent police report. Called Fernando twice, went to voicemail. Will try again tomorrow. Fleet policy requires authorized driver confirmation — need to get signed driver roster from HR department.', timestamp: '2026-04-06T16:00:00' },
+    { id: 'c8', type: 'email', partyId: 'p2', from: 'Patricia Ulate', to: 'Marco Vargas', subject: 'Body Shop Photos — Unit 07', body: 'Marco, I visited Taller Central this morning. Photos attached. Front bumper, hood, radiator, and right fender all need replacement. Frame appears straight — no structural damage. Preliminary estimate pending receipt of police report to confirm fault assignment.', timestamp: '2026-04-07T11:00:00', threadId: 'th3', aiDigest: 'Adjuster inspected vehicle. Damage: bumper, hood, radiator, right fender. No structural damage. Estimate pending police report for fault assignment.' },
+  ],
+
+  documents: [
+    { id: 'd1', name: 'FNOL-CLM0047.pdf', category: 'fnol', uploadedBy: 'Marco V.', uploadedAt: '2026-04-03', size: '198 KB', required: true, received: true },
+    { id: 'd2', name: 'Fleet-Policy-Declarations.pdf', category: 'fnol', uploadedBy: 'Marco V.', uploadedAt: '2026-04-03', size: '890 KB', required: true, received: true },
+    { id: 'd3', name: 'Accident-Scene-Photos.zip', category: 'evidence', uploadedBy: 'Fernando Solano', uploadedAt: '2026-04-03', size: '12.6 MB', required: true, received: true },
+    { id: 'd4', name: 'Body-Shop-Inspection-Photos.zip', category: 'evidence', uploadedBy: 'Patricia Ulate', uploadedAt: '2026-04-07', size: '8.9 MB', required: false, received: true },
+    { id: 'd5', name: 'Police-Report.pdf', category: 'fnol', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+    { id: 'd6', name: 'Driver-Authorization-Roster.pdf', category: 'fnol', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+    { id: 'd7', name: 'Repair-Estimate-TallerCentral.pdf', category: 'estimates', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+  ],
+
+  financials: [
+    { id: 'f1', type: 'reserve_change', date: '2026-04-03', amount: 14_200, description: 'Initial reserve set', annotation: 'Based on typical fleet collision range' },
+    { id: 'f2', type: 'expense', date: '2026-04-03', amount: 85, description: 'Towing — Ruta 27 to Taller Central' },
+  ],
+
+  aiRecap: 'Colisión de vehículo de flota (Unidad 07, SJO-7744) de Empresa ABC en Ruta 27 cerca de Escazú el 2 de abril. El conductor José Mora no resultó herido. El vehículo fue remolcado a Taller Central en La Uruca.\n\nQualitas acusó recibo (ref QAC-2026-1182) y asignó a la ajustadora Patricia Ulate. Ella inspeccionó el vehículo el 7 de abril — daños en bumper, capó, radiador y guardafango derecho. Sin daño estructural. Estimación pendiente del reporte policial para determinar culpa.\n\nBloqueadores: el asegurado no ha proporcionado el reporte policial (vencido) ni la documentación de autorización del conductor. Se han hecho múltiples intentos de contacto sin respuesta.',
+  aiRecapSourceCount: 9,
+
+  keyDates: [
+    { label: 'FNOL Filed', date: '2026-04-03', done: true },
+    { label: 'Carrier Acknowledged', date: '2026-04-04', done: true },
+    { label: 'Adjuster Assigned', date: '2026-04-04', done: true },
+    { label: 'Vehicle Inspection', date: '2026-04-07', done: true },
+    { label: 'Police Report Due', date: '2026-04-06', done: false },
+    { label: 'Repair Estimate', date: '', done: false },
+    { label: 'Settlement', date: '', done: false },
+  ],
+
+  reserveHistory: [
+    { date: '2026-04-03', amount: 14_200, annotation: 'Initial reserve — typical fleet collision' },
+  ],
+  intakeToken: 'tk_abc_047_b7e2',
+  intakeStatus: 'in_progress',
+  intakeSentAt: '2026-04-04T11:00:00Z',
+  intakeCompletedAt: null,
+  generatedForms: [],
+}
+
+const clm0043: ClaimDetail = {
+  id: 'CLM-0043',
+  customerId: 'corp-supermercado-tico',
+  customerName: 'Supermercado Tico S.A.',
+  policyId: 'POL-2023-ST-GL',
+  policyNumber: 'GL-2023-ST-001',
+  carrier: 'INS',
+  lob: 'General Risk',
+  type: 'Liability — customer injury in store',
+  carrierStatus: 'negotiation',
+  workflowStatus: 'client_update_overdue',
+  priority: 'high',
+  dateFiled: '2026-03-17',
+  daysOpen: 22,
+  handler: 'Ana R.',
+  reservedAmount: 45_000,
+  paidAmount: 0,
+
+  parties: [
+    { id: 'p1', role: 'insured', name: 'Jorge Calvo', initials: 'JC', email: 'jcalvo@supertico.cr', phone: '+506 2244-9900', company: 'Supermercado Tico S.A.', unreadComms: 3 },
+    { id: 'p2', role: 'adjuster', name: 'Sandra Pérez', initials: 'SP', email: 'sperez@ins.go.cr', phone: '+506 2287-6600', company: 'INS', unreadComms: 0 },
+    { id: 'p3', role: 'carrier_contact', name: 'Miguel Hernández', initials: 'MH', email: 'mhernandez@ins.go.cr', phone: '+506 2287-6601', company: 'INS', unreadComms: 0 },
+    { id: 'p4', role: 'handler', name: 'Ana Ramírez', initials: 'AR', email: 'ana.r@seguros.cr', phone: '+506 8855-3300', unreadComms: 0 },
+    { id: 'p5', role: 'attorney', name: 'Lic. Gabriela Rojas', initials: 'GR', email: 'grojas@bufeterojas.cr', phone: '+506 2255-1100', company: 'Bufete Rojas & Asociados', unreadComms: 1 },
+  ],
+
+  tasks: [
+    { id: 't1', title: 'Send client status update — 8 days overdue', status: 'overdue', assignee: 'Ana R.', dueDate: '2026-03-31', slaPercent: 140, type: 'communication' },
+    { id: 't2', title: 'Review settlement offer from INS — $38K proposed', status: 'open', assignee: 'Ana R.', dueDate: '2026-04-10', slaPercent: 55, type: 'general' },
+    { id: 't3', title: 'Coordinate with attorney on counter-offer strategy', status: 'in_progress', assignee: 'Ana R.', dueDate: '2026-04-09', slaPercent: 70, type: 'communication' },
+    { id: 't4', title: 'Upload updated medical records from claimant', status: 'open', assignee: 'Ana R.', dueDate: '2026-04-11', slaPercent: 40, type: 'document' },
+    { id: 't5', title: 'Client update overdue — escalate?', status: 'open', assignee: 'Ana R.', dueDate: '2026-04-08', slaPercent: 100, type: 'escalation', isSystemSuggested: true },
+    { id: 't6', title: 'File FNOL with carrier', status: 'done', assignee: 'Ana R.', dueDate: '2026-03-17', slaPercent: 100, type: 'general' },
+    { id: 't7', title: 'Obtain incident report from store manager', status: 'done', assignee: 'Ana R.', dueDate: '2026-03-19', slaPercent: 100, type: 'document' },
+    { id: 't8', title: 'Upload CCTV footage', status: 'done', assignee: 'Ana R.', dueDate: '2026-03-22', slaPercent: 100, type: 'document' },
+  ],
+
+  communications: [
+    { id: 'c1', type: 'system', partyId: 'p4', from: 'System', body: 'Claim CLM-0043 created. FNOL submitted to INS.', timestamp: '2026-03-17T10:00:00' },
+    { id: 'c2', type: 'email', partyId: 'p1', from: 'Jorge Calvo', to: 'Ana Ramírez', subject: 'Customer Slip and Fall — Produce Section', body: 'Ana, we had an incident on March 16. A customer (Marta Solís) slipped on a wet floor in the produce section and sustained a hip injury. She was taken to Hospital CIMA by ambulance. She has retained an attorney. We have CCTV footage and the incident report from our store manager.', timestamp: '2026-03-17T10:30:00', threadId: 'th1' },
+    { id: 'c3', type: 'email', partyId: 'p4', from: 'Ana Ramírez', to: 'Miguel Hernández', subject: 'FNOL — Supermercado Tico Liability Claim CLM-0043', body: 'Miguel, submitting FNOL for a general liability claim. Customer slip and fall injury in the produce section. Incident March 16. Claimant retained attorney. We have CCTV footage and incident report. Policy GL-2023-ST-001 with $1M per-occurrence limit.', timestamp: '2026-03-17T11:30:00', threadId: 'th2' },
+    { id: 'c4', type: 'email', partyId: 'p3', from: 'Miguel Hernández', to: 'Ana Ramírez', subject: 'RE: FNOL — Supermercado Tico Liability', body: 'Ana, claim acknowledged under INS ref LB-2026-0388. Sandra Pérez assigned as adjuster. Please forward CCTV footage and incident report. Given attorney involvement, we are fast-tracking investigation.', timestamp: '2026-03-18T09:00:00', threadId: 'th2', aiDigest: 'INS acknowledged claim as LB-2026-0388. Adjuster Sandra Pérez assigned. Fast-tracking due to attorney involvement. Requesting CCTV and incident report.' },
+    { id: 'c5', type: 'call', partyId: 'p5', from: 'Lic. Gabriela Rojas', body: 'Incoming call from claimant\'s attorney. Informed that Marta Solís underwent hip surgery. Medical expenses to date approximately $28K. Attorney indicated client is seeking $50K total including pain and suffering. Requested we expedite the claim process.', timestamp: '2026-03-20T14:00:00' },
+    { id: 'c6', type: 'note', partyId: 'p4', from: 'Ana Ramírez', body: 'Attorney demanding $50K. Medical expenses $28K. Need to review CCTV carefully — if the wet floor sign was properly placed, liability may be disputed. Sent CCTV to INS adjuster for review.', timestamp: '2026-03-20T15:30:00' },
+    { id: 'c7', type: 'system', partyId: 'p4', from: 'System', body: 'Carrier status updated: Investigation → Reserved. Reserve set at $45,000.', timestamp: '2026-03-25T09:00:00' },
+    { id: 'c8', type: 'email', partyId: 'p2', from: 'Sandra Pérez', to: 'Ana Ramírez', subject: 'Investigation Update — CLM-0043', body: 'Ana, we reviewed the CCTV footage. The wet floor sign was visible but positioned slightly away from the actual wet area. This creates partial liability exposure. We are setting reserve at $45K. Our recommendation is to negotiate settlement in the $35K–$40K range to avoid litigation costs.', timestamp: '2026-03-25T10:00:00', threadId: 'th4', aiDigest: 'INS reviewed CCTV. Wet floor sign was present but mispositioned — partial liability. Reserve set $45K. Recommends settling $35K–$40K to avoid litigation costs.' },
+    { id: 'c9', type: 'email', partyId: 'p4', from: 'Ana Ramírez', to: 'Jorge Calvo', subject: 'Claim Update — Liability Assessment', body: 'Jorge, INS has completed their initial investigation. The CCTV review indicates the wet floor sign, while present, was not optimally positioned. This creates some liability exposure. INS is recommending a negotiated settlement. I will discuss strategy with you once we have a formal offer from the carrier. Please call me at your convenience to discuss.', timestamp: '2026-03-25T14:00:00', threadId: 'th5' },
+    { id: 'c10', type: 'email', partyId: 'p3', from: 'Miguel Hernández', to: 'Ana Ramírez', subject: 'Settlement Offer — CLM-0043', body: 'Ana, INS is prepared to offer $38,000 to settle this claim. This includes medical expenses ($28K) plus $10K for pain and suffering. Please communicate this to the insured and the claimant\'s attorney. We believe this is a fair offer given the shared liability circumstances.', timestamp: '2026-04-01T09:00:00', threadId: 'th6', aiDigest: 'INS offering $38K settlement ($28K medical + $10K pain/suffering). Considers shared liability. Awaiting broker/attorney response.' },
+    { id: 'c11', type: 'system', partyId: 'p4', from: 'System', body: 'Carrier status updated: Reserved → Negotiation', timestamp: '2026-04-01T09:05:00' },
+    { id: 'c12', type: 'call', partyId: 'p5', from: 'Ana Ramírez', body: 'Called attorney Gabriela Rojas to discuss $38K offer. Attorney says client won\'t accept less than $45K. Agreed to prepare counter-proposal for $42K based on additional medical documentation showing ongoing rehabilitation needs.', timestamp: '2026-04-02T11:00:00' },
+  ],
+
+  documents: [
+    { id: 'd1', name: 'FNOL-CLM0043.pdf', category: 'fnol', uploadedBy: 'Ana R.', uploadedAt: '2026-03-17', size: '212 KB', required: true, received: true },
+    { id: 'd2', name: 'GL-Policy-Declarations.pdf', category: 'fnol', uploadedBy: 'Ana R.', uploadedAt: '2026-03-17', size: '1.1 MB', required: true, received: true },
+    { id: 'd3', name: 'Incident-Report-StoreManager.pdf', category: 'evidence', uploadedBy: 'Jorge Calvo', uploadedAt: '2026-03-18', size: '340 KB', required: true, received: true },
+    { id: 'd4', name: 'CCTV-Footage-ProduceSection.mp4', category: 'evidence', uploadedBy: 'Jorge Calvo', uploadedAt: '2026-03-19', size: '245 MB', required: true, received: true },
+    { id: 'd5', name: 'Medical-Records-MartaSolis.pdf', category: 'evidence', uploadedBy: 'Lic. Gabriela Rojas', uploadedAt: '2026-03-21', size: '4.2 MB', required: true, received: true },
+    { id: 'd6', name: 'INS-Investigation-Report.pdf', category: 'correspondence', uploadedBy: 'Sandra Pérez', uploadedAt: '2026-03-25', size: '890 KB', required: false, received: true },
+    { id: 'd7', name: 'Settlement-Offer-38K.pdf', category: 'settlement', uploadedBy: 'Ana R.', uploadedAt: '2026-04-01', size: '156 KB', required: false, received: true },
+    { id: 'd8', name: 'Updated-Medical-Records.pdf', category: 'evidence', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+    { id: 'd9', name: 'Counter-Offer-Response.pdf', category: 'settlement', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+    { id: 'd10', name: 'Signed-Release-Form.pdf', category: 'settlement', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+  ],
+
+  financials: [
+    { id: 'f1', type: 'reserve_change', date: '2026-03-17', amount: 30_000, description: 'Initial reserve set', annotation: 'Preliminary — slip and fall with attorney involvement' },
+    { id: 'f2', type: 'reserve_change', date: '2026-03-25', amount: 45_000, description: 'Reserve increased', annotation: 'CCTV review shows partial liability — increased from $30K' },
+    { id: 'f3', type: 'expense', date: '2026-03-18', amount: 200, description: 'Incident scene documentation' },
+    { id: 'f4', type: 'expense', date: '2026-03-25', amount: 750, description: 'Legal consultation — liability assessment' },
+  ],
+
+  aiRecap: 'Reclamo de responsabilidad civil por caída de cliente (Marta Solís) en la sección de productos del Supermercado Tico el 16 de marzo. La clienta sufrió una lesión de cadera que requirió cirugía. Ha contratado abogada (Lic. Gabriela Rojas).\n\nINS completó la investigación el 25 de marzo. La revisión del CCTV muestra que el letrero de piso mojado estaba presente pero mal posicionado — esto crea responsabilidad parcial. La reserva se incrementó de $30K a $45K.\n\nINS ofreció $38K para liquidar ($28K gastos médicos + $10K dolor y sufrimiento). La abogada de la reclamante rechazó — exige mínimo $45K. Se está preparando contraoferta de $42K basada en documentación médica adicional que muestra necesidades de rehabilitación continua.\n\nACCIÓN REQUERIDA: Actualización al cliente pendiente hace 8 días. El asegurado (Jorge Calvo) no ha sido informado del estado de la negociación.',
+  aiRecapSourceCount: 18,
+
+  keyDates: [
+    { label: 'Incident Date', date: '2026-03-16', done: true },
+    { label: 'FNOL Filed', date: '2026-03-17', done: true },
+    { label: 'Carrier Acknowledged', date: '2026-03-18', done: true },
+    { label: 'Investigation Complete', date: '2026-03-25', done: true },
+    { label: 'Reserve Set ($45K)', date: '2026-03-25', done: true },
+    { label: 'Settlement Offered ($38K)', date: '2026-04-01', done: true },
+    { label: 'Counter-Offer Deadline', date: '2026-04-10', done: false },
+    { label: 'Settlement or Litigation', date: '', done: false },
+  ],
+
+  reserveHistory: [
+    { date: '2026-03-17', amount: 30_000, annotation: 'Initial reserve — slip and fall with legal representation' },
+    { date: '2026-03-25', amount: 45_000, annotation: 'Increased after CCTV review — partial liability exposure confirmed' },
+  ],
+  intakeToken: 'tk_st_043_c9d4',
+  intakeStatus: 'completed',
+  intakeSentAt: '2026-03-17T16:00:00Z',
+  intakeCompletedAt: '2026-03-18T08:45:00Z',
+  generatedForms: [
+    { id: 'gf-043-1', carrierFormName: 'Aviso de Pérdida — Mapfre', carrier: 'Mapfre', lob: 'General Risk', status: 'submitted', generatedAt: '2026-03-18T10:00:00Z', signedAt: '2026-03-19T14:30:00Z' },
+  ],
+}
+
+const clm0045: ClaimDetail = {
+  id: 'CLM-0045',
+  customerId: 'corp-clinica-sanjose',
+  customerName: 'Clínica San José',
+  policyId: 'POL-2024-CSJ-LIFE',
+  policyNumber: 'LIFE-2024-CSJ-001',
+  carrier: 'Pan-American Life',
+  lob: 'Life',
+  type: 'Surgery pre-authorization',
+  carrierStatus: 'reserved',
+  workflowStatus: 'waiting_carrier',
+  priority: 'high',
+  dateFiled: '2026-03-27',
+  daysOpen: 12,
+  handler: 'Ana R.',
+  reservedAmount: 23_500,
+  paidAmount: 0,
+
+  parties: [
+    { id: 'p1', role: 'insured', name: 'Dr. Ricardo Blanco', initials: 'RB', email: 'rblanco@clinicasj.cr', phone: '+506 2290-1500', company: 'Clínica San José', unreadComms: 0 },
+    { id: 'p2', role: 'carrier_contact', name: 'Elena Cordero', initials: 'EC', email: 'ecordero@palig.com', phone: '+506 2201-3300', company: 'Pan-American Life', unreadComms: 0 },
+    { id: 'p3', role: 'handler', name: 'Ana Ramírez', initials: 'AR', email: 'ana.r@seguros.cr', phone: '+506 8855-3300', unreadComms: 0 },
+  ],
+
+  tasks: [
+    { id: 't1', title: 'Follow up on pre-authorization decision — 5 days pending', status: 'open', assignee: 'Ana R.', dueDate: '2026-04-09', slaPercent: 78, type: 'communication' },
+    { id: 't2', title: 'Confirm surgical facility is in-network', status: 'done', assignee: 'Ana R.', dueDate: '2026-03-29', slaPercent: 100, type: 'general' },
+    { id: 't3', title: 'Upload specialist referral letter', status: 'done', assignee: 'Ana R.', dueDate: '2026-03-30', slaPercent: 100, type: 'document' },
+  ],
+
+  communications: [
+    { id: 'c1', type: 'system', partyId: 'p3', from: 'System', body: 'Claim CLM-0045 created. Pre-authorization request submitted to Pan-American Life.', timestamp: '2026-03-27T09:00:00' },
+    { id: 'c2', type: 'email', partyId: 'p1', from: 'Dr. Ricardo Blanco', to: 'Ana Ramírez', subject: 'Surgery Pre-Auth Request — Group Policy', body: 'Ana, we need pre-authorization for knee replacement surgery for one of our covered employees (María del Carmen Vega, DOB 15/07/1968). The procedure is scheduled for April 15 at Hospital Metropolitano. Attached are the specialist referral, diagnostic imaging, and treatment plan.', timestamp: '2026-03-27T09:30:00', threadId: 'th1' },
+    { id: 'c3', type: 'email', partyId: 'p3', from: 'Ana Ramírez', to: 'Elena Cordero', subject: 'Pre-Auth Request — Clínica San José Group CLM-0045', body: 'Elena, submitting pre-authorization for knee replacement surgery under group policy LIFE-2024-CSJ-001. Patient María del Carmen Vega. Surgery scheduled April 15 at Hospital Metropolitano (in-network confirmed). All supporting documentation attached.', timestamp: '2026-03-27T11:00:00', threadId: 'th2' },
+    { id: 'c4', type: 'email', partyId: 'p2', from: 'Elena Cordero', to: 'Ana Ramírez', subject: 'RE: Pre-Auth Request — Clínica San José Group', body: 'Ana, request received and under medical review. Reference PA-2026-0455. Standard review period is 5-7 business days. We may request additional documentation if needed.', timestamp: '2026-03-28T10:00:00', threadId: 'th2', aiDigest: 'Pan-American Life acknowledged pre-auth request as PA-2026-0455. Under medical review. 5-7 business day standard review period.' },
+    { id: 'c5', type: 'call', partyId: 'p1', from: 'Ana Ramírez', body: 'Called Dr. Blanco to confirm submission. Advised that standard review is 5-7 business days. He is concerned about timing — surgery scheduled April 15 and patient has been waiting 3 months. Will escalate if no response by April 4.', timestamp: '2026-03-28T14:00:00' },
+    { id: 'c6', type: 'system', partyId: 'p3', from: 'System', body: 'Carrier status updated: Documentation Pending → Reserved. Reserve set at $23,500.', timestamp: '2026-04-02T09:00:00' },
+    { id: 'c7', type: 'note', partyId: 'p3', from: 'Ana Ramírez', body: 'Reserve set at $23,500 — this is the estimated surgery cost. No decision yet on pre-authorization. 5 business days have passed. Will follow up with Elena tomorrow if no response.', timestamp: '2026-04-03T16:00:00' },
+  ],
+
+  documents: [
+    { id: 'd1', name: 'PreAuth-Request-CLM0045.pdf', category: 'fnol', uploadedBy: 'Ana R.', uploadedAt: '2026-03-27', size: '178 KB', required: true, received: true },
+    { id: 'd2', name: 'Specialist-Referral-Letter.pdf', category: 'fnol', uploadedBy: 'Dr. Ricardo Blanco', uploadedAt: '2026-03-27', size: '95 KB', required: true, received: true },
+    { id: 'd3', name: 'Diagnostic-Imaging-KneeMRI.pdf', category: 'evidence', uploadedBy: 'Dr. Ricardo Blanco', uploadedAt: '2026-03-27', size: '15.2 MB', required: true, received: true },
+    { id: 'd4', name: 'Treatment-Plan.pdf', category: 'evidence', uploadedBy: 'Dr. Ricardo Blanco', uploadedAt: '2026-03-27', size: '240 KB', required: true, received: true },
+    { id: 'd5', name: 'PALIG-Acknowledgment.pdf', category: 'correspondence', uploadedBy: 'Ana R.', uploadedAt: '2026-03-28', size: '112 KB', required: false, received: true },
+    { id: 'd6', name: 'PreAuth-Decision-Letter.pdf', category: 'correspondence', uploadedBy: '', uploadedAt: '', size: '', required: true, received: false },
+  ],
+
+  financials: [
+    { id: 'f1', type: 'reserve_change', date: '2026-04-02', amount: 23_500, description: 'Reserve set — estimated surgery cost', annotation: 'Knee replacement at Hospital Metropolitano' },
+  ],
+
+  aiRecap: 'Solicitud de preautorización para cirugía de reemplazo de rodilla para empleada María del Carmen Vega bajo la póliza grupal de Clínica San José. Cirugía programada para el 15 de abril en Hospital Metropolitano (red confirmada).\n\nPan-American Life acusó recibo el 28 de marzo (ref PA-2026-0455). Período de revisión estándar 5-7 días hábiles. La reserva se estableció en $23,500 el 2 de abril.\n\nHan pasado 7 días hábiles sin decisión. El Dr. Blanco está preocupado por el cronograma — la paciente ha esperado 3 meses. Se necesita seguimiento urgente con la aseguradora para obtener decisión antes de la fecha de cirugía.',
+  aiRecapSourceCount: 8,
+
+  keyDates: [
+    { label: 'Pre-Auth Submitted', date: '2026-03-27', done: true },
+    { label: 'Carrier Acknowledged', date: '2026-03-28', done: true },
+    { label: 'Review Period Ends', date: '2026-04-07', done: false },
+    { label: 'Decision Expected', date: '2026-04-09', done: false },
+    { label: 'Surgery Scheduled', date: '2026-04-15', done: false },
+  ],
+
+  reserveHistory: [
+    { date: '2026-04-02', amount: 23_500, annotation: 'Reserve set — estimated surgery cost at Hospital Metropolitano' },
+  ],
+  intakeToken: null,
+  intakeStatus: 'not_sent',
+  intakeSentAt: null,
+  intakeCompletedAt: null,
+  generatedForms: [],
+}
+
+// ── Export ───────────────────────────────────────────────────────────────────
+
+export const MOCK_CLAIM_DETAILS: Record<string, ClaimDetail> = {
+  'CLM-0048': clm0048,
+  'CLM-0047': clm0047,
+  'CLM-0043': clm0043,
+  'CLM-0045': clm0045,
+}
diff --git a/app/data/mock-customers.ts b/app/data/mock-customers.ts
new file mode 100644
index 0000000..c422a4a
--- /dev/null
+++ b/app/data/mock-customers.ts
@@ -0,0 +1,461 @@
+/**
+ * Mock customer data for visual design & demo.
+ * Each client has realistic policies, claims, payments, and activity.
+ */
+
+export type MockPolicy = {
+  id: string
+  line: string
+  carrier: string
+  product: string
+  premium: number
+  status: 'Active' | 'Pending' | 'Lapsed' | 'Cancelled'
+  renewal: string
+  icon: string
+  details?: string
+  referralChannel?: string
+}
+
+export type MockClaim = {
+  id: string
+  policy: string
+  type: string
+  date: string
+  amount: number
+  status: 'In progress' | 'Resolved' | 'Denied' | 'Under review'
+}
+
+export type MockPayment = {
+  date: string
+  amount: number
+  policy: string
+  method: string
+  status: 'Paid' | 'Pending' | 'Overdue' | 'Failed'
+}
+
+export type MockActivityEvent = {
+  date: string
+  text: string
+  type: 'claim' | 'payment' | 'renewal' | 'quote' | 'note' | 'policy' | 'onboarding'
+}
+
+/**
+ * Customer tier — derived from data completeness & policy status:
+ *   quick_lead  — minimal capture (name + phone/email only)
+ *   lead        — profile info but no policies yet
+ *   customer    — has at least one active policy
+ *   cancelled   — had policies but all cancelled / lapsed
+ */
+export type CustomerTier = 'quick_lead' | 'lead' | 'customer' | 'cancelled'
+
+export type MockCustomer = {
+  id: string
+  name: string
+  initials: string
+  type: 'Individual' | 'Corporate'
+  documentId: string
+  email: string
+  phone: string
+  birthDate: string
+  gender: string
+  address: string
+  since: string
+  agent: string
+  preferredLang: string
+  tags: string[]
+  policies: MockPolicy[]
+  claims: MockClaim[]
+  payments: MockPayment[]
+  activity: MockActivityEvent[]
+  paymentStatus: 'Current' | 'Overdue' | 'Grace period' | 'N/A'
+}
+
+/** Derive tier from customer data */
+export function customerTier(c: MockCustomer): CustomerTier {
+  if (c.policies.length === 0 && (!c.documentId || c.documentId === '—') && !c.address) return 'quick_lead'
+  if (c.policies.length === 0) return 'lead'
+  const hasActive = c.policies.some(p => p.status === 'Active' || p.status === 'Pending')
+  if (!hasActive) return 'cancelled'
+  return 'customer'
+}
+
+/* ────────────────────────────────────────────── */
+/*  1 · María Elena Pérez Solano                  */
+/* ────────────────────────────────────────────── */
+const maria: MockCustomer = {
+  id: 'cust-001',
+  name: 'María Elena Pérez Solano',
+  initials: 'MP',
+  type: 'Individual',
+  documentId: '1-0456-0812',
+  email: 'maria.perez@email.com',
+  phone: '+506 8834-2291',
+  birthDate: '1988-03-14',
+  gender: 'Female',
+  address: 'San José, Escazú, Trejos Montealegre',
+  since: '2021-06-10',
+  agent: 'Ana R.',
+  preferredLang: 'Spanish',
+  tags: ['VIP', 'Referral source'],
+  paymentStatus: 'Current',
+  policies: [
+    { id: 'POL-2024-4412', line: 'Auto', carrier: 'ASSA', product: '2023 Toyota RAV4 — SJO-4412', premium: 1840, status: 'Active', renewal: '2025-06-15', icon: 'i-heroicons-truck', details: 'Comprehensive • $500 deductible', referralChannel: 'Direct walk-in' },
+    { id: 'POL-2024-7788', line: 'Life', carrier: 'INS', product: 'Individual health plan', premium: 3200, status: 'Active', renewal: '2025-09-01', icon: 'i-heroicons-heart', details: 'Gold tier • Dental included', referralChannel: 'Direct walk-in' },
+    { id: 'POL-2023-1190', line: 'Life', carrier: 'Mapfre', product: 'Term life — 20yr, $250K', premium: 960, status: 'Active', renewal: '2026-01-10', icon: 'i-heroicons-shield-check', details: 'Beneficiary: Carlos Pérez (spouse)', referralChannel: 'Cross-sell' },
+  ],
+  claims: [
+    { id: 'CL-2891', policy: 'POL-2024-4412', type: 'Collision', date: '2025-02-18', amount: 4200, status: 'In progress' },
+    { id: 'CL-2204', policy: 'POL-2024-7788', type: 'Medical reimbursement', date: '2024-08-05', amount: 1100, status: 'Resolved' },
+  ],
+  payments: [
+    { date: '2025-04-01', amount: 540, policy: 'POL-2024-4412', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-04-01', amount: 267, policy: 'POL-2024-7788', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-03-01', amount: 540, policy: 'POL-2024-4412', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-03-01', amount: 267, policy: 'POL-2024-7788', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-03-01', amount: 80, policy: 'POL-2023-1190', method: 'Transfer', status: 'Paid' },
+  ],
+  activity: [
+    { date: 'Today', text: 'Auto claim CL-2891 — adjuster report uploaded', type: 'claim' },
+    { date: 'Yesterday', text: 'Health premium payment confirmed ($267)', type: 'payment' },
+    { date: 'Mar 28', text: 'Renewal notice sent for Auto policy', type: 'renewal' },
+    { date: 'Mar 15', text: 'Quote requested: Home insurance', type: 'quote' },
+    { date: 'Feb 18', text: 'Collision claim filed — CL-2891', type: 'claim' },
+  ],
+}
+
+/* ────────────────────────────────────────────── */
+/*  2 · Roberto Jiménez Mora                      */
+/* ────────────────────────────────────────────── */
+const roberto: MockCustomer = {
+  id: 'cust-002',
+  name: 'Roberto Jiménez Mora',
+  initials: 'RJ',
+  type: 'Individual',
+  documentId: '3-0321-0654',
+  email: 'roberto.jimenez@correo.cr',
+  phone: '+506 7012-8845',
+  birthDate: '1975-11-22',
+  gender: 'Male',
+  address: 'Heredia, Belén, La Asunción',
+  since: '2019-02-15',
+  agent: 'Ana R.',
+  preferredLang: 'Spanish',
+  tags: ['Long-term client'],
+  paymentStatus: 'Current',
+  policies: [
+    { id: 'POL-2023-3301', line: 'Auto', carrier: 'Qualitas', product: '2021 Hyundai Tucson — HER-9901', premium: 1520, status: 'Active', renewal: '2025-08-20', icon: 'i-heroicons-truck', details: 'Comprehensive • $750 deductible', referralChannel: 'Referral — client' },
+    { id: 'POL-2023-3302', line: 'Auto', carrier: 'Qualitas', product: '2019 Honda CRV — HER-6632', premium: 1280, status: 'Active', renewal: '2025-08-20', icon: 'i-heroicons-truck', details: 'Comprehensive • $750 deductible • Spouse vehicle', referralChannel: 'Referral — client' },
+    { id: 'POL-2022-1010', line: 'Home', carrier: 'ASSA', product: 'Homeowner — Belén residence', premium: 890, status: 'Active', renewal: '2025-11-01', icon: 'i-heroicons-home-modern', details: 'Dwelling $185K • Contents $40K • Earthquake included', referralChannel: 'Cross-sell' },
+    { id: 'POL-2024-5500', line: 'Life', carrier: 'Pan-American Life', product: 'Whole life — $150K', premium: 1440, status: 'Active', renewal: '2026-02-15', icon: 'i-heroicons-shield-check', details: 'Beneficiary: Lucía Jiménez (spouse)', referralChannel: 'Cross-sell' },
+    { id: 'POL-2024-5501', line: 'General Risk', carrier: 'INS', product: 'Personal umbrella — $1M', premium: 420, status: 'Active', renewal: '2025-12-01', icon: 'i-heroicons-shield-exclamation', details: 'Excess liability over auto + home', referralChannel: 'Cross-sell' },
+  ],
+  claims: [
+    { id: 'CL-1840', policy: 'POL-2022-1010', type: 'Water damage', date: '2024-04-12', amount: 6800, status: 'Resolved' },
+    { id: 'CL-2105', policy: 'POL-2023-3301', type: 'Windshield', date: '2024-11-28', amount: 450, status: 'Resolved' },
+  ],
+  payments: [
+    { date: '2025-04-01', amount: 233, policy: 'POL-2023-3301', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-04-01', amount: 197, policy: 'POL-2023-3302', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-04-01', amount: 74, policy: 'POL-2022-1010', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-04-01', amount: 120, policy: 'POL-2024-5500', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-03-01', amount: 233, policy: 'POL-2023-3301', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-03-01', amount: 197, policy: 'POL-2023-3302', method: 'Auto-debit', status: 'Paid' },
+  ],
+  activity: [
+    { date: 'Yesterday', text: 'Monthly premium auto-debited ($624)', type: 'payment' },
+    { date: 'Mar 30', text: 'Umbrella policy annual review scheduled', type: 'renewal' },
+    { date: 'Mar 15', text: 'Quote requested: Teen driver add-on', type: 'quote' },
+    { date: 'Feb 20', text: 'Home policy endorsement — added jewelry rider', type: 'policy' },
+    { date: 'Jan 10', text: 'Windshield claim CL-2105 resolved ($450)', type: 'claim' },
+    { date: 'Dec 15', text: 'Year-end portfolio review completed', type: 'note' },
+  ],
+}
+
+/* ────────────────────────────────────────────── */
+/*  3 · Carolina Fallas Vargas                    */
+/* ────────────────────────────────────────────── */
+const carolina: MockCustomer = {
+  id: 'cust-003',
+  name: 'Carolina Fallas Vargas',
+  initials: 'CF',
+  type: 'Individual',
+  documentId: '2-0589-0177',
+  email: 'carolina.fallas@gmail.com',
+  phone: '+506 6198-3340',
+  birthDate: '1992-07-30',
+  gender: 'Female',
+  address: 'Cartago, Paraíso, Orosí',
+  since: '2023-09-05',
+  agent: 'Marco V.',
+  preferredLang: 'Spanish',
+  tags: ['New client'],
+  paymentStatus: 'Current',
+  policies: [
+    { id: 'POL-2024-8810', line: 'Auto', carrier: 'INS', product: '2024 Kia Sportage — CAR-1177', premium: 1650, status: 'Active', renewal: '2025-09-05', icon: 'i-heroicons-truck', details: 'Comprehensive • $500 deductible', referralChannel: 'Facebook campaign' },
+    { id: 'POL-2024-8811', line: 'Home', carrier: 'ASSA', product: "Renter's insurance — Paraíso apt", premium: 320, status: 'Active', renewal: '2025-09-05', icon: 'i-heroicons-home-modern', details: 'Contents $25K • Liability $100K', referralChannel: 'Facebook campaign' },
+  ],
+  claims: [],
+  payments: [
+    { date: '2025-04-01', amount: 138, policy: 'POL-2024-8810', method: 'Credit card', status: 'Paid' },
+    { date: '2025-04-01', amount: 27, policy: 'POL-2024-8811', method: 'Credit card', status: 'Paid' },
+    { date: '2025-03-01', amount: 138, policy: 'POL-2024-8810', method: 'Credit card', status: 'Paid' },
+    { date: '2025-03-01', amount: 27, policy: 'POL-2024-8811', method: 'Credit card', status: 'Paid' },
+  ],
+  activity: [
+    { date: 'Mar 25', text: 'Monthly payment processed ($165)', type: 'payment' },
+    { date: 'Mar 10', text: 'Renter policy — updated inventory list', type: 'policy' },
+    { date: 'Feb 05', text: 'Welcome call completed by Marco V.', type: 'onboarding' },
+    { date: 'Sep 05', text: 'Policies issued — Auto + Renter', type: 'policy' },
+  ],
+}
+
+/* ────────────────────────────────────────────── */
+/*  4 · Luis Andrés Solís Calderón                */
+/* ────────────────────────────────────────────── */
+const luis: MockCustomer = {
+  id: 'cust-004',
+  name: 'Luis Andrés Solís Calderón',
+  initials: 'LS',
+  type: 'Individual',
+  documentId: '1-1102-0398',
+  email: 'luis.solis@outlook.com',
+  phone: '+506 8455-7721',
+  birthDate: '1968-01-09',
+  gender: 'Male',
+  address: 'San José, Santa Ana, Pozos',
+  since: '2017-11-20',
+  agent: 'Ana R.',
+  preferredLang: 'Spanish',
+  tags: ['High-value', 'Referral source', 'Multi-line'],
+  paymentStatus: 'Overdue',
+  policies: [
+    { id: 'POL-2022-2200', line: 'Auto', carrier: 'Qualitas', product: '2022 BMW X5 — SJO-2200', premium: 3200, status: 'Active', renewal: '2025-05-01', icon: 'i-heroicons-truck', details: 'Comprehensive • $1,000 deductible', referralChannel: 'Referral — client' },
+    { id: 'POL-2022-2201', line: 'Auto', carrier: 'Qualitas', product: '2020 Mercedes GLC — SJO-7788', premium: 2800, status: 'Active', renewal: '2025-05-01', icon: 'i-heroicons-truck', details: 'Comprehensive • $1,000 deductible • Spouse vehicle', referralChannel: 'Referral — client' },
+    { id: 'POL-2020-0055', line: 'Home', carrier: 'ASSA', product: 'Homeowner — Santa Ana residence', premium: 2100, status: 'Active', renewal: '2025-07-15', icon: 'i-heroicons-home-modern', details: 'Dwelling $420K • Contents $95K • Flood + Earthquake', referralChannel: 'Cross-sell' },
+    { id: 'POL-2021-0750', line: 'Life', carrier: 'Pan-American Life', product: 'Whole life — $500K', premium: 4800, status: 'Active', renewal: '2025-11-20', icon: 'i-heroicons-shield-check', details: 'Beneficiaries: Patricia Calderón (60%), Children (40%)', referralChannel: 'Google Ads' },
+    { id: 'POL-2023-6600', line: 'Life', carrier: 'Blue Cross', product: 'Family health — Platinum', premium: 8400, status: 'Active', renewal: '2025-10-01', icon: 'i-heroicons-heart', details: '4 members • Dental + Vision • Intl coverage', referralChannel: 'Google Ads' },
+    { id: 'POL-2023-6601', line: 'General Risk', carrier: 'INS', product: 'Personal umbrella — $2M', premium: 680, status: 'Active', renewal: '2025-12-01', icon: 'i-heroicons-shield-exclamation', details: 'Excess liability over auto + home', referralChannel: 'Cross-sell' },
+  ],
+  claims: [
+    { id: 'CL-3020', policy: 'POL-2022-2200', type: 'Collision — rear-end', date: '2025-03-08', amount: 9500, status: 'In progress' },
+    { id: 'CL-2650', policy: 'POL-2023-6600', type: 'Surgery reimbursement', date: '2024-10-15', amount: 12400, status: 'Resolved' },
+    { id: 'CL-2102', policy: 'POL-2020-0055', type: 'Storm damage — roof', date: '2024-06-22', amount: 8200, status: 'Resolved' },
+  ],
+  payments: [
+    { date: '2025-04-01', amount: 1832, policy: 'Multiple', method: 'Auto-debit', status: 'Failed' },
+    { date: '2025-03-01', amount: 1832, policy: 'Multiple', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-02-01', amount: 1832, policy: 'Multiple', method: 'Auto-debit', status: 'Paid' },
+    { date: '2025-01-01', amount: 1832, policy: 'Multiple', method: 'Auto-debit', status: 'Paid' },
+  ],
+  activity: [
+    { date: 'Today', text: 'ALERT: April payment failed — auto-debit declined', type: 'payment' },
+    { date: 'Yesterday', text: 'Collision claim CL-3020 — repair estimate received ($9,500)', type: 'claim' },
+    { date: 'Mar 20', text: 'Auto policies up for renewal May 1 — quote comparison started', type: 'renewal' },
+    { date: 'Mar 08', text: 'Collision claim filed — CL-3020 (BMW rear-end)', type: 'claim' },
+    { date: 'Feb 15', text: 'Annual portfolio review — recommended umbrella increase', type: 'note' },
+    { date: 'Jan 20', text: 'Health claim CL-2650 resolved — $12,400 reimbursed', type: 'claim' },
+  ],
+}
+
+/* ────────────────────────────────────────────── */
+/*  5 · Sofía Campos Rojas                        */
+/* ────────────────────────────────────────────── */
+const sofia: MockCustomer = {
+  id: 'cust-005',
+  name: 'Sofía Campos Rojas',
+  initials: 'SC',
+  type: 'Individual',
+  documentId: '4-0220-0561',
+  email: 'sofia.campos@icloud.com',
+  phone: '+506 7233-0098',
+  birthDate: '1995-12-03',
+  gender: 'Female',
+  address: 'Guanacaste, Liberia, Centro',
+  since: '2024-01-15',
+  agent: 'Marco V.',
+  preferredLang: 'Spanish',
+  tags: ['Young professional'],
+  paymentStatus: 'Grace period',
+  policies: [
+    { id: 'POL-2024-9901', line: 'Auto', carrier: 'INS', product: '2024 Mazda CX-30 — GUA-0098', premium: 1380, status: 'Active', renewal: '2026-01-15', icon: 'i-heroicons-truck', details: 'Comprehensive • $500 deductible', referralChannel: 'Instagram campaign' },
+    { id: 'POL-2024-9902', line: 'Life', carrier: 'Mapfre', product: 'Term life — 10yr, $100K', premium: 360, status: 'Active', renewal: '2026-01-15', icon: 'i-heroicons-shield-check', details: 'Beneficiary: Elena Rojas (mother)', referralChannel: 'Cross-sell' },
+  ],
+  claims: [
+    { id: 'CL-3101', policy: 'POL-2024-9901', type: 'Fender bender', date: '2025-03-20', amount: 1800, status: 'Under review' },
+  ],
+  payments: [
+    { date: '2025-04-01', amount: 145, policy: 'POL-2024-9901', method: 'Transfer', status: 'Pending' },
+    { date: '2025-03-01', amount: 145, policy: 'POL-2024-9901', method: 'Transfer', status: 'Paid' },
+    { date: '2025-03-01', amount: 30, policy: 'POL-2024-9902', method: 'Transfer', status: 'Paid' },
+    { date: '2025-02-01', amount: 145, policy: 'POL-2024-9901', method: 'Transfer', status: 'Paid' },
+  ],
+  activity: [
+    { date: 'Today', text: 'Grace period — April auto premium not yet received', type: 'payment' },
+    { date: 'Mar 22', text: 'Fender bender claim CL-3101 filed', type: 'claim' },
+    { date: 'Mar 01', text: 'Monthly payment received ($175)', type: 'payment' },
+    { date: 'Jan 15', text: 'Policies renewed — Auto + Life', type: 'renewal' },
+  ],
+}
+
+/* ────────────────────────────────────────────── */
+/*  6 · Quick Lead — Diego Herrera                  */
+/* ────────────────────────────────────────────── */
+const diego: MockCustomer = {
+  id: 'cust-006',
+  name: 'Diego Herrera',
+  initials: 'DH',
+  type: 'Individual',
+  documentId: '—',
+  email: 'diego.h@gmail.com',
+  phone: '+506 6100-4422',
+  birthDate: '',
+  gender: '',
+  address: '',
+  since: '2026-03-28',
+  agent: 'Marco V.',
+  preferredLang: 'Spanish',
+  tags: ['Quick lead', 'Referral'],
+  paymentStatus: 'N/A',
+  policies: [],
+  claims: [],
+  payments: [],
+  activity: [
+    { date: 'Mar 28', text: 'Quick lead captured — referred by Roberto Jiménez', type: 'onboarding' },
+  ],
+}
+
+/* ────────────────────────────────────────────── */
+/*  7 · Quick Lead — Valeria Núñez                  */
+/* ────────────────────────────────────────────── */
+const valeria: MockCustomer = {
+  id: 'cust-007',
+  name: 'Valeria Núñez',
+  initials: 'VN',
+  type: 'Individual',
+  documentId: '—',
+  email: '',
+  phone: '+506 8899-1100',
+  birthDate: '',
+  gender: '',
+  address: '',
+  since: '2026-04-01',
+  agent: 'Ana R.',
+  preferredLang: 'Spanish',
+  tags: ['Quick lead', 'Walk-in'],
+  paymentStatus: 'N/A',
+  policies: [],
+  claims: [],
+  payments: [],
+  activity: [
+    { date: 'Apr 01', text: 'Walk-in lead — interested in auto insurance', type: 'onboarding' },
+  ],
+}
+
+/* ────────────────────────────────────────────── */
+/*  8 · Lead — Andrés Mora Villalobos               */
+/* ────────────────────────────────────────────── */
+const andres: MockCustomer = {
+  id: 'cust-008',
+  name: 'Andrés Mora Villalobos',
+  initials: 'AM',
+  type: 'Individual',
+  documentId: '1-1450-0221',
+  email: 'andres.mora@empresa.cr',
+  phone: '+506 7744-5566',
+  birthDate: '1990-05-18',
+  gender: 'Male',
+  address: 'San José, Moravia, San Vicente',
+  since: '2026-03-15',
+  agent: 'Ana R.',
+  preferredLang: 'Spanish',
+  tags: ['Lead', 'Corporate referral'],
+  paymentStatus: 'N/A',
+  policies: [],
+  claims: [],
+  payments: [],
+  activity: [
+    { date: 'Mar 15', text: 'Lead created — needs auto + health quotes', type: 'onboarding' },
+    { date: 'Mar 20', text: 'Discovery call completed — family of 3', type: 'note' },
+  ],
+}
+
+/* ────────────────────────────────────────────── */
+/*  9 · Lead — Corporación Tecnológica del Valle    */
+/* ────────────────────────────────────────────── */
+const corpTech: MockCustomer = {
+  id: 'cust-009',
+  name: 'Corporación Tecnológica del Valle',
+  initials: 'CT',
+  type: 'Corporate',
+  documentId: '3-101-789456',
+  email: 'rrhh@corptech.cr',
+  phone: '+506 2234-8800',
+  birthDate: '',
+  gender: '',
+  address: 'Heredia, Heredia, Zona Franca',
+  since: '2026-02-10',
+  agent: 'Marco V.',
+  preferredLang: 'Spanish',
+  tags: ['Lead', 'Corporate', 'Group health prospect'],
+  paymentStatus: 'N/A',
+  policies: [],
+  claims: [],
+  payments: [],
+  activity: [
+    { date: 'Feb 10', text: 'Corporate lead — 45 employees, group health RFP', type: 'onboarding' },
+    { date: 'Mar 05', text: 'Census received — quoting in progress', type: 'quote' },
+  ],
+}
+
+/* ────────────────────────────────────────────── */
+/*  10 · Cancelled — Fernando Arias Blanco          */
+/* ────────────────────────────────────────────── */
+const fernando: MockCustomer = {
+  id: 'cust-010',
+  name: 'Fernando Arias Blanco',
+  initials: 'FA',
+  type: 'Individual',
+  documentId: '1-0892-0344',
+  email: 'fernando.arias@hotmail.com',
+  phone: '+506 8322-0017',
+  birthDate: '1982-09-14',
+  gender: 'Male',
+  address: 'Alajuela, San Carlos, Ciudad Quesada',
+  since: '2020-04-01',
+  agent: 'Ana R.',
+  preferredLang: 'Spanish',
+  tags: ['Cancelled', 'Win-back opportunity'],
+  paymentStatus: 'N/A',
+  policies: [
+    { id: 'POL-2020-1100', line: 'Auto', carrier: 'INS', product: '2018 Toyota Hilux — ALJ-4400', premium: 1200, status: 'Cancelled', renewal: '2024-04-01', icon: 'i-heroicons-truck', details: 'Cancelled — non-payment', referralChannel: 'Direct walk-in' },
+    { id: 'POL-2021-2200', line: 'Home', carrier: 'ASSA', product: 'Homeowner — Ciudad Quesada', premium: 650, status: 'Lapsed', renewal: '2024-06-15', icon: 'i-heroicons-home-modern', details: 'Lapsed — did not renew', referralChannel: 'Direct walk-in' },
+  ],
+  claims: [
+    { id: 'CL-1200', policy: 'POL-2020-1100', type: 'Theft attempt', date: '2023-08-10', amount: 3200, status: 'Resolved' },
+  ],
+  payments: [
+    { date: '2024-01-01', amount: 154, policy: 'POL-2020-1100', method: 'Transfer', status: 'Paid' },
+    { date: '2024-02-01', amount: 154, policy: 'POL-2020-1100', method: 'Transfer', status: 'Overdue' },
+    { date: '2024-03-01', amount: 154, policy: 'POL-2020-1100', method: 'Transfer', status: 'Overdue' },
+  ],
+  activity: [
+    { date: 'Apr 01', text: 'Auto policy cancelled — 3 months unpaid', type: 'policy' },
+    { date: 'Jun 15', text: 'Home policy lapsed — did not renew', type: 'policy' },
+    { date: 'Aug 20', text: 'Win-back call attempted — no answer', type: 'note' },
+  ],
+}
+
+/* ────────────────────────────────────────────── */
+/*  Exports                                        */
+/* ────────────────────────────────────────────── */
+
+export const MOCK_CUSTOMERS: MockCustomer[] = [maria, roberto, carolina, luis, sofia, diego, valeria, andres, corpTech, fernando]
+
+export const MOCK_CUSTOMERS_BY_ID: Record<string, MockCustomer> = Object.fromEntries(
+  MOCK_CUSTOMERS.map((c) => [c.id, c])
+)
+
+/** Helper to format currency */
+export function fmtMoney(n: number): string {
+  return `$${n.toLocaleString()}`
+}
diff --git a/app/data/mock-renewals.ts b/app/data/mock-renewals.ts
new file mode 100644
index 0000000..1adc754
--- /dev/null
+++ b/app/data/mock-renewals.ts
@@ -0,0 +1,660 @@
+// ═══════════════════════════════════════════════════════════════════════════════
+// RENEWALS — Data Layer
+// ═══════════════════════════════════════════════════════════════════════════════
+
+// --- Carrier Status ---
+export type CarrierRenewalStatus =
+  | 'pending'
+  | 'terms_received'
+  | 'remarketing'
+  | 'bound'
+  | 'declined'
+  | 'lapsed'
+
+// --- Broker Workflow Status ---
+export type BrokerRenewalStatus =
+  | 'unreviewed'
+  | 'under_review'
+  | 'proposal_sent'
+  | 'awaiting_client_response'
+  | 'awaiting_payment'
+  | 'closed_renewed'
+  | 'closed_remarketed'
+  | 'closed_cancelled'
+  | 'not_renewing'
+
+export type RenewalPriority = 'critical' | 'high' | 'medium' | 'low'
+export type RetentionRisk = 'high' | 'medium' | 'low'
+
+export type CancellationReason =
+  | 'price'
+  | 'service'
+  | 'competitor'
+  | 'coverage_gap'
+  | 'business_closed'
+  | 'non_payment'
+  | 'carrier_declined'
+  | 'other'
+
+export interface CancellationData {
+  reason: CancellationReason
+  reasonDetail: string | null
+  competitor: string | null
+  competitorPremium: number | null
+  recoverable: boolean
+  exitDate: string
+}
+
+export interface RenewalTask {
+  id: string
+  title: string
+  type: 'review' | 'send_proposal' | 'follow_up' | 'collect_payment' | 'escalation'
+  status: 'open' | 'in_progress' | 'overdue' | 'done'
+  assignee: string
+  dueDate: string
+  aiGenerated: boolean
+  slaPercent: number
+}
+
+export interface RenewalCommunication {
+  id: string
+  type: 'email' | 'call' | 'note' | 'system'
+  direction: 'inbound' | 'outbound' | 'internal'
+  from: string
+  to: string | null
+  subject: string | null
+  body: string
+  aiDigest: string | null
+  templateUsed: string | null
+  timestamp: string
+  partyRole: string
+}
+
+export interface RenewalDocument {
+  id: string
+  name: string
+  category: 'current_policy' | 'renewal_terms' | 'proposal_sent' |
+            'client_confirmation' | 'payment_receipt' | 'loss_runs' |
+            'correspondence' | 'cancellation'
+  uploadedBy: string
+  uploadedAt: string
+  required: boolean
+  fulfilled: boolean
+}
+
+export interface RenewalParty {
+  id: string
+  role: 'insured' | 'carrier_rep' | 'producer' | 'handler' | 'ai_agent'
+  name: string
+  company: string | null
+  phone: string | null
+  email: string | null
+  hasUnread: boolean
+}
+
+export interface RenewalQuote {
+  id: string
+  carrier: string
+  premium: number
+  currency: 'USD' | 'CRC'
+  coverageAmount: number
+  deductible: number
+  receivedAt: string
+  recommended: boolean
+  notes: string | null
+}
+
+export interface CoverageLine {
+  name: string
+  currentAmount: number | string
+  renewalAmount: number | string | null
+  delta: string | null
+  flag: 'increase' | 'decrease' | 'same' | 'new' | 'removed' | null
+}
+
+export interface PolicyComparison {
+  currentPremium: number
+  renewalPremium: number | null
+  premiumDelta: number | null
+  currentDeductible: number
+  renewalDeductible: number | null
+  deductibleDelta: number | null
+  coverageLines: CoverageLine[]
+  aiAnalysis: string | null
+}
+
+export interface EmailTemplate {
+  id: string
+  name: string
+  subject: string
+  body: string
+  stage: BrokerRenewalStatus
+  lob: string | 'all'
+  isDefault: boolean
+}
+
+export interface RenewalHistoryEntry {
+  year: number
+  carrier: string
+  premium: number
+  outcome: 'renewed' | 'remarketed' | 'cancelled' | 'new'
+}
+
+// --- List item ---
+export interface Renewal {
+  id: string
+  policyId: string
+  policyNumber: string
+  customerId: string
+  customerName: string
+  customerType: 'individual' | 'corporate'
+  carrier: string
+  lob: string
+  currentPremium: number
+  renewalPremium: number | null
+  premiumDelta: number | null
+  currency: 'USD' | 'CRC'
+  expiryDate: string
+  daysUntilExpiry: number
+  carrierStatus: CarrierRenewalStatus
+  brokerStatus: BrokerRenewalStatus
+  priority: RenewalPriority
+  retentionRisk: RetentionRisk
+  lossRatio: number
+  yearsAsClient: number
+  openClaims: number
+  assignedTo: string
+  lastContactDate: string | null
+  slaPercent: number
+  outstandingBalance: number
+  paymentStatus: 'current' | 'overdue' | 'grace_period'
+}
+
+// --- Detail ---
+export interface RenewalDetail extends Renewal {
+  claimIds: string[]
+  parties: RenewalParty[]
+  tasks: RenewalTask[]
+  communications: RenewalCommunication[]
+  documents: RenewalDocument[]
+  comparison: PolicyComparison | null
+  quotes: RenewalQuote[]
+  renewalHistory: RenewalHistoryEntry[]
+  cancellationData: CancellationData | null
+  commissionRate: number
+  commissionAmount: number
+  aiRenewalBrief: string | null
+  aiTalkTrack: string[] | null
+  aiRetentionFactors: string[] | null
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// Label Maps
+// ═══════════════════════════════════════════════════════════════════════════════
+
+export const carrierStatusLabels: Record<CarrierRenewalStatus, string> = {
+  pending: 'Pendiente',
+  terms_received: 'Términos Recibidos',
+  remarketing: 'En Remarketing',
+  bound: 'Vinculada',
+  declined: 'Declinada',
+  lapsed: 'Vencida',
+}
+
+export const brokerStatusLabels: Record<BrokerRenewalStatus, string> = {
+  unreviewed: 'Sin Revisar',
+  under_review: 'En Revisión',
+  proposal_sent: 'Propuesta Enviada',
+  awaiting_client_response: 'Esperando Cliente',
+  awaiting_payment: 'Esperando Pago',
+  closed_renewed: 'Renovada',
+  closed_remarketed: 'Remarketing Exitoso',
+  closed_cancelled: 'Cancelada',
+  not_renewing: 'No Renueva',
+}
+
+export const priorityLabels: Record<RenewalPriority, string> = {
+  critical: 'Crítica',
+  high: 'Alta',
+  medium: 'Media',
+  low: 'Baja',
+}
+
+export const retentionRiskLabels: Record<RetentionRisk, string> = {
+  high: 'Alto',
+  medium: 'Medio',
+  low: 'Bajo',
+}
+
+export const cancellationReasonLabels: Record<CancellationReason, string> = {
+  price: 'Precio',
+  service: 'Servicio',
+  competitor: 'Competencia',
+  coverage_gap: 'Cobertura insuficiente',
+  business_closed: 'Cierre de negocio',
+  non_payment: 'Falta de pago',
+  carrier_declined: 'Aseguradora declinó',
+  other: 'Otro',
+}
+
+export const expiryBuckets = {
+  expired: { label: 'Vencidas', min: -Infinity, max: -1 },
+  this_week: { label: 'Esta semana', min: 0, max: 7 },
+  thirty_days: { label: '30 días', min: 8, max: 30 },
+  sixty_days: { label: '60 días', min: 31, max: 60 },
+  ninety_days: { label: '90 días', min: 61, max: 90 },
+  future: { label: '90+ días', min: 91, max: Infinity },
+}
+
+export const templateMergeFields = [
+  '{{customer_name}}', '{{policy_number}}', '{{lob}}', '{{carrier}}',
+  '{{current_premium}}', '{{renewal_premium}}', '{{premium_delta}}',
+  '{{expiry_date}}', '{{coverage_amount}}', '{{deductible}}',
+  '{{producer_name}}', '{{producer_phone}}', '{{producer_email}}',
+  '{{company_name}}', '{{loss_ratio}}', '{{years_as_client}}',
+]
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// Helpers
+// ═══════════════════════════════════════════════════════════════════════════════
+
+export function slaColor(percent: number): 'green' | 'amber' | 'red' {
+  if (percent >= 100) return 'red'
+  if (percent >= 75) return 'amber'
+  return 'green'
+}
+
+export function expiryBucket(days: number): string {
+  for (const [key, b] of Object.entries(expiryBuckets)) {
+    if (days >= b.min && days <= b.max) return key
+  }
+  return 'future'
+}
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// Mock Email Templates
+// ═══════════════════════════════════════════════════════════════════════════════
+
+export const MOCK_EMAIL_TEMPLATES: EmailTemplate[] = [
+  {
+    id: 'tpl-1', name: 'Aviso de Renovación', stage: 'under_review', lob: 'all', isDefault: true,
+    subject: 'Su póliza {{policy_number}} próxima a vencer',
+    body: 'Estimado/a {{customer_name}},\n\nLe informamos que su póliza {{policy_number}} de {{lob}} con {{carrier}} vence el {{expiry_date}}.\n\nPrima actual: {{current_premium}}\n\nNos pondremos en contacto próximamente con los términos de renovación.\n\nSaludos cordiales,\n{{producer_name}}',
+  },
+  {
+    id: 'tpl-2', name: 'Propuesta de Renovación', stage: 'proposal_sent', lob: 'all', isDefault: true,
+    subject: 'Términos de renovación — {{policy_number}}',
+    body: 'Estimado/a {{customer_name}},\n\nAdjunto los términos de renovación para su póliza {{policy_number}}:\n\n• Prima actual: {{current_premium}}\n• Prima renovación: {{renewal_premium}} ({{premium_delta}})\n• Cobertura: {{coverage_amount}}\n• Deducible: {{deductible}}\n\nPor favor confirme si desea proceder con la renovación.\n\nQuedamos atentos,\n{{producer_name}}\n{{producer_phone}}',
+  },
+  {
+    id: 'tpl-3', name: 'Seguimiento #1', stage: 'awaiting_client_response', lob: 'all', isDefault: true,
+    subject: 'Recordatorio: renovación de póliza {{policy_number}}',
+    body: 'Estimado/a {{customer_name}},\n\nLe recordamos que estamos a la espera de su confirmación para renovar la póliza {{policy_number}} que vence el {{expiry_date}}.\n\nPor favor responda a este correo o comuníquese al {{producer_phone}} para evitar cualquier lapso en su cobertura.\n\nSaludos,\n{{producer_name}}',
+  },
+  {
+    id: 'tpl-4', name: 'Seguimiento #2', stage: 'awaiting_client_response', lob: 'all', isDefault: true,
+    subject: 'Segundo aviso: su póliza {{policy_number}} vence el {{expiry_date}}',
+    body: 'Estimado/a {{customer_name}},\n\nEste es un segundo aviso sobre la renovación de su póliza {{policy_number}}. La fecha de vencimiento es {{expiry_date}} y necesitamos su confirmación a la brevedad posible.\n\nSin su confirmación, la póliza podría vencer sin renovación, dejándole sin cobertura.\n\nPor favor contáctenos de inmediato.\n\n{{producer_name}}\n{{producer_email}} | {{producer_phone}}',
+  },
+  {
+    id: 'tpl-5', name: 'Confirmación de Pago', stage: 'awaiting_payment', lob: 'all', isDefault: true,
+    subject: 'Pago pendiente — renovación {{policy_number}}',
+    body: 'Estimado/a {{customer_name}},\n\nGracias por confirmar la renovación de su póliza {{policy_number}}.\n\nPara completar el proceso, le solicitamos realizar el pago de {{renewal_premium}} a la brevedad.\n\nUna vez recibido el pago, procederemos con la emisión de su nueva póliza.\n\nSaludos,\n{{producer_name}}',
+  },
+  {
+    id: 'tpl-6', name: 'Renovación Completada', stage: 'closed_renewed', lob: 'all', isDefault: true,
+    subject: 'Confirmación de renovación — {{policy_number}}',
+    body: 'Estimado/a {{customer_name}},\n\nNos complace confirmar que su póliza {{policy_number}} ha sido renovada exitosamente con {{carrier}}.\n\nNueva vigencia: {{expiry_date}}\nPrima: {{renewal_premium}}\n\nAdjunto encontrará su nueva póliza. No dude en contactarnos para cualquier consulta.\n\nGracias por su confianza,\n{{producer_name}}\n{{company_name}}',
+  },
+]
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// Mock Renewals (Pipeline List)
+// ═══════════════════════════════════════════════════════════════════════════════
+
+export const MOCK_RENEWALS: Renewal[] = [
+  {
+    id: 'REN-001', policyId: 'POL-0955', policyNumber: 'PROP-2024-HP-001',
+    customerId: 'CUS-001', customerName: 'Hotel Pacífico Resort', customerType: 'corporate',
+    carrier: 'ASSA', lob: 'Auto', currentPremium: 18500, renewalPremium: 22570,
+    premiumDelta: 22, currency: 'USD', expiryDate: '2026-04-11', daysUntilExpiry: 3,
+    carrierStatus: 'terms_received', brokerStatus: 'awaiting_client_response',
+    priority: 'critical', retentionRisk: 'high', lossRatio: 0.42, yearsAsClient: 5,
+    openClaims: 1, assignedTo: 'Marco V.', lastContactDate: '2026-04-03',
+    slaPercent: 95, outstandingBalance: 0, paymentStatus: 'current',
+  },
+  {
+    id: 'REN-002', policyId: 'POL-1034', policyNumber: 'GR-2024-CM-001',
+    customerId: 'CUS-002', customerName: 'Constructora Montes', customerType: 'corporate',
+    carrier: 'Mapfre', lob: 'General Risk', currentPremium: 32000, renewalPremium: null,
+    premiumDelta: null, currency: 'USD', expiryDate: '2026-04-22', daysUntilExpiry: 14,
+    carrierStatus: 'pending', brokerStatus: 'under_review',
+    priority: 'high', retentionRisk: 'medium', lossRatio: 0.15, yearsAsClient: 3,
+    openClaims: 0, assignedTo: 'Ana R.', lastContactDate: '2026-04-01',
+    slaPercent: 55, outstandingBalance: 0, paymentStatus: 'current',
+  },
+  {
+    id: 'REN-003', policyId: 'POL-1077', policyNumber: 'LIFE-2024-CR-001',
+    customerId: 'CUS-003', customerName: 'Carmen Ruiz', customerType: 'individual',
+    carrier: 'Pan-American Life', lob: 'Life', currentPremium: 2800, renewalPremium: 2940,
+    premiumDelta: 5, currency: 'USD', expiryDate: '2026-04-15', daysUntilExpiry: 7,
+    carrierStatus: 'terms_received', brokerStatus: 'awaiting_payment',
+    priority: 'medium', retentionRisk: 'low', lossRatio: 0, yearsAsClient: 8,
+    openClaims: 0, assignedTo: 'Ana R.', lastContactDate: '2026-04-06',
+    slaPercent: 30, outstandingBalance: 0, paymentStatus: 'current',
+  },
+  {
+    id: 'REN-004', policyId: 'POL-1110', policyNumber: 'AUTO-2024-ABC-001',
+    customerId: 'CUS-004', customerName: 'Empresa ABC S.A.', customerType: 'corporate',
+    carrier: 'Qualitas', lob: 'Auto', currentPremium: 22400, renewalPremium: null,
+    premiumDelta: null, currency: 'USD', expiryDate: '2026-05-08', daysUntilExpiry: 30,
+    carrierStatus: 'pending', brokerStatus: 'unreviewed',
+    priority: 'low', retentionRisk: 'low', lossRatio: 0.08, yearsAsClient: 2,
+    openClaims: 0, assignedTo: 'Unassigned', lastContactDate: null,
+    slaPercent: 10, outstandingBalance: 0, paymentStatus: 'current',
+  },
+  {
+    id: 'REN-005', policyId: 'POL-0888', policyNumber: 'HEALTH-2024-CSJ-001',
+    customerId: 'CUS-005', customerName: 'Clínica San José', customerType: 'corporate',
+    carrier: 'ASSA', lob: 'Health', currentPremium: 45000, renewalPremium: null,
+    premiumDelta: null, currency: 'USD', expiryDate: '2026-04-01', daysUntilExpiry: -7,
+    carrierStatus: 'lapsed', brokerStatus: 'closed_cancelled',
+    priority: 'high', retentionRisk: 'high', lossRatio: 0.65, yearsAsClient: 4,
+    openClaims: 0, assignedTo: 'Marco V.', lastContactDate: '2026-03-28',
+    slaPercent: 100, outstandingBalance: 8500, paymentStatus: 'overdue',
+  },
+  {
+    id: 'REN-006', policyId: 'POL-1200', policyNumber: 'GR-2024-TN-001',
+    customerId: 'CUS-006', customerName: 'Transportes del Norte', customerType: 'corporate',
+    carrier: 'ASSA', lob: 'General Risk', currentPremium: 38000, renewalPremium: null,
+    premiumDelta: null, currency: 'USD', expiryDate: '2026-06-07', daysUntilExpiry: 60,
+    carrierStatus: 'pending', brokerStatus: 'unreviewed',
+    priority: 'high', retentionRisk: 'high', lossRatio: 0.55, yearsAsClient: 6,
+    openClaims: 1, assignedTo: 'Unassigned', lastContactDate: null,
+    slaPercent: 15, outstandingBalance: 21000, paymentStatus: 'overdue',
+  },
+]
+
+// ═══════════════════════════════════════════════════════════════════════════════
+// Mock Renewal Details
+// ═══════════════════════════════════════════════════════════════════════════════
+
+const ren001Detail: RenewalDetail = {
+  ...MOCK_RENEWALS[0],
+  claimIds: ['CLM-0048'],
+  parties: [
+    { id: 'rp-1', role: 'insured', name: 'Carlos Montero', company: 'Hotel Pacífico Resort', phone: '+507 6700-1234', email: 'cmontero@hotelpacífico.com', hasUnread: true },
+    { id: 'rp-2', role: 'carrier_rep', name: 'Lucía Vargas', company: 'ASSA', phone: '+507 6600-9876', email: 'lvargas@assa.com', hasUnread: false },
+    { id: 'rp-3', role: 'handler', name: 'Marco V.', company: null, phone: null, email: 'marco@segur-os.com', hasUnread: false },
+  ],
+  tasks: [
+    { id: 'rt-1', title: 'Follow up with client — no response in 5 days', type: 'follow_up', status: 'overdue', assignee: 'Marco V.', dueDate: '2026-04-06', aiGenerated: true, slaPercent: 110 },
+    { id: 'rt-2', title: 'Prepare counter-proposal (premium increase justification)', type: 'send_proposal', status: 'open', assignee: 'Marco V.', dueDate: '2026-04-09', aiGenerated: false, slaPercent: 80 },
+    { id: 'rt-3', title: 'Review loss runs before presenting to client', type: 'review', status: 'done', assignee: 'Marco V.', dueDate: '2026-04-02', aiGenerated: false, slaPercent: 20 },
+  ],
+  communications: [
+    { id: 'rc-1', type: 'email', direction: 'outbound', from: 'Marco V.', to: 'Carlos Montero', subject: 'Términos de renovación — PROP-2024-HP-001', body: 'Estimado Carlos, adjunto los términos de renovación de su póliza de auto. La prima pasa de $18,500 a $22,570 (+22%) debido al reclamo abierto y al ajuste de mercado. Quedo atento a su respuesta.', aiDigest: null, templateUsed: 'tpl-2', timestamp: '2026-04-03T10:30:00', partyRole: 'insured' },
+    { id: 'rc-2', type: 'email', direction: 'inbound', from: 'Lucía Vargas', to: 'Marco V.', subject: 'RE: Renewal terms HP-001', body: 'Marco, adjunto los términos definitivos para Hotel Pacífico. El aumento refleja el siniestro abierto CLM-0048 y el ajuste de tarifa general para flota comercial.', aiDigest: 'ASSA confirma aumento de 22% justificado por siniestro abierto y ajuste de tarifa.', templateUsed: null, timestamp: '2026-04-02T15:45:00', partyRole: 'carrier_rep' },
+    { id: 'rc-3', type: 'note', direction: 'internal', from: 'Marco V.', to: null, subject: null, body: 'Client not responding to emails. Called twice, went to voicemail. Need to escalate if no response by Apr 8.', aiDigest: null, templateUsed: null, timestamp: '2026-04-06T09:00:00', partyRole: 'handler' },
+    { id: 'rc-4', type: 'system', direction: 'internal', from: 'System', to: null, subject: null, body: 'AI escalation: Client non-response exceeds 5 days. Recommended action: send Seguimiento #1 template.', aiDigest: null, templateUsed: null, timestamp: '2026-04-08T08:00:00', partyRole: 'ai_agent' },
+  ],
+  documents: [
+    { id: 'rd-1', name: 'Póliza actual — PROP-2024-HP-001.pdf', category: 'current_policy', uploadedBy: 'System', uploadedAt: '2026-03-01', required: true, fulfilled: true },
+    { id: 'rd-2', name: 'Términos renovación ASSA 2026.pdf', category: 'renewal_terms', uploadedBy: 'Lucía Vargas', uploadedAt: '2026-04-02', required: true, fulfilled: true },
+    { id: 'rd-3', name: 'Propuesta enviada a cliente.pdf', category: 'proposal_sent', uploadedBy: 'Marco V.', uploadedAt: '2026-04-03', required: true, fulfilled: true },
+    { id: 'rd-4', name: 'Loss runs 2023-2025.pdf', category: 'loss_runs', uploadedBy: 'ASSA', uploadedAt: '2026-04-01', required: true, fulfilled: true },
+    { id: 'rd-5', name: 'Client confirmation', category: 'client_confirmation', uploadedBy: '', uploadedAt: '', required: true, fulfilled: false },
+    { id: 'rd-6', name: 'Payment receipt', category: 'payment_receipt', uploadedBy: '', uploadedAt: '', required: true, fulfilled: false },
+  ],
+  comparison: {
+    currentPremium: 18500, renewalPremium: 22570, premiumDelta: 22,
+    currentDeductible: 500, renewalDeductible: 750, deductibleDelta: 50,
+    coverageLines: [
+      { name: 'Responsabilidad Civil', currentAmount: 100000, renewalAmount: 100000, delta: '=', flag: 'same' },
+      { name: 'Daños Propios', currentAmount: 45000, renewalAmount: 45000, delta: '=', flag: 'same' },
+      { name: 'Robo Total', currentAmount: 45000, renewalAmount: 40000, delta: '-11%', flag: 'decrease' },
+      { name: 'Asistencia Vial', currentAmount: 'Incluida', renewalAmount: 'Incluida', delta: '=', flag: 'same' },
+      { name: 'Vidrios', currentAmount: 2000, renewalAmount: 2500, delta: '+25%', flag: 'increase' },
+    ],
+    aiAnalysis: 'El aumento de 22% se justifica por el siniestro abierto CLM-0048 ($128K reservado) y el ajuste de tarifa general de ASSA para flotas comerciales (+8% promedio). El deducible subió 50%. La cobertura de Robo Total baja 11% — recomendar al cliente mantener nivel actual. Se detecta oportunidad de negociar Vidrios si se acepta deducible mayor.',
+  },
+  quotes: [],
+  renewalHistory: [
+    { year: 2025, carrier: 'ASSA', premium: 18500, outcome: 'renewed' },
+    { year: 2024, carrier: 'ASSA', premium: 16200, outcome: 'renewed' },
+    { year: 2023, carrier: 'Qualitas', premium: 15800, outcome: 'remarketed' },
+    { year: 2022, carrier: 'Qualitas', premium: 14500, outcome: 'renewed' },
+  ],
+  cancellationData: null,
+  commissionRate: 15, commissionAmount: 3385.50,
+  aiRenewalBrief: 'Hotel Pacífico es un cliente corporativo de 5 años con prima actual de $18,500 en Auto. ASSA ofrece renovación a $22,570 (+22%), justificado por siniestro abierto CLM-0048 con $128K reservados y ajuste de tarifa de flota. El cliente no ha respondido en 5 días. El deducible sube de $500 a $750. Loss ratio de 42% está por encima del promedio para esta línea. Comisión proyectada: $3,385. Riesgo de retención ALTO.',
+  aiTalkTrack: [
+    'Abrir con empatía: reconocer que un aumento de 22% es significativo y que entendemos su preocupación.',
+    'Explicar el contexto: el siniestro abierto impacta directamente la tarificación. ASSA subió tarifas de flota 8% en general.',
+    'Destacar valor: 5 años como cliente, historial mayormente limpio. Hemos negociado mantener la cobertura de RC en $100K sin cambio.',
+    'Proponer alternativa: si acepta deducible de $1,000 en vez de $750, podemos negociar bajar prima a ~$21,500.',
+    'Urgencia: la póliza vence el 11 de abril. Sin confirmación antes del 9, hay riesgo de lapso.',
+  ],
+  aiRetentionFactors: [
+    '5 años como cliente — relación establecida',
+    'Siniestro abierto CLM-0048 dificulta remarketing',
+    'Flota comercial con cobertura especializada — pocas opciones en mercado local',
+    'Balance al día, historial de pago puntual',
+    'Riesgo: aumento de 22% puede motivar búsqueda de alternativas',
+  ],
+}
+
+const ren005Detail: RenewalDetail = {
+  ...MOCK_RENEWALS[4],
+  claimIds: [],
+  parties: [
+    { id: 'rp-10', role: 'insured', name: 'Dr. Alejandro Solís', company: 'Clínica San José', phone: '+507 6500-3456', email: 'asolis@clinicasanjose.com', hasUnread: false },
+    { id: 'rp-11', role: 'handler', name: 'Marco V.', company: null, phone: null, email: 'marco@segur-os.com', hasUnread: false },
+  ],
+  tasks: [
+    { id: 'rt-10', title: 'Document cancellation reason', type: 'review', status: 'done', assignee: 'Marco V.', dueDate: '2026-04-02', aiGenerated: false, slaPercent: 100 },
+    { id: 'rt-11', title: 'Win-back outreach — 30 day follow-up', type: 'follow_up', status: 'open', assignee: 'Marco V.', dueDate: '2026-05-01', aiGenerated: true, slaPercent: 20 },
+  ],
+  communications: [
+    { id: 'rc-10', type: 'email', direction: 'inbound', from: 'Dr. Alejandro Solís', to: 'Marco V.', subject: 'Decisión sobre renovación', body: 'Marco, lamentablemente hemos decidido no renovar con ASSA. Recibimos una oferta más competitiva de Mapfre a $38,500 con mejores términos de copago. Agradecemos el servicio durante estos 4 años.', aiDigest: 'Cliente cancela por oferta competidora de Mapfre a $38,500 (vs $45,000 actual). Menciona mejores copagos.', templateUsed: null, timestamp: '2026-03-28T11:00:00', partyRole: 'insured' },
+    { id: 'rc-11', type: 'note', direction: 'internal', from: 'Marco V.', to: null, subject: null, body: 'Lost to Mapfre. Client says their copay terms are better. ASSA was unable to match. Client open to reconsidering in 12 months if terms change. Marked as recoverable.', aiDigest: null, templateUsed: null, timestamp: '2026-03-29T09:00:00', partyRole: 'handler' },
+  ],
+  documents: [
+    { id: 'rd-10', name: 'Póliza actual — HEALTH-2024-CSJ-001.pdf', category: 'current_policy', uploadedBy: 'System', uploadedAt: '2026-02-15', required: true, fulfilled: true },
+    { id: 'rd-11', name: 'Cancellation email from client.pdf', category: 'cancellation', uploadedBy: 'Marco V.', uploadedAt: '2026-03-28', required: false, fulfilled: true },
+  ],
+  comparison: null,
+  quotes: [],
+  renewalHistory: [
+    { year: 2025, carrier: 'ASSA', premium: 45000, outcome: 'cancelled' },
+    { year: 2024, carrier: 'ASSA', premium: 42000, outcome: 'renewed' },
+    { year: 2023, carrier: 'ASSA', premium: 38000, outcome: 'renewed' },
+    { year: 2022, carrier: 'ASSA', premium: 35000, outcome: 'new' },
+  ],
+  cancellationData: {
+    reason: 'competitor',
+    reasonDetail: 'Mapfre offered better copay terms and lower premium',
+    competitor: 'Mapfre',
+    competitorPremium: 38500,
+    recoverable: true,
+    exitDate: '2026-04-01',
+  },
+  commissionRate: 12, commissionAmount: 0,
+  aiRenewalBrief: 'Clínica San José — cliente corporativo de 4 años, póliza de Salud Grupal con ASSA por $45,000. Cancelada por competencia: Mapfre ofreció $38,500 con mejores copagos. Loss ratio 65% (alto). El cliente expresó apertura a reconsiderar en 12 meses. Marcado como recuperable para win-back.',
+  aiTalkTrack: null,
+  aiRetentionFactors: [
+    'Loss ratio de 65% — difícil competir en precio',
+    'Mapfre ofreció $6,500 menos con mejores copagos',
+    'Cliente indica apertura a reconsiderar en 12 meses',
+    'Balance pendiente de $8,500 complica relación',
+  ],
+}
+
+const ren002Detail: RenewalDetail = {
+  ...MOCK_RENEWALS[1],
+  claimIds: [],
+  parties: [
+    { id: 'rp-20', role: 'insured', name: 'Ing. Ricardo Montes', company: 'Constructora Montes', phone: '+507 6800-2222', email: 'rmontes@constructoramontes.com', hasUnread: false },
+    { id: 'rp-21', role: 'carrier_rep', name: 'Fernando Gil', company: 'Mapfre', phone: '+507 6600-3333', email: 'fgil@mapfre.com', hasUnread: false },
+    { id: 'rp-22', role: 'handler', name: 'Ana R.', company: null, phone: null, email: 'ana@segur-os.com', hasUnread: false },
+  ],
+  tasks: [
+    { id: 'rt-20', title: 'Request renewal terms from Mapfre', type: 'review', status: 'in_progress', assignee: 'Ana R.', dueDate: '2026-04-10', aiGenerated: false, slaPercent: 55 },
+    { id: 'rt-21', title: 'Review last year loss runs', type: 'review', status: 'open', assignee: 'Ana R.', dueDate: '2026-04-12', aiGenerated: false, slaPercent: 40 },
+  ],
+  communications: [
+    { id: 'rc-20', type: 'email', direction: 'outbound', from: 'Ana R.', to: 'Fernando Gil', subject: 'Solicitud de términos — GR-2024-CM-001', body: 'Fernando, buen día. Solicitamos los términos de renovación para la póliza GR-2024-CM-001 de Constructora Montes, vigente hasta el 22 de abril. Agradecemos envío a la brevedad.', aiDigest: null, templateUsed: null, timestamp: '2026-04-01T14:00:00', partyRole: 'carrier_rep' },
+  ],
+  documents: [
+    { id: 'rd-20', name: 'Póliza actual — GR-2024-CM-001.pdf', category: 'current_policy', uploadedBy: 'System', uploadedAt: '2026-03-15', required: true, fulfilled: true },
+    { id: 'rd-21', name: 'Loss runs 2024-2025.pdf', category: 'loss_runs', uploadedBy: 'Mapfre', uploadedAt: '2026-03-20', required: true, fulfilled: true },
+    { id: 'rd-22', name: 'Renewal terms', category: 'renewal_terms', uploadedBy: '', uploadedAt: '', required: true, fulfilled: false },
+  ],
+  comparison: null,
+  quotes: [],
+  renewalHistory: [
+    { year: 2025, carrier: 'Mapfre', premium: 32000, outcome: 'renewed' },
+    { year: 2024, carrier: 'Mapfre', premium: 29000, outcome: 'renewed' },
+    { year: 2023, carrier: 'ASSA', premium: 27500, outcome: 'remarketed' },
+  ],
+  cancellationData: null,
+  commissionRate: 12, commissionAmount: 3840,
+  aiRenewalBrief: 'Constructora Montes — cliente corporativo de 3 años, General Risk con Mapfre por $32,000. Términos de renovación aún no recibidos. Loss ratio bajo (15%). Sin reclamos abiertos. Buena relación con carrier. Se espera renovación sin complicaciones pero se necesitan los términos antes del 15 de abril para cumplir SLA.',
+  aiTalkTrack: null,
+  aiRetentionFactors: [
+    'Loss ratio de 15% — excelente para la línea',
+    'Sin reclamos abiertos',
+    '3 años como cliente, relación estable',
+    'Riesgo moderado: constructora puede buscar cotizaciones competitivas',
+  ],
+}
+
+const ren003Detail: RenewalDetail = {
+  ...MOCK_RENEWALS[2],
+  claimIds: [],
+  parties: [
+    { id: 'rp-30', role: 'insured', name: 'Carmen Ruiz', company: null, phone: '+507 6400-5555', email: 'carmen.ruiz@gmail.com', hasUnread: false },
+    { id: 'rp-31', role: 'handler', name: 'Ana R.', company: null, phone: null, email: 'ana@segur-os.com', hasUnread: false },
+  ],
+  tasks: [
+    { id: 'rt-30', title: 'Collect payment — client confirmed renewal', type: 'collect_payment', status: 'open', assignee: 'Ana R.', dueDate: '2026-04-12', aiGenerated: false, slaPercent: 30 },
+  ],
+  communications: [
+    { id: 'rc-30', type: 'email', direction: 'outbound', from: 'Ana R.', to: 'Carmen Ruiz', subject: 'Confirmación de pago — LIFE-2024-CR-001', body: 'Estimada Carmen, gracias por confirmar la renovación de su póliza de vida. La prima para el nuevo período es de $2,940. Por favor realice la transferencia para completar el proceso.', aiDigest: null, templateUsed: 'tpl-5', timestamp: '2026-04-06T10:00:00', partyRole: 'insured' },
+    { id: 'rc-31', type: 'email', direction: 'inbound', from: 'Carmen Ruiz', to: 'Ana R.', subject: 'RE: Renovación vida', body: 'Ana, confirmo que deseo renovar. Haré la transferencia esta semana.', aiDigest: 'Cliente confirma renovación, promete pago esta semana.', templateUsed: null, timestamp: '2026-04-05T16:30:00', partyRole: 'insured' },
+  ],
+  documents: [
+    { id: 'rd-30', name: 'Póliza actual — LIFE-2024-CR-001.pdf', category: 'current_policy', uploadedBy: 'System', uploadedAt: '2026-03-01', required: true, fulfilled: true },
+    { id: 'rd-31', name: 'Términos Pan-American Life 2026.pdf', category: 'renewal_terms', uploadedBy: 'Pan-American Life', uploadedAt: '2026-03-25', required: true, fulfilled: true },
+    { id: 'rd-32', name: 'Propuesta enviada.pdf', category: 'proposal_sent', uploadedBy: 'Ana R.', uploadedAt: '2026-03-28', required: true, fulfilled: true },
+    { id: 'rd-33', name: 'Client confirmation email.pdf', category: 'client_confirmation', uploadedBy: 'Ana R.', uploadedAt: '2026-04-05', required: true, fulfilled: true },
+    { id: 'rd-34', name: 'Payment receipt', category: 'payment_receipt', uploadedBy: '', uploadedAt: '', required: true, fulfilled: false },
+  ],
+  comparison: {
+    currentPremium: 2800, renewalPremium: 2940, premiumDelta: 5,
+    currentDeductible: 0, renewalDeductible: 0, deductibleDelta: 0,
+    coverageLines: [
+      { name: 'Vida Individual', currentAmount: 100000, renewalAmount: 100000, delta: '=', flag: 'same' },
+      { name: 'Muerte Accidental', currentAmount: 50000, renewalAmount: 50000, delta: '=', flag: 'same' },
+      { name: 'Incapacidad Total', currentAmount: 100000, renewalAmount: 100000, delta: '=', flag: 'same' },
+    ],
+    aiAnalysis: 'Aumento de 5% es estándar para ajuste de edad en seguro de vida. Coberturas sin cambio. Renovación rutinaria sin complicaciones.',
+  },
+  quotes: [],
+  renewalHistory: [
+    { year: 2025, carrier: 'Pan-American Life', premium: 2800, outcome: 'renewed' },
+    { year: 2024, carrier: 'Pan-American Life', premium: 2650, outcome: 'renewed' },
+    { year: 2023, carrier: 'Pan-American Life', premium: 2500, outcome: 'renewed' },
+    { year: 2022, carrier: 'Pan-American Life', premium: 2350, outcome: 'renewed' },
+    { year: 2021, carrier: 'Pan-American Life', premium: 2200, outcome: 'renewed' },
+    { year: 2020, carrier: 'Pan-American Life', premium: 2050, outcome: 'renewed' },
+    { year: 2019, carrier: 'Pan-American Life', premium: 1900, outcome: 'renewed' },
+    { year: 2018, carrier: 'Pan-American Life', premium: 1750, outcome: 'new' },
+  ],
+  cancellationData: null,
+  commissionRate: 20, commissionAmount: 588,
+  aiRenewalBrief: 'Carmen Ruiz — cliente individual de 8 años, póliza de Vida con Pan-American Life. Aumento de 5% por ajuste de edad, estándar. Cliente confirmó renovación, pendiente cobro de $2,940. Excelente historial de retención. Sin reclamos.',
+  aiTalkTrack: null,
+  aiRetentionFactors: ['8 años como cliente — altamente leal', 'Sin reclamos, loss ratio 0%', 'Aumento de 5% es mínimo y esperado'],
+}
+
+const ren004Detail: RenewalDetail = {
+  ...MOCK_RENEWALS[3],
+  claimIds: [],
+  parties: [
+    { id: 'rp-40', role: 'insured', name: 'Lic. Patricia Vega', company: 'Empresa ABC S.A.', phone: '+507 6300-7777', email: 'pvega@empresaabc.com', hasUnread: false },
+  ],
+  tasks: [
+    { id: 'rt-40', title: 'Assign handler and begin review', type: 'review', status: 'open', assignee: 'Unassigned', dueDate: '2026-04-15', aiGenerated: true, slaPercent: 10 },
+  ],
+  communications: [],
+  documents: [
+    { id: 'rd-40', name: 'Póliza actual — AUTO-2024-ABC-001.pdf', category: 'current_policy', uploadedBy: 'System', uploadedAt: '2026-04-01', required: true, fulfilled: true },
+  ],
+  comparison: null,
+  quotes: [],
+  renewalHistory: [
+    { year: 2025, carrier: 'Qualitas', premium: 22400, outcome: 'renewed' },
+    { year: 2024, carrier: 'Qualitas', premium: 21000, outcome: 'new' },
+  ],
+  cancellationData: null,
+  commissionRate: 15, commissionAmount: 3360,
+  aiRenewalBrief: 'Empresa ABC S.A. — flota Auto con Qualitas por $22,400. Renovación sin asignar, 30 días hasta vencimiento. Sin reclamos, loss ratio 8%. Necesita asignación inmediata para cumplir SLA.',
+  aiTalkTrack: null,
+  aiRetentionFactors: ['Loss ratio bajo (8%)', '2 años como cliente', 'Sin complicaciones previas'],
+}
+
+const ren006Detail: RenewalDetail = {
+  ...MOCK_RENEWALS[5],
+  claimIds: ['CLM-0043'],
+  parties: [
+    { id: 'rp-60', role: 'insured', name: 'Gerardo Núñez', company: 'Transportes del Norte', phone: '+507 6200-8888', email: 'gnunez@transportesnorte.com', hasUnread: true },
+  ],
+  tasks: [
+    { id: 'rt-60', title: 'Assign handler — high-risk renewal', type: 'review', status: 'open', assignee: 'Unassigned', dueDate: '2026-04-20', aiGenerated: true, slaPercent: 15 },
+    { id: 'rt-61', title: 'Address $21K outstanding balance before renewal', type: 'escalation', status: 'open', assignee: 'Unassigned', dueDate: '2026-04-18', aiGenerated: true, slaPercent: 20 },
+  ],
+  communications: [
+    { id: 'rc-60', type: 'system', direction: 'internal', from: 'System', to: null, subject: null, body: 'AI alert: Transportes del Norte has $21,000 outstanding balance and an open claim (CLM-0043). This renewal requires early attention due to high retention risk.', aiDigest: null, templateUsed: null, timestamp: '2026-04-08T08:00:00', partyRole: 'ai_agent' },
+  ],
+  documents: [
+    { id: 'rd-60', name: 'Póliza actual — GR-2024-TN-001.pdf', category: 'current_policy', uploadedBy: 'System', uploadedAt: '2026-03-15', required: true, fulfilled: true },
+  ],
+  comparison: null,
+  quotes: [],
+  renewalHistory: [
+    { year: 2025, carrier: 'ASSA', premium: 38000, outcome: 'renewed' },
+    { year: 2024, carrier: 'ASSA', premium: 35000, outcome: 'renewed' },
+    { year: 2023, carrier: 'ASSA', premium: 32000, outcome: 'renewed' },
+    { year: 2022, carrier: 'ASSA', premium: 28000, outcome: 'renewed' },
+    { year: 2021, carrier: 'ASSA', premium: 25000, outcome: 'renewed' },
+    { year: 2020, carrier: 'ASSA', premium: 22000, outcome: 'new' },
+  ],
+  cancellationData: null,
+  commissionRate: 12, commissionAmount: 4560,
+  aiRenewalBrief: 'Transportes del Norte — cliente corporativo de 6 años, General Risk con ASSA por $38,000. ALERTA: balance pendiente de $21,000 y reclamo abierto CLM-0043 ($45K reservado). Loss ratio de 55% dificulta la negociación. Necesita atención temprana a pesar de tener 60 días hasta vencimiento. Comisión en riesgo: $4,560.',
+  aiTalkTrack: [
+    'Primero resolver el tema del balance pendiente de $21K antes de hablar de renovación.',
+    'Reconocer que es un cliente de 6 años con historial generalmente positivo.',
+    'El reclamo abierto CLM-0043 impactará los términos — preparar al cliente para posible aumento.',
+    'Proponer plan de pago para el balance pendiente como condición para negociar mejores términos de renovación.',
+    'Si ASSA sube prima significativamente, tener plan B de remarketing con Mapfre.',
+  ],
+  aiRetentionFactors: [
+    '6 años como cliente — relación de largo plazo',
+    'Balance pendiente de $21K — señal de alerta',
+    'Reclamo abierto CLM-0043 por $45K reservado',
+    'Loss ratio 55% — por encima del promedio',
+    'Comisión de $4,560 en riesgo',
+    'Flota de transporte — pocas opciones en mercado local',
+  ],
+}
+
+export const MOCK_RENEWAL_DETAILS: Record<string, RenewalDetail> = {
+  'REN-001': ren001Detail,
+  'REN-002': ren002Detail,
+  'REN-003': ren003Detail,
+  'REN-004': ren004Detail,
+  'REN-005': ren005Detail,
+  'REN-006': ren006Detail,
+}
diff --git a/app/data/mock-support.ts b/app/data/mock-support.ts
new file mode 100644
index 0000000..a59104e
--- /dev/null
+++ b/app/data/mock-support.ts
@@ -0,0 +1,699 @@
+// ─── Support Ticket System — Types, Labels, Helpers, Mock Data ───────────────
+
+// ── Channel ──
+export type SupportChannel = 'whatsapp' | 'email' | 'phone' | 'walk_in' | 'web_form'
+
+// ── Routing Tier ──
+export type RoutingTier = 'tier1_auto' | 'tier2_rule' | 'tier3_open'
+
+// ── Ticket Status ──
+export type TicketStatus = 'open' | 'in_progress' | 'pending_customer' | 'resolved'
+
+// ── Priority ──
+export type TicketPriority = 'urgent' | 'high' | 'medium' | 'low'
+
+// ── Intent Category (LLM classification) ──
+export type IntentCategory =
+  | 'payment_inquiry'
+  | 'claim_report'
+  | 'sales_interest'
+  | 'doc_request'
+  | 'policy_question'
+  | 'complaint'
+  | 'endorsement'
+  | 'certificate_request'
+  | 'general'
+
+// ── Routed Queue ──
+export type RoutedQueue = 'collections' | 'claims' | 'sales' | 'renewals' | 'operations' | 'open_pool'
+
+// ── Message Types ──
+export type MessageType = 'whatsapp' | 'email' | 'phone_note' | 'internal_note' | 'system'
+export type MessageDirection = 'inbound' | 'outbound' | 'internal'
+
+// ── Routing Rule Type ──
+export type RoutingRuleType = 'customer_match' | 'lob_specialist' | 'keyword_intent' | 'doc_auto_fulfill'
+
+// ─── Interfaces ──────────────────────────────────────────────────────────────
+
+export interface TicketMessage {
+  id: string
+  type: MessageType
+  direction: MessageDirection
+  from: string
+  to: string | null
+  subject: string | null
+  body: string
+  timestamp: string
+  aiDigest: string | null
+  deliveryStatus?: 'sent' | 'delivered' | 'read'
+}
+
+export interface SupportTicket {
+  id: string
+  subject: string
+  channel: SupportChannel
+  status: TicketStatus
+  priority: TicketPriority
+  intentCategory: IntentCategory
+  routingTier: RoutingTier
+  routedQueue: RoutedQueue
+  customerId: string | null
+  customerName: string
+  policyId: string | null
+  policyNumber: string | null
+  assignedTo: string | null
+  createdAt: string
+  updatedAt: string
+  daysOpen: number
+  slaPercent: number
+  messageCount: number
+  lastMessagePreview: string
+}
+
+export interface SupportTicketDetail extends SupportTicket {
+  customerEmail: string | null
+  customerPhone: string | null
+  linkedPolicies: { id: string; number: string; carrier: string; lob: string; status: string; renewal: string }[]
+  linkedClaims: { id: string; type: string; status: string }[]
+  messages: TicketMessage[]
+  aiSummary: string
+  aiSuggestedIntent: IntentCategory
+  aiConfidence: number
+  routingTrace: { step: string; result: string; timestamp: string }[]
+}
+
+export interface RoutingRule {
+  id: string
+  tier: RoutingTier
+  type: RoutingRuleType
+  name: string
+  condition: string
+  targetQueue: RoutedQueue
+  targetAgent: string | null
+  enabled: boolean
+  priority: number
+}
+
+// ─── Label Maps ──────────────────────────────────────────────────────────────
+
+export const CHANNEL_LABELS: Record<SupportChannel, string> = {
+  whatsapp: 'WhatsApp',
+  email: 'Email',
+  phone: 'Teléfono',
+  walk_in: 'Presencial',
+  web_form: 'Formulario Web',
+}
+
+export const CHANNEL_ICONS: Record<SupportChannel, string> = {
+  whatsapp: 'i-heroicons-chat-bubble-left-ellipsis',
+  email: 'i-heroicons-envelope',
+  phone: 'i-heroicons-phone',
+  walk_in: 'i-heroicons-building-storefront',
+  web_form: 'i-heroicons-globe-alt',
+}
+
+export const STATUS_LABELS: Record<TicketStatus, string> = {
+  open: 'Abierto',
+  in_progress: 'En Proceso',
+  pending_customer: 'Esperando Cliente',
+  resolved: 'Resuelto',
+}
+
+export const PRIORITY_LABELS: Record<TicketPriority, string> = {
+  urgent: 'Urgente',
+  high: 'Alta',
+  medium: 'Media',
+  low: 'Baja',
+}
+
+export const INTENT_LABELS: Record<IntentCategory, string> = {
+  payment_inquiry: 'Consulta de Pago',
+  claim_report: 'Reporte de Siniestro',
+  sales_interest: 'Interés en Seguros',
+  doc_request: 'Solicitud de Documento',
+  policy_question: 'Consulta de Póliza',
+  complaint: 'Queja',
+  endorsement: 'Endoso',
+  certificate_request: 'Certificado',
+  general: 'General',
+}
+
+export const TIER_LABELS: Record<RoutingTier, string> = {
+  tier1_auto: 'Tier 1 — Auto',
+  tier2_rule: 'Tier 2 — Regla',
+  tier3_open: 'Tier 3 — Pool',
+}
+
+export const QUEUE_LABELS: Record<RoutedQueue, string> = {
+  collections: 'Cobranza',
+  claims: 'Siniestros',
+  sales: 'Ventas',
+  renewals: 'Renovaciones',
+  operations: 'Operaciones',
+  open_pool: 'Pool Abierto',
+}
+
+export const MESSAGE_TYPE_LABELS: Record<MessageType, string> = {
+  whatsapp: 'WhatsApp',
+  email: 'Email',
+  phone_note: 'Nota de Llamada',
+  internal_note: 'Nota Interna',
+  system: 'Sistema',
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+export function slaColor(percent: number): 'green' | 'amber' | 'red' {
+  if (percent >= 100) return 'red'
+  if (percent >= 75) return 'amber'
+  return 'green'
+}
+
+export function channelIcon(ch: SupportChannel): string {
+  return CHANNEL_ICONS[ch] ?? 'i-heroicons-question-mark-circle'
+}
+
+export function tierBadgeClass(tier: RoutingTier): string {
+  switch (tier) {
+    case 'tier1_auto': return 'sp-tier-1'
+    case 'tier2_rule': return 'sp-tier-2'
+    case 'tier3_open': return 'sp-tier-3'
+    default: return ''
+  }
+}
+
+export function fmtDate(d: string): string {
+  return new Date(d).toLocaleDateString('es-PA', { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+export function fmtTime(d: string): string {
+  return new Date(d).toLocaleTimeString('es-PA', { hour: '2-digit', minute: '2-digit' })
+}
+
+export function fmtDateTime(d: string): string {
+  return `${fmtDate(d)} ${fmtTime(d)}`
+}
+
+// ─── Mock Tickets (List) ─────────────────────────────────────────────────────
+
+export const MOCK_SUPPORT_TICKETS: SupportTicket[] = [
+  {
+    id: 'SP-001',
+    subject: 'Consulta sobre pago pendiente de póliza auto',
+    channel: 'whatsapp',
+    status: 'resolved',
+    priority: 'medium',
+    intentCategory: 'payment_inquiry',
+    routingTier: 'tier2_rule',
+    routedQueue: 'collections',
+    customerId: 'cust-001',
+    customerName: 'María Elena Pérez Solano',
+    policyId: 'POL-2024-4412',
+    policyNumber: 'AUTO-2024-4412',
+    assignedTo: 'Carlos Villalba',
+    createdAt: '2026-04-01T09:15:00',
+    updatedAt: '2026-04-01T14:30:00',
+    daysOpen: 0,
+    slaPercent: 45,
+    messageCount: 6,
+    lastMessagePreview: 'Perfecto, ya quedó registrado el pago. Gracias María Elena.',
+  },
+  {
+    id: 'SP-002',
+    subject: 'Reporte de accidente vehicular — Toyota RAV4',
+    channel: 'email',
+    status: 'in_progress',
+    priority: 'high',
+    intentCategory: 'claim_report',
+    routingTier: 'tier2_rule',
+    routedQueue: 'claims',
+    customerId: 'cust-004',
+    customerName: 'Luis Andrés Solís Calderón',
+    policyId: 'POL-2022-2200',
+    policyNumber: 'AUTO-2022-2200',
+    assignedTo: 'María Fernanda Ortiz',
+    createdAt: '2026-04-03T11:22:00',
+    updatedAt: '2026-04-07T16:45:00',
+    daysOpen: 5,
+    slaPercent: 62,
+    messageCount: 5,
+    lastMessagePreview: 'Adjunto las fotos del daño al vehículo tomadas esta mañana.',
+  },
+  {
+    id: 'SP-003',
+    subject: 'Solicitud de certificado de seguro para banco',
+    channel: 'walk_in',
+    status: 'resolved',
+    priority: 'low',
+    intentCategory: 'certificate_request',
+    routingTier: 'tier1_auto',
+    routedQueue: 'operations',
+    customerId: 'cust-002',
+    customerName: 'Roberto Jiménez Mora',
+    policyId: 'POL-2023-3301',
+    policyNumber: 'AUTO-2023-3301',
+    assignedTo: 'Ana R.',
+    createdAt: '2026-04-04T10:00:00',
+    updatedAt: '2026-04-04T10:35:00',
+    daysOpen: 0,
+    slaPercent: 20,
+    messageCount: 3,
+    lastMessagePreview: 'Certificado generado y entregado en mano.',
+  },
+  {
+    id: 'SP-004',
+    subject: 'Cotización seguro auto para BMW X3 2025',
+    channel: 'whatsapp',
+    status: 'open',
+    priority: 'medium',
+    intentCategory: 'sales_interest',
+    routingTier: 'tier2_rule',
+    routedQueue: 'sales',
+    customerId: null,
+    customerName: 'Número desconocido (+507 6789-0123)',
+    policyId: null,
+    policyNumber: null,
+    assignedTo: 'María Fernanda Ortiz',
+    createdAt: '2026-04-07T08:30:00',
+    updatedAt: '2026-04-07T08:30:00',
+    daysOpen: 1,
+    slaPercent: 35,
+    messageCount: 3,
+    lastMessagePreview: 'Buenas, cuánto sale un seguro todo riesgo para un BMW X3 2025?',
+  },
+  {
+    id: 'SP-005',
+    subject: 'Queja por demora en proceso de siniestro CLM-0048',
+    channel: 'email',
+    status: 'pending_customer',
+    priority: 'high',
+    intentCategory: 'complaint',
+    routingTier: 'tier3_open',
+    routedQueue: 'open_pool',
+    customerId: 'cust-001',
+    customerName: 'María Elena Pérez Solano',
+    policyId: 'POL-2024-4412',
+    policyNumber: 'AUTO-2024-4412',
+    assignedTo: 'Carlos Villalba',
+    createdAt: '2026-04-02T15:00:00',
+    updatedAt: '2026-04-06T09:20:00',
+    daysOpen: 6,
+    slaPercent: 88,
+    messageCount: 7,
+    lastMessagePreview: 'Estamos pendientes de su respuesta con los documentos adicionales.',
+  },
+  {
+    id: 'SP-006',
+    subject: 'Consulta plan salud colectivo — Grupo Agrícola del Sur',
+    channel: 'web_form',
+    status: 'in_progress',
+    priority: 'medium',
+    intentCategory: 'policy_question',
+    routingTier: 'tier1_auto',
+    routedQueue: 'operations',
+    customerId: 'cust-010',
+    customerName: 'Fernando Arias Blanco',
+    policyId: null,
+    policyNumber: null,
+    assignedTo: 'Ana R.',
+    createdAt: '2026-04-06T14:10:00',
+    updatedAt: '2026-04-07T11:00:00',
+    daysOpen: 2,
+    slaPercent: 50,
+    messageCount: 4,
+    lastMessagePreview: 'Le envío las opciones de cobertura para su grupo.',
+  },
+  {
+    id: 'SP-007',
+    subject: 'Mensaje ambiguo — "necesito ayuda con mi seguro"',
+    channel: 'whatsapp',
+    status: 'open',
+    priority: 'medium',
+    intentCategory: 'general',
+    routingTier: 'tier3_open',
+    routedQueue: 'open_pool',
+    customerId: null,
+    customerName: 'Número desconocido (+507 6234-5678)',
+    policyId: null,
+    policyNumber: null,
+    assignedTo: null,
+    createdAt: '2026-04-08T07:45:00',
+    updatedAt: '2026-04-08T07:45:00',
+    daysOpen: 0,
+    slaPercent: 15,
+    messageCount: 1,
+    lastMessagePreview: 'Hola buenos días, necesito ayuda con mi seguro, me pueden atender?',
+  },
+  {
+    id: 'SP-008',
+    subject: 'Endoso — agregar conductor a póliza auto',
+    channel: 'email',
+    status: 'in_progress',
+    priority: 'medium',
+    intentCategory: 'endorsement',
+    routingTier: 'tier2_rule',
+    routedQueue: 'operations',
+    customerId: 'cust-004',
+    customerName: 'Luis Andrés Solís Calderón',
+    policyId: 'POL-2022-2201',
+    policyNumber: 'AUTO-2022-2201',
+    assignedTo: 'Ana R.',
+    createdAt: '2026-04-05T09:00:00',
+    updatedAt: '2026-04-07T15:30:00',
+    daysOpen: 3,
+    slaPercent: 55,
+    messageCount: 5,
+    lastMessagePreview: 'Necesitamos la cédula y licencia del conductor adicional.',
+  },
+  {
+    id: 'SP-009',
+    subject: 'URGENTE — Choque frontal Toyota Hilux, requiere grúa',
+    channel: 'whatsapp',
+    status: 'open',
+    priority: 'urgent',
+    intentCategory: 'claim_report',
+    routingTier: 'tier1_auto',
+    routedQueue: 'claims',
+    customerId: 'cust-010',
+    customerName: 'Fernando Arias Blanco',
+    policyId: 'POL-2020-1100',
+    policyNumber: 'AUTO-2020-1100',
+    assignedTo: 'Carlos Villalba',
+    createdAt: '2026-04-08T06:15:00',
+    updatedAt: '2026-04-08T06:45:00',
+    daysOpen: 0,
+    slaPercent: 40,
+    messageCount: 4,
+    lastMessagePreview: 'Ya coordiné la grúa, llega en 20 minutos a tu ubicación.',
+  },
+  {
+    id: 'SP-010',
+    subject: 'Seguimiento renovación póliza vida — vence 30 abril',
+    channel: 'phone',
+    status: 'resolved',
+    priority: 'low',
+    intentCategory: 'policy_question',
+    routingTier: 'tier2_rule',
+    routedQueue: 'renewals',
+    customerId: 'cust-002',
+    customerName: 'Roberto Jiménez Mora',
+    policyId: 'POL-2023-3301',
+    policyNumber: 'AUTO-2023-3301',
+    assignedTo: 'María Fernanda Ortiz',
+    createdAt: '2026-04-03T16:00:00',
+    updatedAt: '2026-04-04T09:00:00',
+    daysOpen: 0,
+    slaPercent: 30,
+    messageCount: 3,
+    lastMessagePreview: 'Cliente confirmó renovación. Proceso completado.',
+  },
+]
+
+// ─── Mock Ticket Details ─────────────────────────────────────────────────────
+
+const sp001Detail: SupportTicketDetail = {
+  ...MOCK_SUPPORT_TICKETS[0],
+  customerEmail: 'maria.perez@gmail.com',
+  customerPhone: '+507 6123-4567',
+  linkedPolicies: [
+    { id: 'POL-2024-4412', number: 'AUTO-2024-4412', carrier: 'ASSA', lob: 'Auto', status: 'Active', renewal: '2027-03-15' },
+  ],
+  linkedClaims: [],
+  messages: [
+    { id: 'msg-001-1', type: 'whatsapp', direction: 'inbound', from: 'María Elena Pérez', to: null, subject: null, body: 'Hola buenas, tengo una consulta sobre mi pago. Me llegó un recibo pero ya hice la transferencia la semana pasada. Pueden verificar?', timestamp: '2026-04-01T09:15:00', aiDigest: 'Customer inquiring about payment status — claims transfer was already made.' },
+    { id: 'msg-001-2', type: 'system', direction: 'internal', from: 'Sistema', to: null, subject: null, body: 'Ticket creado automáticamente. Intent detectado: Consulta de Pago (92% confianza). Enrutado a Cobranza.', timestamp: '2026-04-01T09:15:05', aiDigest: null },
+    { id: 'msg-001-3', type: 'whatsapp', direction: 'outbound', from: 'Carlos Villalba', to: 'María Elena Pérez', subject: null, body: 'Buenos días María Elena! Déjame verificar con el departamento de cobranza. ¿Me puede compartir el comprobante de la transferencia?', timestamp: '2026-04-01T09:45:00', aiDigest: null, deliveryStatus: 'read' },
+    { id: 'msg-001-4', type: 'whatsapp', direction: 'inbound', from: 'María Elena Pérez', to: null, subject: null, body: 'Claro, aquí está el comprobante. Fue el 25 de marzo por $460.', timestamp: '2026-04-01T10:02:00', aiDigest: null },
+    { id: 'msg-001-5', type: 'internal_note', direction: 'internal', from: 'Carlos Villalba', to: null, subject: null, body: 'Verificado con contabilidad. Pago recibido el 26/03 — recibo cruzado con período anterior. Se ajusta en sistema.', timestamp: '2026-04-01T13:00:00', aiDigest: null },
+    { id: 'msg-001-6', type: 'whatsapp', direction: 'outbound', from: 'Carlos Villalba', to: 'María Elena Pérez', subject: null, body: 'Perfecto, ya quedó registrado el pago. Gracias María Elena. El recibo que le llegó era del mes anterior, ya se corrigió. Cualquier cosa me avisa!', timestamp: '2026-04-01T14:30:00', aiDigest: null, deliveryStatus: 'read' },
+  ],
+  aiSummary: 'Cliente consultó sobre un pago que ya había realizado. Se verificó con contabilidad que la transferencia fue recibida y el recibo cruzado con un período anterior fue corregido. Ticket resuelto satisfactoriamente.',
+  aiSuggestedIntent: 'payment_inquiry',
+  aiConfidence: 0.92,
+  routingTrace: [
+    { step: 'Channel Detection', result: 'WhatsApp — número registrado: +507 6123-4567', timestamp: '2026-04-01T09:15:01' },
+    { step: 'Customer Match', result: 'Matched: María Elena Pérez Solano (cust-001)', timestamp: '2026-04-01T09:15:02' },
+    { step: 'Intent Classification', result: 'payment_inquiry (92% confidence) — keywords: "pago", "recibo", "transferencia"', timestamp: '2026-04-01T09:15:03' },
+    { step: 'Rule Fired', result: 'Payment intent → Collections queue', timestamp: '2026-04-01T09:15:04' },
+    { step: 'Agent Assignment', result: 'Carlos Villalba (assigned broker for cust-001)', timestamp: '2026-04-01T09:15:05' },
+  ],
+}
+
+const sp002Detail: SupportTicketDetail = {
+  ...MOCK_SUPPORT_TICKETS[1],
+  customerEmail: 'luis.solis@outlook.com',
+  customerPhone: '+507 6555-1234',
+  linkedPolicies: [
+    { id: 'POL-2022-2200', number: 'AUTO-2022-2200', carrier: 'Qualitas', lob: 'Auto', status: 'Active', renewal: '2027-01-15' },
+    { id: 'POL-2022-2201', number: 'AUTO-2022-2201', carrier: 'Qualitas', lob: 'Auto', status: 'Active', renewal: '2027-01-15' },
+  ],
+  linkedClaims: [
+    { id: 'CLM-0048', type: 'Collision', status: 'Under Review' },
+  ],
+  messages: [
+    { id: 'msg-002-1', type: 'email', direction: 'inbound', from: 'luis.solis@outlook.com', to: 'soporte@seguros.com', subject: 'Reporte de accidente — BMW X5 SJO-2200', body: 'Estimados, les informo que tuve un accidente vehicular el día de hoy en la autopista Próspero Fernández. Mi vehículo BMW X5 placas SJO-2200 sufrió daños frontales tras una colisión. Adjunto fotos del daño. Por favor indiquen los pasos a seguir para el reclamo.', timestamp: '2026-04-03T11:22:00', aiDigest: 'Customer reporting vehicle collision on Próspero Fernández highway. BMW X5, front damage. Requesting claim process guidance.' },
+    { id: 'msg-002-2', type: 'system', direction: 'internal', from: 'Sistema', to: null, subject: null, body: 'Ticket creado. Intent: claim_report (97%). Enrutado a Siniestros. Claim CLM-0048 vinculado automáticamente.', timestamp: '2026-04-03T11:22:10', aiDigest: null },
+    { id: 'msg-002-3', type: 'email', direction: 'outbound', from: 'maria.ortiz@seguros.com', to: 'luis.solis@outlook.com', subject: 'Re: Reporte de accidente — BMW X5 SJO-2200', body: 'Estimado Luis, lamentamos mucho el accidente. Ya creamos su reclamo bajo el número CLM-0048. Necesitamos:\n\n1. Parte policial (si aplica)\n2. Fotos adicionales del otro vehículo\n3. Datos del otro conductor\n\nQuedo atenta.', timestamp: '2026-04-03T14:00:00', aiDigest: null },
+    { id: 'msg-002-4', type: 'internal_note', direction: 'internal', from: 'María Fernanda Ortiz', to: null, subject: null, body: 'Cliente VIP — 2 pólizas activas, $5,800/yr premium. Priorizar este caso. Contactar ajustador para inspección rápida.', timestamp: '2026-04-04T08:30:00', aiDigest: null },
+    { id: 'msg-002-5', type: 'email', direction: 'inbound', from: 'luis.solis@outlook.com', to: 'soporte@seguros.com', subject: 'Re: Reporte de accidente — BMW X5 SJO-2200', body: 'Adjunto las fotos del daño al vehículo tomadas esta mañana. El parte policial lo tengo listo para mañana. El otro conductor no quiso dar sus datos, pero tengo la placa.', timestamp: '2026-04-07T16:45:00', aiDigest: null },
+  ],
+  aiSummary: 'Accidente vehicular reportado por correo. BMW X5, daños frontales por colisión en autopista. Claim CLM-0048 creado y vinculado. Pendiente: parte policial y datos del otro conductor. Cliente VIP con 2 pólizas — priorizar.',
+  aiSuggestedIntent: 'claim_report',
+  aiConfidence: 0.97,
+  routingTrace: [
+    { step: 'Channel Detection', result: 'Email — luis.solis@outlook.com', timestamp: '2026-04-03T11:22:01' },
+    { step: 'Customer Match', result: 'Matched: Luis Andrés Solís Calderón (cust-004)', timestamp: '2026-04-03T11:22:02' },
+    { step: 'Intent Classification', result: 'claim_report (97%) — keywords: "accidente", "daños", "colisión", "reclamo"', timestamp: '2026-04-03T11:22:03' },
+    { step: 'Rule Fired', result: 'Claim intent → Claims queue', timestamp: '2026-04-03T11:22:04' },
+    { step: 'Policy Link', result: 'Auto-linked POL-2022-2200 (BMW X5, matching plate SJO-2200)', timestamp: '2026-04-03T11:22:05' },
+  ],
+}
+
+const sp003Detail: SupportTicketDetail = {
+  ...MOCK_SUPPORT_TICKETS[2],
+  customerEmail: 'roberto.jimenez@gmail.com',
+  customerPhone: '+507 6222-8899',
+  linkedPolicies: [
+    { id: 'POL-2023-3301', number: 'AUTO-2023-3301', carrier: 'Qualitas', lob: 'Auto', status: 'Active', renewal: '2027-04-01' },
+  ],
+  linkedClaims: [],
+  messages: [
+    { id: 'msg-003-1', type: 'phone_note', direction: 'inbound', from: 'Roberto Jiménez Mora', to: null, subject: null, body: 'Cliente se presentó en oficina solicitando certificado de seguro vigente para trámite bancario. Necesita documento hoy.', timestamp: '2026-04-04T10:00:00', aiDigest: null },
+    { id: 'msg-003-2', type: 'system', direction: 'internal', from: 'Sistema', to: null, subject: null, body: 'Cliente conocido (cust-002). Tier 1 auto-route: solicitud de certificado → Operaciones. Auto-fulfill iniciado.', timestamp: '2026-04-04T10:00:05', aiDigest: null },
+    { id: 'msg-003-3', type: 'internal_note', direction: 'internal', from: 'Ana R.', to: null, subject: null, body: 'Certificado generado y entregado en mano. Cliente satisfecho. Ticket cerrado.', timestamp: '2026-04-04T10:35:00', aiDigest: null },
+  ],
+  aiSummary: 'Solicitud de certificado de seguro vigente para trámite bancario. Cliente conocido, auto-enrutado a operaciones. Certificado generado y entregado presencialmente en 35 minutos.',
+  aiSuggestedIntent: 'certificate_request',
+  aiConfidence: 0.99,
+  routingTrace: [
+    { step: 'Walk-in Registration', result: 'Registered by front desk', timestamp: '2026-04-04T10:00:01' },
+    { step: 'Customer Match', result: 'Matched: Roberto Jiménez Mora (cust-002)', timestamp: '2026-04-04T10:00:02' },
+    { step: 'Intent Classification', result: 'certificate_request (99%) — direct request', timestamp: '2026-04-04T10:00:03' },
+    { step: 'Tier 1 Auto-Fulfill', result: 'Certificate generation triggered for POL-2023-3301', timestamp: '2026-04-04T10:00:05' },
+  ],
+}
+
+const sp004Detail: SupportTicketDetail = {
+  ...MOCK_SUPPORT_TICKETS[3],
+  customerEmail: null,
+  customerPhone: '+507 6789-0123',
+  linkedPolicies: [],
+  linkedClaims: [],
+  messages: [
+    { id: 'msg-004-1', type: 'whatsapp', direction: 'inbound', from: '+507 6789-0123', to: null, subject: null, body: 'Buenas, cuánto sale un seguro todo riesgo para un BMW X3 2025? Nuevo, recién importado.', timestamp: '2026-04-07T08:30:00', aiDigest: 'Unknown number asking for comprehensive auto insurance quote for new BMW X3 2025.' },
+    { id: 'msg-004-2', type: 'system', direction: 'internal', from: 'Sistema', to: null, subject: null, body: 'Número no registrado. Intent: sales_interest (89%). Enrutado a Ventas.', timestamp: '2026-04-07T08:30:05', aiDigest: null },
+    { id: 'msg-004-3', type: 'whatsapp', direction: 'outbound', from: 'María Fernanda Ortiz', to: '+507 6789-0123', subject: null, body: 'Buenos días! Con gusto le cotizamos. Para darle las mejores opciones necesito:\n\n1. Nombre completo\n2. Cédula o pasaporte\n3. Valor del vehículo según factura\n4. Uso (particular o comercial)\n\nQuedo atenta!', timestamp: '2026-04-07T09:15:00', aiDigest: null, deliveryStatus: 'delivered' },
+  ],
+  aiSummary: 'Lead entrante vía WhatsApp — persona desconocida consultando precio de seguro todo riesgo para BMW X3 2025 nuevo. Asignado a ventas. Pendiente respuesta del prospecto con datos personales.',
+  aiSuggestedIntent: 'sales_interest',
+  aiConfidence: 0.89,
+  routingTrace: [
+    { step: 'Channel Detection', result: 'WhatsApp — +507 6789-0123', timestamp: '2026-04-07T08:30:01' },
+    { step: 'Customer Match', result: 'No match — unknown number', timestamp: '2026-04-07T08:30:02' },
+    { step: 'Intent Classification', result: 'sales_interest (89%) — keywords: "cuánto sale", "seguro todo riesgo", "nuevo"', timestamp: '2026-04-07T08:30:03' },
+    { step: 'Rule Fired', result: 'Sales intent → Sales queue', timestamp: '2026-04-07T08:30:04' },
+  ],
+}
+
+const sp005Detail: SupportTicketDetail = {
+  ...MOCK_SUPPORT_TICKETS[4],
+  customerEmail: 'maria.perez@gmail.com',
+  customerPhone: '+507 6123-4567',
+  linkedPolicies: [
+    { id: 'POL-2024-4412', number: 'AUTO-2024-4412', carrier: 'ASSA', lob: 'Auto', status: 'Active', renewal: '2027-03-15' },
+  ],
+  linkedClaims: [
+    { id: 'CLM-0048', type: 'Collision', status: 'Under Review' },
+  ],
+  messages: [
+    { id: 'msg-005-1', type: 'email', direction: 'inbound', from: 'maria.perez@gmail.com', to: 'soporte@seguros.com', subject: 'QUEJA — demora inaceptable en siniestro CLM-0048', body: 'Estimados, llevo más de 3 semanas esperando respuesta sobre mi siniestro CLM-0048. He llamado varias veces y nadie me da una respuesta clara. Esto es inaceptable. Necesito que alguien con autoridad me contacte hoy mismo o procederé con una queja formal ante la Superintendencia.', timestamp: '2026-04-02T15:00:00', aiDigest: 'Frustrated customer filing formal complaint about claim CLM-0048 delays. Threatening regulatory escalation.' },
+    { id: 'msg-005-2', type: 'system', direction: 'internal', from: 'Sistema', to: null, subject: null, body: 'Intent ambiguo: complaint (76%) / claim_report (18%). No cumple regla de enrutamiento directo. Enviado a Pool Abierto.', timestamp: '2026-04-02T15:00:05', aiDigest: null },
+    { id: 'msg-005-3', type: 'internal_note', direction: 'internal', from: 'Carlos Villalba', to: null, subject: null, body: 'Asigno este ticket a mí. Conozco a la clienta — tiene razón, el claim lleva demasiado tiempo. Voy a escalar con el ajustador de ASSA directamente.', timestamp: '2026-04-02T16:30:00', aiDigest: null },
+    { id: 'msg-005-4', type: 'email', direction: 'outbound', from: 'carlos.villalba@seguros.com', to: 'maria.perez@gmail.com', subject: 'Re: QUEJA — demora inaceptable en siniestro CLM-0048', body: 'Estimada María Elena, le pido disculpas sinceras por la demora. He escalado personalmente su caso con el ajustador de ASSA y tenemos reunión mañana a primera hora. Le daré un update antes del mediodía del viernes. Entiendo su frustración y estoy comprometido a resolverlo.', timestamp: '2026-04-02T17:00:00', aiDigest: null },
+    { id: 'msg-005-5', type: 'internal_note', direction: 'internal', from: 'Carlos Villalba', to: null, subject: null, body: 'Reunión con ajustador ASSA — dicen que falta un documento del taller. Ya lo solicité. Debería llegar mañana.', timestamp: '2026-04-04T10:00:00', aiDigest: null },
+    { id: 'msg-005-6', type: 'email', direction: 'outbound', from: 'carlos.villalba@seguros.com', to: 'maria.perez@gmail.com', subject: 'Re: QUEJA — Actualización siniestro CLM-0048', body: 'María Elena, actualización: ASSA necesita un documento adicional del taller donde se hizo la reparación. ¿Podría solicitarle al taller el presupuesto final firmado y sellado? Con eso podemos cerrar la revisión esta semana.', timestamp: '2026-04-04T14:00:00', aiDigest: null },
+    { id: 'msg-005-7', type: 'email', direction: 'outbound', from: 'carlos.villalba@seguros.com', to: 'maria.perez@gmail.com', subject: 'Re: QUEJA — Seguimiento documentos pendientes', body: 'Hola María Elena, solo un seguimiento amable — estamos pendientes de su respuesta con los documentos adicionales del taller para avanzar con ASSA. Quedo a la orden.', timestamp: '2026-04-06T09:20:00', aiDigest: null },
+  ],
+  aiSummary: 'Queja formal por demora en siniestro CLM-0048 (colisión). Cliente amenaza con escalar a Superintendencia. Broker Carlos Villalba se asignó y escaló con ajustador ASSA. Pendiente: documento del taller (presupuesto firmado) para cerrar revisión. Estado: esperando respuesta del cliente.',
+  aiSuggestedIntent: 'complaint',
+  aiConfidence: 0.76,
+  routingTrace: [
+    { step: 'Channel Detection', result: 'Email — maria.perez@gmail.com', timestamp: '2026-04-02T15:00:01' },
+    { step: 'Customer Match', result: 'Matched: María Elena Pérez Solano (cust-001)', timestamp: '2026-04-02T15:00:02' },
+    { step: 'Intent Classification', result: 'Ambiguous — complaint (76%), claim_report (18%)', timestamp: '2026-04-02T15:00:03' },
+    { step: 'No Rule Match', result: 'Confidence below threshold for auto-routing', timestamp: '2026-04-02T15:00:04' },
+    { step: 'Routed to Open Pool', result: 'Tier 3 — awaiting manual triage', timestamp: '2026-04-02T15:00:05' },
+  ],
+}
+
+const sp006Detail: SupportTicketDetail = {
+  ...MOCK_SUPPORT_TICKETS[5],
+  customerEmail: 'fernando.arias@transportesnorte.cr',
+  customerPhone: '+507 6888-4444',
+  linkedPolicies: [
+    { id: 'POL-2020-1100', number: 'AUTO-2020-1100', carrier: 'INS', lob: 'Auto', status: 'Active', renewal: '2026-12-15' },
+    { id: 'POL-2021-2200', number: 'HOME-2021-2200', carrier: 'ASSA', lob: 'Home', status: 'Lapsed', renewal: '—' },
+  ],
+  linkedClaims: [],
+  messages: [
+    { id: 'msg-006-1', type: 'email', direction: 'inbound', from: 'fernando.arias@transportesnorte.cr', to: 'soporte@seguros.com', subject: 'Consulta — plan salud colectivo para nuestro grupo', body: 'Buenos días, soy Fernando Arias de Transportes del Norte. Quiero explorar opciones de seguro de salud colectivo para nuestros empleados (aprox 50 personas). ¿Qué opciones tienen disponibles y cuál sería el proceso?', timestamp: '2026-04-06T14:10:00', aiDigest: 'Existing corporate customer inquiring about group health insurance for ~50 employees.' },
+    { id: 'msg-006-2', type: 'system', direction: 'internal', from: 'Sistema', to: null, subject: null, body: 'Cliente conocido (cust-010). Web form con LOB=Health. Tier 1: auto-routed a broker asignado (Ana R.).', timestamp: '2026-04-06T14:10:05', aiDigest: null },
+    { id: 'msg-006-3', type: 'email', direction: 'outbound', from: 'ana.r@seguros.com', to: 'fernando.arias@transportesnorte.cr', subject: 'Re: Consulta — plan salud colectivo', body: 'Estimado Fernando, qué gusto saludarlo! Con mucho gusto le ayudamos con el plan colectivo de salud. Tenemos opciones con Vida Plena, Salud Global e Integral Medical. Le envío las opciones de cobertura para su grupo con los detalles de cada plan.', timestamp: '2026-04-06T16:00:00', aiDigest: null },
+    { id: 'msg-006-4', type: 'internal_note', direction: 'internal', from: 'Ana R.', to: null, subject: null, body: 'Cliente ya tiene 2 pólizas (1 activa auto, 1 lapsed home). Oportunidad de cross-sell. Preparar propuesta colectiva con las 3 aseguradoras de salud.', timestamp: '2026-04-07T11:00:00', aiDigest: null },
+  ],
+  aiSummary: 'Cliente corporativo existente (Transportes del Norte) consultando sobre plan de salud colectivo para ~50 empleados. Auto-enrutado por Tier 1 a broker asignado. Oportunidad de cross-sell identificada — ya tiene póliza auto activa.',
+  aiSuggestedIntent: 'policy_question',
+  aiConfidence: 0.85,
+  routingTrace: [
+    { step: 'Channel Detection', result: 'Web Form — LOB: Health', timestamp: '2026-04-06T14:10:01' },
+    { step: 'Customer Match', result: 'Matched: Fernando Arias Blanco (cust-010)', timestamp: '2026-04-06T14:10:02' },
+    { step: 'Tier 1 Auto-Route', result: 'Known customer + LOB form → assigned broker', timestamp: '2026-04-06T14:10:03' },
+    { step: 'Agent Assignment', result: 'Ana R. (assigned broker for cust-010)', timestamp: '2026-04-06T14:10:05' },
+  ],
+}
+
+const sp007Detail: SupportTicketDetail = {
+  ...MOCK_SUPPORT_TICKETS[6],
+  customerEmail: null,
+  customerPhone: '+507 6234-5678',
+  linkedPolicies: [],
+  linkedClaims: [],
+  messages: [
+    { id: 'msg-007-1', type: 'whatsapp', direction: 'inbound', from: '+507 6234-5678', to: null, subject: null, body: 'Hola buenos días, necesito ayuda con mi seguro, me pueden atender?', timestamp: '2026-04-08T07:45:00', aiDigest: 'Ambiguous request — "need help with my insurance". No specific intent detectable. Unknown customer.' },
+  ],
+  aiSummary: 'Mensaje ambiguo de número desconocido. No se puede determinar intención específica. Requiere triage manual por operador del pool abierto.',
+  aiSuggestedIntent: 'general',
+  aiConfidence: 0.34,
+  routingTrace: [
+    { step: 'Channel Detection', result: 'WhatsApp — +507 6234-5678', timestamp: '2026-04-08T07:45:01' },
+    { step: 'Customer Match', result: 'No match — unknown number', timestamp: '2026-04-08T07:45:02' },
+    { step: 'Intent Classification', result: 'Ambiguous — general (34%), policy_question (28%), sales_interest (22%)', timestamp: '2026-04-08T07:45:03' },
+    { step: 'No Rule Match', result: 'Low confidence across all intents', timestamp: '2026-04-08T07:45:04' },
+    { step: 'Routed to Open Pool', result: 'Tier 3 — unassigned, awaiting manual triage', timestamp: '2026-04-08T07:45:05' },
+  ],
+}
+
+const sp008Detail: SupportTicketDetail = {
+  ...MOCK_SUPPORT_TICKETS[7],
+  customerEmail: 'luis.solis@outlook.com',
+  customerPhone: '+507 6555-1234',
+  linkedPolicies: [
+    { id: 'POL-2022-2201', number: 'AUTO-2022-2201', carrier: 'Qualitas', lob: 'Auto', status: 'Active', renewal: '2027-01-15' },
+  ],
+  linkedClaims: [],
+  messages: [
+    { id: 'msg-008-1', type: 'email', direction: 'inbound', from: 'luis.solis@outlook.com', to: 'soporte@seguros.com', subject: 'Agregar conductor adicional a póliza AUTO-2022-2201', body: 'Estimados, necesito agregar a mi esposa como conductor adicional en mi póliza AUTO-2022-2201 (Mercedes GLC). ¿Qué documentos necesitan y cuál es el costo adicional?', timestamp: '2026-04-05T09:00:00', aiDigest: 'Customer requesting driver addition endorsement to auto policy. Asking about requirements and cost.' },
+    { id: 'msg-008-2', type: 'system', direction: 'internal', from: 'Sistema', to: null, subject: null, body: 'Intent: endorsement (94%). Enrutado a Operaciones.', timestamp: '2026-04-05T09:00:05', aiDigest: null },
+    { id: 'msg-008-3', type: 'email', direction: 'outbound', from: 'ana.r@seguros.com', to: 'luis.solis@outlook.com', subject: 'Re: Agregar conductor adicional a póliza AUTO-2022-2201', body: 'Estimado Luis, con gusto procesamos el endoso. Necesitamos:\n\n1. Cédula de su esposa (copia)\n2. Licencia de conducir vigente (copia)\n3. Fecha de nacimiento\n\nEl costo adicional depende del perfil — generalmente entre $50-$120/año. Le confirmo el monto exacto una vez tenga los documentos.', timestamp: '2026-04-05T11:30:00', aiDigest: null },
+    { id: 'msg-008-4', type: 'email', direction: 'inbound', from: 'luis.solis@outlook.com', to: 'soporte@seguros.com', subject: 'Re: Agregar conductor adicional', body: 'Adjunto cédula y licencia de mi esposa Carolina Méndez de Solís. Su fecha de nacimiento es 15 de mayo de 1988.', timestamp: '2026-04-06T14:00:00', aiDigest: null },
+    { id: 'msg-008-5', type: 'internal_note', direction: 'internal', from: 'Ana R.', to: null, subject: null, body: 'Documentos recibidos. Solicitando cotización de endoso a Qualitas. Pendiente respuesta del carrier para confirmar monto.', timestamp: '2026-04-07T15:30:00', aiDigest: null },
+  ],
+  aiSummary: 'Solicitud de endoso para agregar conductor adicional (esposa) a póliza auto Mercedes GLC. Documentos recibidos (cédula + licencia). Pendiente cotización del carrier Qualitas para confirmar costo adicional.',
+  aiSuggestedIntent: 'endorsement',
+  aiConfidence: 0.94,
+  routingTrace: [
+    { step: 'Channel Detection', result: 'Email — luis.solis@outlook.com', timestamp: '2026-04-05T09:00:01' },
+    { step: 'Customer Match', result: 'Matched: Luis Andrés Solís Calderón (cust-004)', timestamp: '2026-04-05T09:00:02' },
+    { step: 'Intent Classification', result: 'endorsement (94%) — keywords: "agregar", "conductor adicional", "endoso"', timestamp: '2026-04-05T09:00:03' },
+    { step: 'Rule Fired', result: 'Endorsement intent → Operations queue', timestamp: '2026-04-05T09:00:04' },
+  ],
+}
+
+const sp009Detail: SupportTicketDetail = {
+  ...MOCK_SUPPORT_TICKETS[8],
+  customerEmail: 'fernando.arias@transportesnorte.cr',
+  customerPhone: '+507 6888-4444',
+  linkedPolicies: [
+    { id: 'POL-2020-1100', number: 'AUTO-2020-1100', carrier: 'INS', lob: 'Auto', status: 'Active', renewal: '2026-12-15' },
+  ],
+  linkedClaims: [],
+  messages: [
+    { id: 'msg-009-1', type: 'whatsapp', direction: 'inbound', from: 'Fernando Arias', to: null, subject: null, body: 'URGENTE Carlos!! Acabo de tener un choque frontal con la Hilux en la vía Interamericana. El carro no enciende y necesito grúa YA. Estoy en el km 42 dirección David.', timestamp: '2026-04-08T06:15:00', aiDigest: 'URGENT: Known customer reporting front collision with Toyota Hilux. Vehicle disabled, requesting tow truck. Location: km 42 Interamericana highway.' },
+    { id: 'msg-009-2', type: 'system', direction: 'internal', from: 'Sistema', to: null, subject: null, body: 'URGENTE — Cliente conocido (cust-010). Intent: claim_report (99%). Tier 1 auto-route a broker asignado. Prioridad: URGENTE.', timestamp: '2026-04-08T06:15:05', aiDigest: null },
+    { id: 'msg-009-3', type: 'whatsapp', direction: 'outbound', from: 'Carlos Villalba', to: 'Fernando Arias', subject: null, body: 'Fernando tranquilo, ya estoy en eso. ¿Estás bien? ¿Hay heridos? Voy a coordinar la grúa ahora mismo.', timestamp: '2026-04-08T06:20:00', aiDigest: null, deliveryStatus: 'read' },
+    { id: 'msg-009-4', type: 'whatsapp', direction: 'outbound', from: 'Carlos Villalba', to: 'Fernando Arias', subject: null, body: 'Ya coordiné la grúa, llega en 20 minutos a tu ubicación. INS tiene cobertura de asistencia en carretera incluida en tu póliza. ¿Necesitas que llame a alguien más?', timestamp: '2026-04-08T06:45:00', aiDigest: null, deliveryStatus: 'delivered' },
+  ],
+  aiSummary: 'Emergencia: choque frontal con Toyota Hilux en vía Interamericana km 42. Vehículo inhabilitado. Broker coordinó grúa inmediatamente (20 min ETA). Asistencia en carretera cubierta por póliza INS. Pendiente: confirmar estado del conductor y crear claim formal.',
+  aiSuggestedIntent: 'claim_report',
+  aiConfidence: 0.99,
+  routingTrace: [
+    { step: 'Channel Detection', result: 'WhatsApp — +507 6888-4444 (Fernando Arias)', timestamp: '2026-04-08T06:15:01' },
+    { step: 'Customer Match', result: 'Matched: Fernando Arias Blanco (cust-010)', timestamp: '2026-04-08T06:15:02' },
+    { step: 'Intent Classification', result: 'claim_report (99%) — keywords: "choque", "grúa", "URGENTE"', timestamp: '2026-04-08T06:15:03' },
+    { step: 'Priority Escalation', result: 'Auto-set URGENT — emergency keywords detected', timestamp: '2026-04-08T06:15:04' },
+    { step: 'Tier 1 Auto-Route', result: 'Known customer → assigned broker Carlos Villalba', timestamp: '2026-04-08T06:15:05' },
+  ],
+}
+
+const sp010Detail: SupportTicketDetail = {
+  ...MOCK_SUPPORT_TICKETS[9],
+  customerEmail: 'roberto.jimenez@gmail.com',
+  customerPhone: '+507 6222-8899',
+  linkedPolicies: [
+    { id: 'POL-2023-3301', number: 'AUTO-2023-3301', carrier: 'Qualitas', lob: 'Auto', status: 'Active', renewal: '2027-04-01' },
+  ],
+  linkedClaims: [],
+  messages: [
+    { id: 'msg-010-1', type: 'phone_note', direction: 'inbound', from: 'Roberto Jiménez Mora', to: null, subject: null, body: 'Cliente llamó consultando sobre su renovación que vence el 30 de abril. Quiere saber si hay cambio en prima y si puede agregar cobertura de robo.', timestamp: '2026-04-03T16:00:00', aiDigest: 'Customer calling about upcoming renewal (Apr 30). Asking about premium changes and adding theft coverage.' },
+    { id: 'msg-010-2', type: 'system', direction: 'internal', from: 'Sistema', to: null, subject: null, body: 'Intent: policy_question (78%) / sales_interest (15%). Keyword "renovación" → Renewals queue.', timestamp: '2026-04-03T16:00:05', aiDigest: null },
+    { id: 'msg-010-3', type: 'internal_note', direction: 'internal', from: 'María Fernanda Ortiz', to: null, subject: null, body: 'Cliente confirmó renovación con cobertura adicional de robo. Prima aumenta $180/año. Proceso completado — renovación efectiva 1 mayo 2027.', timestamp: '2026-04-04T09:00:00', aiDigest: null },
+  ],
+  aiSummary: 'Seguimiento telefónico sobre renovación próxima (30 abril). Cliente confirmó renovación con adición de cobertura de robo (+$180/año). Proceso completado.',
+  aiSuggestedIntent: 'policy_question',
+  aiConfidence: 0.78,
+  routingTrace: [
+    { step: 'Channel Detection', result: 'Phone call logged', timestamp: '2026-04-03T16:00:01' },
+    { step: 'Customer Match', result: 'Matched: Roberto Jiménez Mora (cust-002)', timestamp: '2026-04-03T16:00:02' },
+    { step: 'Intent Classification', result: 'policy_question (78%) — keyword: "renovación"', timestamp: '2026-04-03T16:00:03' },
+    { step: 'Rule Fired', result: 'Renewal keyword → Renewals queue', timestamp: '2026-04-03T16:00:04' },
+  ],
+}
+
+export const MOCK_TICKET_DETAILS: Record<string, SupportTicketDetail> = {
+  'SP-001': sp001Detail,
+  'SP-002': sp002Detail,
+  'SP-003': sp003Detail,
+  'SP-004': sp004Detail,
+  'SP-005': sp005Detail,
+  'SP-006': sp006Detail,
+  'SP-007': sp007Detail,
+  'SP-008': sp008Detail,
+  'SP-009': sp009Detail,
+  'SP-010': sp010Detail,
+}
+
+// ─── Mock Routing Rules ──────────────────────────────────────────────────────
+
+export const MOCK_ROUTING_RULES: RoutingRule[] = [
+  // Tier 1
+  { id: 'rule-001', tier: 'tier1_auto', type: 'customer_match', name: 'Known Customer → Assigned Broker', condition: 'When incoming message matches a registered customer, route to their assigned broker', targetQueue: 'operations', targetAgent: null, enabled: true, priority: 1 },
+  { id: 'rule-002', tier: 'tier1_auto', type: 'lob_specialist', name: 'Web Form LOB → Specialist', condition: 'Web form with LOB selected routes to LOB specialist team', targetQueue: 'operations', targetAgent: null, enabled: true, priority: 2 },
+  { id: 'rule-003', tier: 'tier1_auto', type: 'doc_auto_fulfill', name: 'Certificate Auto-Fulfill', condition: 'Certificate requests from known customers auto-generate and deliver', targetQueue: 'operations', targetAgent: null, enabled: true, priority: 3 },
+  // Tier 2
+  { id: 'rule-004', tier: 'tier2_rule', type: 'keyword_intent', name: 'Payment Keywords → Collections', condition: 'Keywords: pago, factura, cobro, recibo, transferencia, mora', targetQueue: 'collections', targetAgent: null, enabled: true, priority: 10 },
+  { id: 'rule-005', tier: 'tier2_rule', type: 'keyword_intent', name: 'Claim Keywords → Claims', condition: 'Keywords: siniestro, accidente, robo, daño, choque, grúa, colisión', targetQueue: 'claims', targetAgent: null, enabled: true, priority: 11 },
+  { id: 'rule-006', tier: 'tier2_rule', type: 'keyword_intent', name: 'Sales Keywords → Sales', condition: 'Keywords: cotización, seguro nuevo, precio, cuánto sale, cobertura', targetQueue: 'sales', targetAgent: null, enabled: true, priority: 12 },
+  { id: 'rule-007', tier: 'tier2_rule', type: 'keyword_intent', name: 'Renewal Keywords → Renewals', condition: 'Keywords: renovación, vencimiento, prórroga, vigencia', targetQueue: 'renewals', targetAgent: null, enabled: true, priority: 13 },
+  { id: 'rule-008', tier: 'tier2_rule', type: 'keyword_intent', name: 'Endorsement Keywords → Operations', condition: 'Keywords: endoso, agregar, modificar, cambio de beneficiario', targetQueue: 'operations', targetAgent: null, enabled: true, priority: 14 },
+]
diff --git a/app/data/pdf-field-mappings.json b/app/data/pdf-field-mappings.json
new file mode 100644
index 0000000..bd6f557
--- /dev/null
+++ b/app/data/pdf-field-mappings.json
@@ -0,0 +1,20 @@
+{
+  "version": 1,
+  "mappings": [
+    {
+      "catalogFormId": 33,
+      "fields": {
+        "full_name": "txtNombreCompleto",
+        "document_id": "txtCedula"
+      }
+    },
+    {
+      "catalogFormId": 39,
+      "fields": {
+        "plate": "txtPlaca",
+        "vin": "txtChasis",
+        "declared_value": "numValor"
+      }
+    }
+  ]
+}
diff --git a/app/data/quotes-overview.mock.ts b/app/data/quotes-overview.mock.ts
new file mode 100644
index 0000000..44b5ff6
--- /dev/null
+++ b/app/data/quotes-overview.mock.ts
@@ -0,0 +1,214 @@
+/**
+ * Mock pipeline data for Quotes overview (mission control). Replace with API when ready.
+ */
+
+export type QuotePipelineScopeFilter = 'global' | 'corporate' | 'personal'
+
+export type QuoteOverviewLob = 'auto' | 'health' | 'life' | 'general_risk' | 'custom'
+
+export type QuotePipelineStageId = 'intake' | 'quoted' | 'proposal' | 'bind' | 'handoff'
+
+/**
+ * Unified pipeline stage IDs — mirrors PipelineStage from useSalesPipeline.
+ * Used by the quotes overview kanban so both views share one vocabulary.
+ */
+export type UnifiedStageId =
+  | 'customer'
+  | 'get_quotes'
+  | 'waiting_carriers'
+  | 'present_quotes'
+  | 'waiting_client'
+  | 'solicitud'
+  | 'emission'
+
+export type MockPipelineQuote = {
+  id: string
+  customerLabel: string
+  /** Corporate vs personal — drives pipeline scope filters */
+  party: 'corporate' | 'personal'
+  lob: QuoteOverviewLob
+  /** Sub-path: single, comparativo, fleet, collective, etc. */
+  pathLabel: string
+  stage: QuotePipelineStageId
+  /** Unified pipeline stage — same vocabulary as sales pipeline */
+  unifiedStage: UnifiedStageId
+  owner: string
+  formsDone: number
+  formsTotal: number
+  /** Customer has been notified / has portal activity (mock) */
+  customerInformed: boolean
+}
+
+export const QUOTE_PIPELINE_STAGES: { id: QuotePipelineStageId; label: string; hint: string }[] = [
+  { id: 'intake', label: 'Customer Profile', hint: 'Qualify & rate inputs' },
+  { id: 'quoted', label: 'Quote Prep', hint: 'Options with carrier' },
+  { id: 'proposal', label: 'Acceptance Pending', hint: 'Out to customer' },
+  { id: 'bind', label: 'Emission Pending', hint: 'Submit & conditions' },
+  { id: 'handoff', label: 'Going Live!', hint: 'Policy / solicitud' }
+]
+
+/** Unified pipeline stages — same as sales pipeline. Used in overview chart. */
+export const UNIFIED_PIPELINE_STAGES: { id: UnifiedStageId; label: string; isWaiting: boolean }[] = [
+  { id: 'customer', label: 'Customer', isWaiting: false },
+  { id: 'get_quotes', label: 'Get Quotes', isWaiting: false },
+  { id: 'waiting_carriers', label: 'Awaiting Carriers', isWaiting: true },
+  { id: 'present_quotes', label: 'Present Quotes', isWaiting: false },
+  { id: 'waiting_client', label: 'Awaiting Client', isWaiting: true },
+  { id: 'solicitud', label: 'Solicitud', isWaiting: false },
+  { id: 'emission', label: 'Emission', isWaiting: false },
+]
+
+export const QUOTE_LOB_OPTIONS: { value: QuoteOverviewLob | 'all'; label: string }[] = [
+  { value: 'all', label: 'All lines' },
+  { value: 'auto', label: 'Auto' },
+  { value: 'health', label: 'Health' },
+  { value: 'life', label: 'Life' },
+  { value: 'general_risk', label: 'General risk' },
+  { value: 'custom', label: 'Custom' }
+]
+
+export const MOCK_PIPELINE_QUOTES: MockPipelineQuote[] = [
+  {
+    id: 'q-101',
+    customerLabel: 'Transportes Delta S.A.',
+    party: 'corporate',
+    lob: 'auto',
+    pathLabel: 'Fleet',
+    stage: 'quoted',
+    unifiedStage: 'waiting_carriers',
+    owner: 'A. Morales',
+    formsDone: 2,
+    formsTotal: 5,
+    customerInformed: true
+  },
+  {
+    id: 'q-102',
+    customerLabel: 'María Fernández',
+    party: 'personal',
+    lob: 'auto',
+    pathLabel: 'Comparativo',
+    stage: 'proposal',
+    unifiedStage: 'present_quotes',
+    owner: 'L. Chen',
+    formsDone: 4,
+    formsTotal: 4,
+    customerInformed: true
+  },
+  {
+    id: 'q-103',
+    customerLabel: 'J. Pérez',
+    party: 'personal',
+    lob: 'auto',
+    pathLabel: 'Single',
+    stage: 'intake',
+    unifiedStage: 'customer',
+    owner: 'L. Chen',
+    formsDone: 0,
+    formsTotal: 3,
+    customerInformed: false
+  },
+  {
+    id: 'q-201',
+    customerLabel: 'Clínica Norte',
+    party: 'corporate',
+    lob: 'health',
+    pathLabel: 'Collective',
+    stage: 'bind',
+    unifiedStage: 'solicitud',
+    owner: 'R. Vega',
+    formsDone: 6,
+    formsTotal: 8,
+    customerInformed: true
+  },
+  {
+    id: 'q-202',
+    customerLabel: 'Familia Ortega',
+    party: 'personal',
+    lob: 'health',
+    pathLabel: 'Family',
+    stage: 'quoted',
+    unifiedStage: 'get_quotes',
+    owner: 'A. Morales',
+    formsDone: 3,
+    formsTotal: 6,
+    customerInformed: true
+  },
+  {
+    id: 'q-203',
+    customerLabel: 'Startup Labs',
+    party: 'corporate',
+    lob: 'health',
+    pathLabel: 'Travel',
+    stage: 'intake',
+    unifiedStage: 'customer',
+    owner: 'R. Vega',
+    formsDone: 1,
+    formsTotal: 4,
+    customerInformed: false
+  },
+  {
+    id: 'q-301',
+    customerLabel: 'Holdings Centro',
+    party: 'corporate',
+    lob: 'life',
+    pathLabel: 'Key person',
+    stage: 'proposal',
+    unifiedStage: 'waiting_client',
+    owner: 'L. Chen',
+    formsDone: 2,
+    formsTotal: 5,
+    customerInformed: true
+  },
+  {
+    id: 'q-302',
+    customerLabel: 'Carlos Méndez',
+    party: 'personal',
+    lob: 'life',
+    pathLabel: 'Individual',
+    stage: 'handoff',
+    unifiedStage: 'emission',
+    owner: 'A. Morales',
+    formsDone: 5,
+    formsTotal: 5,
+    customerInformed: true
+  },
+  {
+    id: 'q-401',
+    customerLabel: 'Retail Plaza',
+    party: 'corporate',
+    lob: 'general_risk',
+    pathLabel: 'Corporate',
+    stage: 'quoted',
+    unifiedStage: 'waiting_carriers',
+    owner: 'R. Vega',
+    formsDone: 3,
+    formsTotal: 7,
+    customerInformed: false
+  },
+  {
+    id: 'q-402',
+    customerLabel: 'Ana Ríos',
+    party: 'personal',
+    lob: 'general_risk',
+    pathLabel: 'Personal',
+    stage: 'intake',
+    unifiedStage: 'get_quotes',
+    owner: 'L. Chen',
+    formsDone: 1,
+    formsTotal: 4,
+    customerInformed: true
+  },
+  {
+    id: 'q-501',
+    customerLabel: 'Phone-in — manual rate',
+    party: 'personal',
+    lob: 'custom',
+    pathLabel: 'Manual entry',
+    stage: 'proposal',
+    unifiedStage: 'present_quotes',
+    owner: 'R. Vega',
+    formsDone: 0,
+    formsTotal: 2,
+    customerInformed: false
+  }
+]
diff --git a/app/data/roles-seguros.ts b/app/data/roles-seguros.ts
new file mode 100644
index 0000000..054a62b
--- /dev/null
+++ b/app/data/roles-seguros.ts
@@ -0,0 +1,35 @@
+import type { RoleRow, SegurosPermissionKey } from '~/types/roles'
+
+function all(v: boolean): Record<SegurosPermissionKey, boolean> {
+  return {
+    profile: v,
+    portfolio: v,
+    layers: v,
+    tasks: v,
+    billing: v,
+    analytics: v,
+    support: v
+  }
+}
+
+export const ROLES_SEGUROS_SEED: RoleRow[] = [
+  { id: 5, description: 'Agente de Ventas', active: true, seguros: all(true) },
+  { id: 4, description: 'Supervisor de Ventas', active: true, seguros: all(true) },
+  { id: 3, description: 'Configurador', active: true, seguros: all(false) },
+  { id: 2, description: 'Supervisor', active: true, seguros: all(false) },
+  { id: 1, description: 'Superadministrator', active: true, seguros: all(false) }
+]
+
+export const SEGUROS_PERMISSION_COLUMNS: {
+  key: SegurosPermissionKey
+  icon: string
+  label: string
+}[] = [
+  { key: 'profile', icon: 'i-heroicons-user', label: 'Perfil' },
+  { key: 'portfolio', icon: 'i-heroicons-folder', label: 'Cartera / pólizas' },
+  { key: 'layers', icon: 'i-heroicons-squares-2x2', label: 'Capas / duplicados' },
+  { key: 'tasks', icon: 'i-heroicons-clipboard-document-check', label: 'Tareas / checklist' },
+  { key: 'billing', icon: 'i-heroicons-currency-dollar', label: 'Cobros / primas' },
+  { key: 'analytics', icon: 'i-heroicons-chart-pie', label: 'Indicadores' },
+  { key: 'support', icon: 'i-heroicons-chat-bubble-left-right', label: 'Soporte' }
+]
diff --git a/app/data/taxonomy.ts b/app/data/taxonomy.ts
new file mode 100644
index 0000000..52ebdc0
--- /dev/null
+++ b/app/data/taxonomy.ts
@@ -0,0 +1,34 @@
+export const INSURER_SLUGS = [
+  'acerta',
+  'assa',
+  'ancon',
+  'fedpa',
+  'mapfre',
+  'optima',
+  'palig'
+] as const
+
+export type InsurerSlug = (typeof INSURER_SLUGS)[number]
+
+export const PRODUCT_LINE_SLUGS = [
+  'life',
+  'health_local',
+  'health_international',
+  'auto_full_coverage',
+  'auto_dat_liability',
+  'home',
+  'general_liability',
+  'any'
+] as const
+
+export type ProductLineSlug = (typeof PRODUCT_LINE_SLUGS)[number]
+
+export const INSURER_LABEL: Record<string, string> = {
+  acerta: 'ACERTA',
+  assa: 'ASSA',
+  ancon: 'ANCON',
+  fedpa: 'FEDPA',
+  mapfre: 'MAPFRE',
+  optima: 'OPTIMA',
+  palig: 'PALIG'
+}
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index b71f9c7..d7184a6 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,69 +1,392 @@
+<script setup lang="ts">
+const route = useRoute()
+const { saved: branding, sidebarTitle } = useBrokerageBranding()
+const { isSuperAdmin } = useSuperAdmin()
+useAppTheme()
+const { sidebarCollapsed, toggleSidebar } = useAppShellLayout()
+const sidebarFeatures = useSidebarFeatures()
+
+const openGroups = ref({
+  quotes: false,
+  sales: false,
+  cartera: false,
+  customerService: false,
+  workstation: false,
+  aiTools: false
+})
+
+// Auto-open the group matching the current route (but never close others)
+watch(() => route.path, (p) => {
+  if (p.startsWith('/quotes') && p !== '/quotes/new' && p !== '/quotes/compare') openGroups.value.quotes = true
+  if (p.startsWith('/onboarding') || (p.startsWith('/sales') && !p.startsWith('/sales/leads')) || p === '/quotes/new' || p === '/quotes/compare' || p.startsWith('/registration')) openGroups.value.sales = true
+  if (p.startsWith('/customers') || p.startsWith('/policies') || p.startsWith('/cartera')) openGroups.value.cartera = true
+  if (p.startsWith('/support') || p.startsWith('/claims') || p.startsWith('/collections') || p.startsWith('/renewals') || p.startsWith('/sales/leads')) openGroups.value.customerService = true
+  if (p.startsWith('/workstation')) openGroups.value.workstation = true
+  if (p.startsWith('/ai-tools')) openGroups.value.aiTools = true
+}, { immediate: true })
+
+function toggleGroup(key: string) {
+  openGroups.value[key] = !openGroups.value[key]
+}
+
+function isActive(path: string, exact = false) {
+  const p = route.path
+  return exact ? p === path : p === path || p.startsWith(`${path}/`)
+}
+
+/* ── Parent link class (40px row, 20px icon, 10px gap) ── */
+function linkClass(path: string, exact = false) {
+  const active = isActive(path, exact)
+  return [
+    'app-sidebar-link sidebar-parent-link flex w-full items-center',
+    active
+      ? 'app-sidebar-link-active'
+      : 'sidebar-link-inactive'
+  ]
+}
+
+/* ── Child link class (text only, 32px row, 13px, indented) ── */
+function subLinkClass(path: string, exact = false) {
+  const active = isActive(path, exact)
+  return [
+    'app-sidebar-link sidebar-child-link flex w-full items-center',
+    active
+      ? 'app-sidebar-child-active'
+      : 'sidebar-link-inactive'
+  ]
+}
+
+const isSettingsRoute = computed(() => route.path.startsWith('/settings'))
+
+function groupBtnClass(key: string) {
+  const hasActive =
+    (key === 'quotes' && ((route.path.startsWith('/quotes') && route.path !== '/quotes/new' && route.path !== '/quotes/compare'))) ||
+    (key === 'sales' && (route.path.startsWith('/onboarding') || (route.path.startsWith('/sales') && !route.path.startsWith('/sales/leads')) || route.path === '/quotes/new' || route.path === '/quotes/compare' || route.path.startsWith('/registration'))) ||
+    (key === 'cartera' &&
+      (route.path.startsWith('/customers') ||
+        route.path.startsWith('/policies') ||
+        route.path.startsWith('/cartera'))) ||
+    (key === 'customerService' &&
+      (route.path.startsWith('/support') ||
+        route.path.startsWith('/claims') ||
+        route.path.startsWith('/collections') ||
+        route.path.startsWith('/renewals') ||
+        route.path.startsWith('/sales/leads'))) ||
+    (key === 'workstation' && route.path.startsWith('/workstation')) ||
+    (key === 'aiTools' && route.path.startsWith('/ai-tools'))
+  return [
+    'app-sidebar-link sidebar-parent-link flex w-full items-center text-left',
+    hasActive
+      ? 'sidebar-parent-active'
+      : 'sidebar-link-inactive'
+  ]
+}
+
+async function onTopRefresh() {
+  try {
+    await refreshNuxtData()
+  } catch {
+    if (import.meta.client) window.location.reload()
+  }
+}
+
+// Keyboard shortcut: Ctrl/Cmd + B to toggle sidebar
+function onKeydown(e: KeyboardEvent) {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
+    e.preventDefault()
+    toggleSidebar()
+  }
+}
+onMounted(() => {
+  if (import.meta.client) window.addEventListener('keydown', onKeydown)
+})
+onUnmounted(() => {
+  if (import.meta.client) window.removeEventListener('keydown', onKeydown)
+})
+</script>
+
 <template>
-    <div class="min-h-screen bg-slate-100 flex">
+  <div class="flex h-screen flex-col overflow-hidden" style="background: var(--page-bg); color: var(--text-primary);">
+    <LayoutAppTopBar
+      :sidebar-collapsed="sidebarCollapsed"
+      :brand-title="sidebarTitle"
+      @toggle-sidebar="toggleSidebar"
+      @refresh="onTopRefresh"
+    />
 
-    <!-- Sidebar -->
-    <aside
-      class="w-64 bg-white border-r border-slate-200 hidden md:flex flex-col"
-    >
-      <!-- Brand -->
-      <div class="h-16 flex items-center px-6 border-b border-slate-200">
-        <span class="text-lg font-semibold tracking-tight">
-          PolicyManager
-        </span>
-      </div>
+    <div class="flex min-h-0 flex-1">
+      <!-- Sidebar -->
+      <aside
+        class="app-sidebar hidden min-h-0 flex-col md:flex md:shrink-0"
+        :class="
+          sidebarCollapsed
+            ? 'md:w-0 md:min-w-0 md:max-w-0 md:overflow-hidden md:opacity-0'
+            : 'sidebar-open'
+        "
+        :aria-hidden="sidebarCollapsed ? 'true' : 'false'"
+      >
+        <!-- Navigation -->
+        <nav class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden" style="padding: 8px 12px 4px;">
+          <!-- Dashboard — standalone (shrink-0 prevents compression when groups expand) -->
+          <NuxtLink to="/" :class="[...linkClass('/', true), 'shrink-0']">
+            <UIcon name="i-heroicons-squares-2x2" class="sidebar-icon shrink-0" />
+            <span>My Dashboard</span>
+          </NuxtLink>
+          <NuxtLink to="/calendar" :class="[...linkClass('/calendar'), 'shrink-0']">
+            <UIcon name="i-heroicons-calendar-days" class="sidebar-icon shrink-0" />
+            <span>Calendar</span>
+          </NuxtLink>
 
-      <!-- Navigation -->
-      <nav class="flex-1 p-4 space-y-1">
+          <!-- ── BUSINESS section ── -->
+          <p class="app-sidebar-section-label">Sales</p>
 
-        <NuxtLink
-          to="/"
-          class="group flex items-center px-3 py-2 rounded-lg text-sm font-medium
-                 text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition"
-        >
-          Dashboard
-        </NuxtLink>
+          <div class="flex flex-col">
+            <button type="button" :class="groupBtnClass('quotes')" @click="toggleGroup('quotes')">
+              <UIcon name="i-heroicons-calculator" class="sidebar-icon shrink-0" />
+              <span class="flex-1 text-left">Quotes</span>
+              <UIcon
+                :name="openGroups.quotes ? 'i-heroicons-chevron-down' : 'i-heroicons-chevron-right'"
+                class="sidebar-chevron shrink-0"
+              />
+            </button>
+            <div v-if="openGroups.quotes" class="sidebar-children">
+              <NuxtLink to="/quotes" active-class="" exact-active-class="" :class="subLinkClass('/quotes', true)">Mission Control</NuxtLink>
+              <NuxtLink to="/quotes/auto" active-class="" exact-active-class="" :class="subLinkClass('/quotes/auto')">Auto</NuxtLink>
+              <NuxtLink to="/quotes/health" active-class="" exact-active-class="" :class="subLinkClass('/quotes/health')">Health</NuxtLink>
+              <NuxtLink to="/quotes/life" active-class="" exact-active-class="" :class="subLinkClass('/quotes/life')">Life</NuxtLink>
+              <NuxtLink to="/quotes/general-risk" active-class="" exact-active-class="" :class="subLinkClass('/quotes/general-risk')">General Risk</NuxtLink>
+              <NuxtLink to="/quotes/custom" active-class="" exact-active-class="" :class="subLinkClass('/quotes/custom')">Custom</NuxtLink>
+            </div>
 
-        <NuxtLink
-          to="/customers"
-          class="group flex items-center px-3 py-2 rounded-lg text-sm font-medium
-                 text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition"
-        >
-          Customers
-        </NuxtLink>
+            <button type="button" :class="groupBtnClass('sales')" @click="toggleGroup('sales')">
+              <UIcon name="i-heroicons-funnel" class="sidebar-icon shrink-0" />
+              <span class="flex-1 text-left">Sales</span>
+              <UIcon
+                :name="openGroups.sales ? 'i-heroicons-chevron-down' : 'i-heroicons-chevron-right'"
+                class="sidebar-chevron shrink-0"
+              />
+            </button>
+            <div v-if="openGroups.sales" class="sidebar-children">
+              <NuxtLink to="/onboarding" :class="subLinkClass('/onboarding', true)">Sales Pipeline</NuxtLink>
+              <NuxtLink to="/sales/quick-lead" :class="subLinkClass('/sales/quick-lead')">Quick Lead</NuxtLink>
+              <NuxtLink to="/registration/client" :class="subLinkClass('/registration/client', true)">New Customer</NuxtLink>
+              <NuxtLink to="/quotes/new" :class="subLinkClass('/quotes/new', true)">Get Quotes</NuxtLink>
+              <NuxtLink to="/quotes/compare" :class="subLinkClass('/quotes/compare', true)">Present Quotes</NuxtLink>
+              <NuxtLink to="/onboarding/solicitud" :class="subLinkClass('/onboarding/solicitud', true)">Solicitudes</NuxtLink>
+              <NuxtLink to="/onboarding/emissions" :class="subLinkClass('/onboarding/emissions')">Emissions</NuxtLink>
+              <NuxtLink to="/onboarding/policy-upload/new" :class="subLinkClass('/onboarding/policy-upload')">Nombramiento</NuxtLink>
+            </div>
+          </div>
 
-        <NuxtLink
-          to="/policies"
-          class="group flex items-center px-3 py-2 rounded-lg text-sm font-medium
-                 text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition"
-        >
-          Policies
-        </NuxtLink>
+          <!-- ── OPERATIONS section ── -->
+          <p class="app-sidebar-section-label">Operations</p>
 
-        <NuxtLink
-          to="/providers"
-          class="group flex items-center px-3 py-2 rounded-lg text-sm font-medium
-                 text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition"
-        >
-          Providers
-        </NuxtLink>
+          <div class="flex flex-col">
+            <button type="button" :class="groupBtnClass('cartera')" @click="toggleGroup('cartera')">
+              <UIcon name="i-heroicons-briefcase" class="sidebar-icon shrink-0" />
+              <span class="flex-1 text-left">Cartera</span>
+              <UIcon
+                :name="openGroups.cartera ? 'i-heroicons-chevron-down' : 'i-heroicons-chevron-right'"
+                class="sidebar-chevron shrink-0"
+              />
+            </button>
+            <div v-if="openGroups.cartera" class="sidebar-children">
+              <NuxtLink to="/customers" :class="subLinkClass('/customers', true)">Customers</NuxtLink>
+              <NuxtLink to="/policies" :class="subLinkClass('/policies', true)">Policies</NuxtLink>
+              <NuxtLink to="/policies/groups" :class="subLinkClass('/policies/groups')">Collectivos</NuxtLink>
+            </div>
 
-        <NuxtLink
-          to="/tasks"
-          class="group flex items-center px-3 py-2 rounded-lg text-sm font-medium
-                 text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition"
-        >
-          Tasks
-        </NuxtLink>
+            <button type="button" :class="groupBtnClass('customerService')" @click="toggleGroup('customerService')">
+              <UIcon name="i-heroicons-lifebuoy" class="sidebar-icon shrink-0" />
+              <span class="flex-1 text-left">Customer Service</span>
+              <UIcon
+                :name="openGroups.customerService ? 'i-heroicons-chevron-down' : 'i-heroicons-chevron-right'"
+                class="sidebar-chevron shrink-0"
+              />
+            </button>
+            <div v-if="openGroups.customerService" class="sidebar-children">
+              <NuxtLink v-if="sidebarFeatures.showLeadsHub" to="/sales/leads" :class="subLinkClass('/sales/leads')">Incoming Leads</NuxtLink>
+              <NuxtLink to="/support" :class="subLinkClass('/support', true)">Incoming Support</NuxtLink>
+              <NuxtLink to="/claims" :class="subLinkClass('/claims')">Claims</NuxtLink>
+              <NuxtLink to="/collections" :class="subLinkClass('/collections')">Collections</NuxtLink>
+              <NuxtLink to="/renewals" :class="subLinkClass('/renewals')">Renewals</NuxtLink>
+              <NuxtLink to="/support/collectivos" :class="subLinkClass('/support/collectivos')">Collectivos</NuxtLink>
+            </div>
 
-      </nav>
-    </aside>
+            <NuxtLink to="/analysis" :class="linkClass('/analysis')">
+              <UIcon name="i-heroicons-chart-bar-square" class="sidebar-icon shrink-0" />
+              Reports & Analysis
+            </NuxtLink>
+          </div>
 
-    <!-- Main -->
-    <main class="flex-1">
-      <div class="p-8">
-        <NuxtPage />
-      </div>
-    </main>
+          <!-- ── WORKSTATION section ── -->
+          <template v-if="sidebarFeatures.showWorkstations || sidebarFeatures.showAiTools">
+            <p class="app-sidebar-section-label">Workstations</p>
 
+            <div class="flex flex-col">
+              <template v-if="sidebarFeatures.showWorkstations">
+                <button type="button" :class="groupBtnClass('workstation')" @click="toggleGroup('workstation')">
+                  <UIcon name="i-heroicons-inbox-stack" class="sidebar-icon shrink-0" />
+                  <span class="flex-1 text-left">Workstations</span>
+                  <UIcon
+                    :name="openGroups.workstation ? 'i-heroicons-chevron-down' : 'i-heroicons-chevron-right'"
+                    class="sidebar-chevron shrink-0"
+                  />
+                </button>
+                <div v-if="openGroups.workstation" class="sidebar-children">
+                  <NuxtLink to="/workstation/collectivos" :class="subLinkClass('/workstation/collectivos')">Collectivos</NuxtLink>
+                  <NuxtLink to="/workstation/collections" :class="subLinkClass('/workstation/collections')">Collections</NuxtLink>
+                  <NuxtLink to="/workstation/claims" :class="subLinkClass('/workstation/claims')">Claims</NuxtLink>
+                  <NuxtLink to="/workstation/renewals" :class="subLinkClass('/workstation/renewals')">Renewals</NuxtLink>
+                  <NuxtLink to="/workstation/customer-service" :class="subLinkClass('/workstation/customer-service')">Customer Service</NuxtLink>
+                  <NuxtLink to="/workstation/facturacion" :class="subLinkClass('/workstation/facturacion')">Facturación y Comisiones</NuxtLink>
+                </div>
+              </template>
+
+              <template v-if="sidebarFeatures.showAiTools">
+                <button type="button" :class="groupBtnClass('aiTools')" @click="toggleGroup('aiTools')">
+                  <UIcon name="i-heroicons-sparkles" class="sidebar-icon shrink-0" />
+                  <span class="flex-1 text-left">AI Tools</span>
+                  <UIcon
+                    :name="openGroups.aiTools ? 'i-heroicons-chevron-down' : 'i-heroicons-chevron-right'"
+                    class="sidebar-chevron shrink-0"
+                  />
+                </button>
+                <div v-if="openGroups.aiTools" class="sidebar-children">
+                  <NuxtLink to="/ai-tools/sales-factory" :class="subLinkClass('/ai-tools/sales-factory')">Sales Factory</NuxtLink>
+                  <NuxtLink to="/ai-tools/policy-comparator" :class="subLinkClass('/ai-tools/policy-comparator')">Policy Comparator</NuxtLink>
+                  <NuxtLink to="/ai-tools/email-writer" :class="subLinkClass('/ai-tools/email-writer')">Email Writer</NuxtLink>
+                  <NuxtLink to="/ai-tools/case-assistant" :class="subLinkClass('/ai-tools/case-assistant')">Case Assistant</NuxtLink>
+                </div>
+              </template>
+            </div>
+          </template>
+
+          <!-- ── Footer zone ── -->
+          <div class="mt-auto" style="padding-top: 8px;">
+            <div class="sidebar-footer-divider" />
+            <NuxtLink to="/settings" :class="linkClass('/settings')" class="sidebar-footer-link">
+              <UIcon name="i-heroicons-cog-6-tooth" class="sidebar-icon shrink-0" style="width: 16px; height: 16px;" />
+              <span>Settings</span>
+            </NuxtLink>
+          </div>
+        </nav>
+
+        <!-- Collapse sidebar — pinned outside scrollable nav -->
+        <div style="padding: 4px 12px 8px;">
+          <button
+            type="button"
+            class="app-sidebar-link sidebar-footer-link flex w-full items-center sidebar-link-inactive"
+            title="Hide sidebar (Ctrl+B)"
+            @click="toggleSidebar"
+          >
+            <UIcon name="i-heroicons-chevron-double-left" class="sidebar-icon shrink-0" style="width: 16px; height: 16px;" />
+            <span>Hide sidebar</span>
+          </button>
+        </div>
+      </aside>
+
+      <!-- Main content -->
+      <main
+        class="flex min-h-0 min-w-0 flex-1 flex-col"
+        :data-app-surface="isSettingsRoute ? 'settings' : undefined"
+      >
+        <div class="flex-1 overflow-y-auto" style="padding: 16px 24px 32px;">
+          <NuxtPage :key="route.fullPath" />
+        </div>
+      </main>
+    </div>
   </div>
 </template>
+
+<style scoped>
+/* ── Sidebar shell ── */
+.app-sidebar {
+  background: var(--sidebar-bg);
+  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.04);
+  transition: width 200ms ease, opacity 200ms ease;
+}
+.sidebar-open {
+  width: 252px;
+  opacity: 1;
+}
+
+/* ── Parent link row: 40px height, 20px icon, 10px gap ── */
+.sidebar-parent-link {
+  height: 40px;
+  min-height: 40px;
+  flex-shrink: 0;
+  padding: 0 8px;
+  gap: 10px;
+  font-size: 14px;
+  border-radius: 8px;
+}
+
+/* ── Parent icon: 20px, outline variant at 0.5 opacity ── */
+.sidebar-icon {
+  width: 20px;
+  height: 20px;
+  opacity: 0.5;
+}
+/* Active parent icon: slightly elevated but not full */
+.app-sidebar-link-active .sidebar-icon {
+  opacity: 0.7;
+}
+
+/* ── Chevron: 14px ── */
+.sidebar-chevron {
+  width: 14px;
+  height: 14px;
+  color: #c0c0bc;
+  transition: transform 150ms ease;
+}
+
+/* ── Inactive link: text-secondary, no color change on hover ── */
+.sidebar-link-inactive {
+  color: #6b6b68;
+}
+
+/* ── Parent with active child: text-primary, font-medium ── */
+.sidebar-parent-active {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+/* ── Child items: text only, no icons, indented 36px ── */
+.sidebar-children {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 38px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+/* ── Child link: 32px row, 13px font ── */
+.sidebar-child-link {
+  height: 32px;
+  padding: 0 8px;
+  font-size: 13px;
+  color: #6b6b68;
+  border-radius: 8px;
+}
+
+/* ── Footer divider ── */
+.sidebar-footer-divider {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.06);
+  margin: 0 16px 8px;
+}
+
+/* ── Footer links ── */
+.sidebar-footer-link {
+  height: 36px;
+  padding: 0 8px;
+  gap: 10px;
+  font-size: 13px;
+  color: #6b6b68 !important;
+}
+.sidebar-footer-link .sidebar-icon {
+  opacity: 0.6;
+}
+</style>
diff --git a/app/pages/account/index.vue b/app/pages/account/index.vue
new file mode 100644
index 0000000..9b5b1d9
--- /dev/null
+++ b/app/pages/account/index.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+usePageTitle('Account')
+
+const tab = ref('profile')
+
+const tabItems = [
+  { label: 'Profile', value: 'profile', icon: 'i-heroicons-user', slot: 'profile' },
+  { label: 'Theme & appearance', value: 'theme', icon: 'i-heroicons-swatch', slot: 'theme' },
+  { label: 'Preferences', value: 'prefs', icon: 'i-heroicons-adjustments-horizontal', slot: 'prefs' }
+]
+</script>
+
+<template>
+  <div class="mx-auto max-w-3xl space-y-8">
+    <div class="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
+      <NuxtLink
+        to="/"
+        class="inline-flex items-center gap-1.5 font-medium text-[var(--text-muted)] transition hover:text-[var(--text-primary)]"
+      >
+        <UIcon name="i-heroicons-home" class="h-4 w-4" />
+        Home
+      </NuxtLink>
+      <span class="text-[var(--text-muted)] opacity-50" aria-hidden="true">|</span>
+      <span class="text-[var(--text-muted)]">Signed-in user (mock)</span>
+    </div>
+
+    <div>
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Your account</h1>
+      <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Profile, photo, and how the app looks for you. Software-wide configuration stays under Settings; company branding
+        is managed separately by a tenant administrator.
+      </p>
+    </div>
+
+    <UTabs v-model="tab" :items="tabItems" variant="link" color="primary" class="w-full">
+      <template #profile>
+        <div class="space-y-8 pt-4">
+          <div class="flex flex-col gap-6 sm:flex-row sm:items-start">
+            <div class="flex shrink-0 flex-col items-center gap-2">
+              <div
+                class="flex h-24 w-24 items-center justify-center rounded-full border border-[var(--sidebar-border)] bg-[var(--brand-faint)] text-[var(--brand)] ring-2 ring-[var(--brand)]/20"
+              >
+                <UIcon name="i-heroicons-user" class="h-14 w-14" />
+              </div>
+              <UButton size="sm" color="neutral" variant="soft" disabled>Change photo (soon)</UButton>
+              <p class="max-w-[12rem] text-center text-[11px] text-[var(--text-muted)]">Avatar syncs when directory login is connected.</p>
+            </div>
+            <div class="min-w-0 flex-1 space-y-4">
+              <UFormField label="Display name" description="Shown in the top bar when profiles are wired up.">
+                <UInput placeholder="Your name" disabled class="max-w-md" />
+              </UFormField>
+              <UFormField label="Email" description="From your identity provider (not editable here yet).">
+                <UInput model-value="you@company.com" type="email" disabled class="max-w-md" />
+              </UFormField>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #theme>
+        <div class="pt-4">
+          <AccountThemeSection />
+        </div>
+      </template>
+
+      <template #prefs>
+        <div class="space-y-4 pt-4">
+          <p class="text-sm text-[var(--text-muted)]">Locale, density, and defaults will live here when account APIs exist.</p>
+          <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4 ring-1 ring-black/5">
+            <UFormField label="Language" class="max-w-md">
+              <USelect
+                model-value="en"
+                disabled
+                :items="[
+                  { label: 'English (default)', value: 'en' },
+                  { label: 'Español (soon)', value: 'es' }
+                ]"
+                value-key="value"
+                label-key="label"
+                class="w-full"
+              />
+            </UFormField>
+          </div>
+        </div>
+      </template>
+    </UTabs>
+  </div>
+</template>
diff --git a/app/pages/ai-tools/case-assistant.vue b/app/pages/ai-tools/case-assistant.vue
new file mode 100644
index 0000000..63447f6
--- /dev/null
+++ b/app/pages/ai-tools/case-assistant.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+usePageTitle('Case Assistant')
+</script>
+
+<template>
+  <div class="mx-auto max-w-2xl py-16 text-center">
+    <div class="inline-flex flex-col items-center gap-4">
+      <span
+        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
+        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
+      >Coming soon</span>
+      <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Case Assistant</h1>
+      <p class="text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Get AI-powered guidance on open cases, including next steps, risk flags, and suggested actions.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/ai-tools/email-writer.vue b/app/pages/ai-tools/email-writer.vue
new file mode 100644
index 0000000..9607c4c
--- /dev/null
+++ b/app/pages/ai-tools/email-writer.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+usePageTitle('Email Writer')
+</script>
+
+<template>
+  <div class="mx-auto max-w-2xl py-16 text-center">
+    <div class="inline-flex flex-col items-center gap-4">
+      <span
+        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
+        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
+      >Coming soon</span>
+      <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Email Writer</h1>
+      <p class="text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Draft professional client and carrier emails with AI, using policy context and brokerage tone.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/ai-tools/policy-comparator.vue b/app/pages/ai-tools/policy-comparator.vue
new file mode 100644
index 0000000..f0ec96b
--- /dev/null
+++ b/app/pages/ai-tools/policy-comparator.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+usePageTitle('Policy Comparator')
+</script>
+
+<template>
+  <div class="mx-auto max-w-2xl py-16 text-center">
+    <div class="inline-flex flex-col items-center gap-4">
+      <span
+        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
+        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
+      >Coming soon</span>
+      <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Policy Comparator</h1>
+      <p class="text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Upload two or more policy documents and get an AI-generated side-by-side coverage comparison.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/ai-tools/sales-factory.vue b/app/pages/ai-tools/sales-factory.vue
new file mode 100644
index 0000000..0738e13
--- /dev/null
+++ b/app/pages/ai-tools/sales-factory.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+usePageTitle('Sales Factory')
+</script>
+
+<template>
+  <div class="sf-page">
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Sales Factory</h1>
+        <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
+          Analyze your book for cross-sell opportunities, assign leads to agents, and connect to email campaigns.
+        </p>
+      </div>
+      <span
+        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
+        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
+      >Coming soon</span>
+    </div>
+
+    <!-- Preview cards -->
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div class="sf-card">
+        <div class="sf-card-icon" style="background: rgba(1,105,111,0.08); color: #01696f;">
+          <UIcon name="i-heroicons-magnifying-glass-circle" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="sf-card-title">Book Analysis</h3>
+        <p class="sf-card-desc">Scan your entire book of business for coverage gaps, mono-line clients, and cross-sell opportunities based on client profiles.</p>
+        <div class="sf-card-tags">
+          <span class="sf-tag">Gap analysis</span>
+          <span class="sf-tag">Mono-line detection</span>
+          <span class="sf-tag">Opportunity scoring</span>
+        </div>
+      </div>
+
+      <div class="sf-card">
+        <div class="sf-card-icon" style="background: rgba(124,58,237,0.08); color: #7c3aed;">
+          <UIcon name="i-heroicons-user-plus" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="sf-card-title">Lead Assignment</h3>
+        <p class="sf-card-desc">Assign qualified leads and opportunities to agents based on capacity, expertise, and territory. Track conversion rates per agent.</p>
+        <div class="sf-card-tags">
+          <span class="sf-tag">Auto-assignment</span>
+          <span class="sf-tag">Round-robin</span>
+          <span class="sf-tag">Capacity rules</span>
+        </div>
+      </div>
+
+      <div class="sf-card">
+        <div class="sf-card-icon" style="background: rgba(194,123,26,0.08); color: #c27b1a;">
+          <UIcon name="i-heroicons-envelope" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="sf-card-title">Campaign Engine</h3>
+        <p class="sf-card-desc">Connect to email campaigns for renewal nudges, cross-sell outreach, and re-engagement sequences. Track open rates and conversions.</p>
+        <div class="sf-card-tags">
+          <span class="sf-tag">Email sequences</span>
+          <span class="sf-tag">A/B testing</span>
+          <span class="sf-tag">Analytics</span>
+        </div>
+      </div>
+
+      <div class="sf-card">
+        <div class="sf-card-icon" style="background: rgba(15,123,95,0.08); color: #0f7b5f;">
+          <UIcon name="i-heroicons-chart-bar" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="sf-card-title">Pipeline Intelligence</h3>
+        <p class="sf-card-desc">Visualize your sales pipeline by stage, LOB, and agent. Forecast close rates and identify stalled deals needing attention.</p>
+        <div class="sf-card-tags">
+          <span class="sf-tag">Pipeline stages</span>
+          <span class="sf-tag">Forecasting</span>
+          <span class="sf-tag">Stall alerts</span>
+        </div>
+      </div>
+
+      <div class="sf-card">
+        <div class="sf-card-icon" style="background: rgba(193,56,56,0.08); color: #c13838;">
+          <UIcon name="i-heroicons-arrow-path" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="sf-card-title">Cross-sell Engine</h3>
+        <p class="sf-card-desc">AI-powered recommendations for which products to offer existing clients based on their profile, industry, and current coverage.</p>
+        <div class="sf-card-tags">
+          <span class="sf-tag">AI recommendations</span>
+          <span class="sf-tag">Product matching</span>
+          <span class="sf-tag">Client scoring</span>
+        </div>
+      </div>
+
+      <div class="sf-card">
+        <div class="sf-card-icon" style="background: rgba(190,24,93,0.08); color: #be185d;">
+          <UIcon name="i-heroicons-presentation-chart-line" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="sf-card-title">Sales Reporting</h3>
+        <p class="sf-card-desc">Agent scorecards, team leaderboards, conversion funnels, and revenue attribution — all in real time.</p>
+        <div class="sf-card-tags">
+          <span class="sf-tag">Scorecards</span>
+          <span class="sf-tag">Leaderboards</span>
+          <span class="sf-tag">Attribution</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sf-page {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 64rem;
+  margin: 0 auto;
+  padding-bottom: 3rem;
+}
+.sf-card {
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: all 200ms ease;
+}
+.sf-card:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+  border-color: rgba(1,105,111,0.15);
+}
+.sf-card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px; height: 36px;
+  border-radius: 10px;
+}
+.sf-card-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.sf-card-desc {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+.sf-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: auto;
+}
+.sf-tag {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 7px;
+  border-radius: 4px;
+  background: rgba(0,0,0,0.03);
+  color: var(--text-muted);
+}
+</style>
diff --git a/app/pages/analysis/index.vue b/app/pages/analysis/index.vue
new file mode 100644
index 0000000..34e2757
--- /dev/null
+++ b/app/pages/analysis/index.vue
@@ -0,0 +1,459 @@
+<script setup lang="ts">
+import {
+  ANALYTICS_DOMAIN_LABELS,
+  ANALYTICS_METRICS,
+  type AnalyticsDomainId,
+  type AnalyticsChartType,
+  type AnalyticsTimePoint,
+} from '~/data/mock-analytics'
+
+usePageTitle('Business Analytics')
+
+const {
+  state, allMetrics, kpiSummaries, domainMetrics,
+  chartBuilderMetricObj, chartBuilderData, chartBuilderSvgModel,
+  buildSvgModel, sparklinePath, sparklineArea,
+} = useAnalytics()
+
+// ── Domain tabs ──
+const domains: { id: AnalyticsDomainId; label: string }[] = [
+  { id: 'production', label: 'Producción' },
+  { id: 'claims', label: 'Siniestros' },
+  { id: 'pipeline', label: 'Pipeline' },
+  { id: 'service', label: 'Servicio' },
+]
+
+// ── Per-card chart type overrides ──
+const cardChartTypes = ref<Record<string, AnalyticsChartType>>({})
+function getCardChartType(metricId: string, defaultType: AnalyticsChartType): AnalyticsChartType {
+  return cardChartTypes.value[metricId] ?? defaultType
+}
+function setCardChartType(metricId: string, type: AnalyticsChartType) {
+  cardChartTypes.value[metricId] = type
+}
+
+// ── Chart builder grouped options ──
+const chartBuilderGroups = computed(() => {
+  const domainOrder: AnalyticsDomainId[] = ['production', 'claims', 'pipeline', 'service']
+  return domainOrder.map(d => ({
+    label: ANALYTICS_DOMAIN_LABELS[d],
+    metrics: allMetrics.filter(m => m.domain === d && m.data12m.some(p => p.m)),
+  }))
+})
+
+// ── Filter valid data points (skip empties) for chart rendering ──
+function validData(data: AnalyticsTimePoint[]): AnalyticsTimePoint[] {
+  return data.filter(d => d.m)
+}
+
+// ── Change badge class ──
+function changeToneClass(tone: string): string {
+  if (tone === 'positive') return 'an-change-positive'
+  if (tone === 'negative') return 'an-change-negative'
+  return 'an-change-neutral'
+}
+</script>
+
+<template>
+  <div class="an-page">
+    <!-- Header -->
+    <div>
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Business Analytics</h1>
+      <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Consolidated view — production, claims, pipeline, and service KPIs with interactive charts.
+      </p>
+    </div>
+
+    <!-- ═══════════ KPI STRIP ═══════════ -->
+    <div class="an-kpi-strip">
+      <div v-for="kpi in kpiSummaries" :key="kpi.id" class="an-kpi-card">
+        <div class="an-kpi-top">
+          <p class="an-kpi-label">{{ kpi.label }}</p>
+          <span :class="['an-change-badge', changeToneClass(kpi.changeTone)]">{{ kpi.change }}</span>
+        </div>
+        <p class="an-kpi-value">{{ kpi.value }}</p>
+        <p class="an-kpi-hint">{{ kpi.hint }}</p>
+        <svg class="an-kpi-spark" viewBox="0 0 112 32" preserveAspectRatio="none">
+          <path :d="sparklineArea(kpi.sparkline)" fill="rgba(1,105,111,0.06)" />
+          <path :d="sparklinePath(kpi.sparkline)" fill="none" stroke="#01696f" stroke-width="1.5" />
+        </svg>
+      </div>
+    </div>
+
+    <!-- ═══════════ DOMAIN TABS ═══════════ -->
+    <div class="an-domain-tabs">
+      <button
+        v-for="d in domains"
+        :key="d.id"
+        type="button"
+        class="an-domain-tab"
+        :class="state.activeDomain === d.id ? 'an-tab-active' : 'an-tab-inactive'"
+        @click="state.activeDomain = d.id"
+      >
+        {{ d.label }}
+      </button>
+    </div>
+
+    <!-- ═══════════ CHART BUILDER ═══════════ -->
+    <div class="an-builder">
+      <div class="an-builder-header">
+        <p class="an-builder-title">
+          <UIcon name="i-heroicons-wrench-screwdriver" class="w-4 h-4" />
+          Chart Builder
+        </p>
+        <p class="text-[12px] text-[var(--text-muted)]">Pick any metric, chart type, and time range.</p>
+      </div>
+
+      <div class="an-builder-controls">
+        <!-- Grouped metric selector -->
+        <select v-model="state.chartBuilderMetric" class="an-builder-select an-builder-select-wide">
+          <optgroup v-for="group in chartBuilderGroups" :key="group.label" :label="group.label">
+            <option v-for="m in group.metrics" :key="m.id" :value="m.id">{{ m.label }}</option>
+          </optgroup>
+        </select>
+
+        <!-- Chart type toggle -->
+        <div class="an-builder-toggle">
+          <button
+            v-for="ct in (['area', 'line', 'bar'] as AnalyticsChartType[])"
+            :key="ct"
+            type="button"
+            class="an-bt-btn"
+            :class="state.chartBuilderType === ct ? 'an-bt-on' : 'an-bt-off'"
+            @click="state.chartBuilderType = ct"
+          >
+            {{ ct.charAt(0).toUpperCase() + ct.slice(1) }}
+          </button>
+        </div>
+
+        <!-- Time range -->
+        <div class="an-builder-toggle">
+          <button
+            v-for="r in (['3m', '6m', '12m'] as const)"
+            :key="r"
+            type="button"
+            class="an-bt-btn"
+            :class="state.chartBuilderRange === r ? 'an-bt-on' : 'an-bt-off'"
+            @click="state.chartBuilderRange = r"
+          >
+            {{ r.toUpperCase() }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Builder chart info -->
+      <div class="an-builder-info">
+        <p class="text-[18px] font-bold text-[var(--text-primary)]">
+          {{ chartBuilderData[chartBuilderData.length - 1]?.display }}
+        </p>
+        <span :class="['an-change-badge', changeToneClass(chartBuilderMetricObj.changeTone)]">{{ chartBuilderMetricObj.change }}</span>
+        <span class="text-[12px] text-[var(--text-muted)] ml-2">{{ chartBuilderMetricObj.label }}</span>
+      </div>
+
+      <!-- Builder SVG -->
+      <svg class="an-builder-svg" :viewBox="`0 0 ${chartBuilderSvgModel.viewW} ${chartBuilderSvgModel.viewH}`" preserveAspectRatio="none">
+        <line
+          v-for="(gy, gi) in chartBuilderSvgModel.gridYs"
+          :key="gi"
+          :x1="chartBuilderSvgModel.padX"
+          :y1="gy"
+          :x2="chartBuilderSvgModel.padX + chartBuilderSvgModel.innerW"
+          :y2="gy"
+          stroke="rgba(0,0,0,0.04)"
+          stroke-width="1"
+        />
+        <path
+          v-if="state.chartBuilderType === 'area'"
+          :d="chartBuilderSvgModel.areaD"
+          fill="rgba(1,105,111,0.08)"
+        />
+        <path
+          v-if="state.chartBuilderType !== 'bar'"
+          :d="chartBuilderSvgModel.lineD"
+          fill="none"
+          stroke="#01696f"
+          stroke-width="2"
+        />
+        <circle
+          v-if="state.chartBuilderType !== 'bar'"
+          v-for="(pt, pi) in chartBuilderSvgModel.points"
+          :key="pi"
+          :cx="pt.x"
+          :cy="pt.y"
+          r="4"
+          fill="#fff"
+          stroke="#01696f"
+          stroke-width="2"
+        />
+        <rect
+          v-if="state.chartBuilderType === 'bar'"
+          v-for="(bar, bi) in chartBuilderSvgModel.bars"
+          :key="bi"
+          :x="bar.x"
+          :y="bar.y"
+          :width="bar.w"
+          :height="bar.h"
+          rx="4"
+          fill="#01696f"
+          opacity="0.7"
+        />
+      </svg>
+
+      <!-- Builder x-axis -->
+      <div class="an-chart-xaxis" style="padding: 0 8px;">
+        <span v-for="(d, di) in chartBuilderData" :key="di" class="an-xaxis-label">{{ d.m }}</span>
+      </div>
+    </div>
+
+    <!-- ═══════════ CHART CARDS GRID ═══════════ -->
+    <div class="an-chart-grid">
+      <div
+        v-for="metric in domainMetrics"
+        :key="metric.id"
+        class="an-chart-card"
+      >
+        <!-- Card header -->
+        <div class="an-chart-header">
+          <div class="flex-1 min-w-0">
+            <p class="an-chart-title">{{ metric.label }}</p>
+            <span v-if="metric.change" :class="['an-change-badge', changeToneClass(metric.changeTone)]">{{ metric.change }}</span>
+          </div>
+          <div class="an-chart-type-toggle">
+            <button
+              v-for="ct in (['area', 'line', 'bar'] as AnalyticsChartType[])"
+              :key="ct"
+              type="button"
+              class="an-ct-btn"
+              :class="getCardChartType(metric.id, metric.defaultChartType) === ct ? 'an-ct-on' : 'an-ct-off'"
+              @click="setCardChartType(metric.id, ct)"
+            >
+              {{ ct === 'area' ? '▤' : ct === 'line' ? '⌇' : '▥' }}
+            </button>
+          </div>
+        </div>
+
+        <!-- SVG chart -->
+        <svg class="an-chart-svg" :viewBox="`0 0 ${buildSvgModel(validData(metric.data12m)).viewW} ${buildSvgModel(validData(metric.data12m)).viewH}`" preserveAspectRatio="none">
+          <!-- Grid lines -->
+          <line
+            v-for="(gy, gi) in buildSvgModel(validData(metric.data12m)).gridYs"
+            :key="gi"
+            :x1="buildSvgModel(validData(metric.data12m)).padX"
+            :y1="gy"
+            :x2="buildSvgModel(validData(metric.data12m)).padX + buildSvgModel(validData(metric.data12m)).innerW"
+            :y2="gy"
+            stroke="rgba(0,0,0,0.04)"
+            stroke-width="1"
+          />
+
+          <!-- Area -->
+          <path
+            v-if="getCardChartType(metric.id, metric.defaultChartType) === 'area'"
+            :d="buildSvgModel(validData(metric.data12m)).areaD"
+            fill="rgba(1,105,111,0.08)"
+          />
+          <!-- Line -->
+          <path
+            v-if="getCardChartType(metric.id, metric.defaultChartType) !== 'bar'"
+            :d="buildSvgModel(validData(metric.data12m)).lineD"
+            fill="none"
+            stroke="#01696f"
+            stroke-width="2"
+          />
+          <!-- Points -->
+          <circle
+            v-if="getCardChartType(metric.id, metric.defaultChartType) !== 'bar'"
+            v-for="(pt, pi) in buildSvgModel(validData(metric.data12m)).points"
+            :key="pi"
+            :cx="pt.x"
+            :cy="pt.y"
+            r="3"
+            fill="#fff"
+            stroke="#01696f"
+            stroke-width="1.5"
+          />
+          <!-- Bars -->
+          <rect
+            v-if="getCardChartType(metric.id, metric.defaultChartType) === 'bar'"
+            v-for="(bar, bi) in buildSvgModel(validData(metric.data12m)).bars"
+            :key="bi"
+            :x="bar.x"
+            :y="bar.y"
+            :width="bar.w"
+            :height="bar.h"
+            rx="3"
+            fill="#01696f"
+            opacity="0.7"
+          />
+        </svg>
+
+        <!-- X-axis labels -->
+        <div class="an-chart-xaxis">
+          <span v-for="(d, di) in validData(metric.data12m)" :key="di" class="an-xaxis-label">{{ d.m }}</span>
+        </div>
+
+        <!-- Latest value -->
+        <div class="an-chart-latest">
+          <span class="text-[13px] font-semibold text-[var(--text-primary)]">{{ validData(metric.data12m)[validData(metric.data12m).length - 1]?.display }}</span>
+          <span class="text-[11px] text-[var(--text-muted)]">latest</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.an-page {
+  max-width: 72rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-bottom: 3rem;
+}
+
+/* ══════════ KPI STRIP ══════════ */
+.an-kpi-strip {
+  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
+}
+.an-kpi-card {
+  padding: 14px 16px; border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  position: relative; overflow: hidden;
+}
+.an-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+.an-kpi-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+}
+.an-kpi-value {
+  margin-top: 4px; font-size: 20px; font-weight: 700;
+  color: var(--text-primary); font-variant-numeric: tabular-nums;
+}
+.an-kpi-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+.an-kpi-spark {
+  position: absolute; bottom: 0; left: 0; right: 0;
+  width: 100%; height: 32px; opacity: 0.6;
+}
+
+@media (max-width: 900px) { .an-kpi-strip { grid-template-columns: repeat(3, 1fr); } }
+@media (max-width: 500px) { .an-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
+
+/* ══════════ CHANGE BADGES ══════════ */
+.an-change-badge {
+  display: inline-flex; padding: 1px 6px; border-radius: 6px;
+  font-size: 10px; font-weight: 700; white-space: nowrap;
+}
+.an-change-positive { background: rgba(5,150,105,0.08); color: #059669; }
+.an-change-negative { background: rgba(193,56,56,0.08); color: #c13838; }
+.an-change-neutral { background: rgba(0,0,0,0.04); color: #8a8a86; }
+
+/* ══════════ DOMAIN TABS ══════════ */
+.an-domain-tabs {
+  display: inline-flex; gap: 2px; padding: 3px;
+  border-radius: 10px; background: rgba(0,0,0,0.04);
+  width: fit-content;
+}
+.an-domain-tab {
+  padding: 8px 18px; border-radius: 8px;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.an-tab-active { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.an-tab-inactive { background: transparent; color: var(--text-muted); }
+.an-tab-inactive:hover { color: var(--text-primary); }
+
+/* ══════════ CHART GRID ══════════ */
+.an-chart-grid {
+  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
+}
+@media (max-width: 700px) { .an-chart-grid { grid-template-columns: 1fr; } }
+
+.an-chart-card {
+  padding: 16px; border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+
+/* ── Chart header ── */
+.an-chart-header {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 8px; margin-bottom: 10px;
+}
+.an-chart-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+
+.an-chart-type-toggle {
+  display: inline-flex; gap: 1px; padding: 2px;
+  border-radius: 6px; background: rgba(0,0,0,0.03);
+}
+.an-ct-btn {
+  width: 24px; height: 22px; border-radius: 4px;
+  font-size: 10px; border: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: all 100ms ease;
+}
+.an-ct-on { background: #01696f; color: #fff; }
+.an-ct-off { background: transparent; color: #8a8a86; }
+.an-ct-off:hover { color: var(--text-primary); }
+
+/* ── SVG chart ── */
+.an-chart-svg { width: 100%; height: 120px; }
+
+/* ── X-axis labels ── */
+.an-chart-xaxis {
+  display: flex; justify-content: space-between;
+  padding: 4px 8px 0;
+}
+.an-xaxis-label {
+  font-size: 9px; font-weight: 600; color: #8a8a86;
+  text-transform: uppercase;
+}
+
+/* ── Latest value ── */
+.an-chart-latest {
+  display: flex; align-items: center; gap: 6px;
+  margin-top: 8px; padding-top: 8px;
+  border-top: 1px solid rgba(0,0,0,0.04);
+}
+
+/* ══════════ CHART BUILDER ══════════ */
+.an-builder {
+  padding: 20px; border-radius: 12px;
+  border: 1px solid rgba(1,105,111,0.12); background: rgba(1,105,111,0.01);
+}
+.an-builder-header { margin-bottom: 16px; }
+.an-builder-title {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 15px; font-weight: 600; color: var(--text-primary);
+}
+.an-builder-controls {
+  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
+  margin-bottom: 14px;
+}
+.an-builder-select {
+  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.08); background: #fff; color: var(--text-primary);
+  cursor: pointer;
+}
+.an-builder-select-wide { min-width: 200px; }
+.an-builder-select:focus { outline: none; border-color: #01696f; }
+
+.an-builder-toggle {
+  display: inline-flex; gap: 1px; padding: 2px;
+  border-radius: 8px; background: rgba(0,0,0,0.04);
+}
+.an-bt-btn {
+  padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
+  border: none; cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.an-bt-on { background: #01696f; color: #fff; }
+.an-bt-off { background: transparent; color: #8a8a86; }
+.an-bt-off:hover { color: var(--text-primary); }
+
+.an-builder-info {
+  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
+}
+
+.an-builder-svg { width: 100%; height: 180px; }
+</style>
diff --git a/app/pages/calendar.vue b/app/pages/calendar.vue
new file mode 100644
index 0000000..3ee790e
--- /dev/null
+++ b/app/pages/calendar.vue
@@ -0,0 +1,1514 @@
+<script setup lang="ts">
+usePageTitle('Calendar')
+
+type CalEventType = 'meeting' | 'renewal' | 'claim' | 'payment' | 'reminder' | 'threshold'
+
+interface CalEvent {
+  id: string
+  title: string
+  time: string
+  type: CalEventType
+  source?: 'gmail' | 'system' | 'manual'
+  customer?: string
+  detail?: string
+  urgent?: boolean
+  /** Day of month (1-based) for month view placement */
+  dayOfMonth?: number
+}
+
+/* ── Layer system ── */
+type CalLayer = 'renewals' | 'claims' | 'payments' | 'meetings' | 'reminders' | 'alerts'
+
+const layerMeta: Record<CalLayer, { label: string; types: CalEventType[]; color: string; icon: string }> = {
+  meetings:  { label: 'Meetings & calls', types: ['meeting'], color: '#01696f', icon: 'i-heroicons-calendar-days' },
+  renewals:  { label: 'Renewals', types: ['renewal'], color: '#7c3aed', icon: 'i-heroicons-arrow-path' },
+  claims:    { label: 'Claims', types: ['claim'], color: '#c13838', icon: 'i-heroicons-shield-exclamation' },
+  payments:  { label: 'Payments & AR', types: ['payment'], color: '#c27b1a', icon: 'i-heroicons-banknotes' },
+  reminders: { label: 'Reminders', types: ['reminder'], color: '#0f7b5f', icon: 'i-heroicons-bell' },
+  alerts:    { label: 'Threshold alerts', types: ['threshold'], color: '#be185d', icon: 'i-heroicons-exclamation-triangle' },
+}
+
+const LAYER_ORDER: CalLayer[] = ['meetings', 'renewals', 'claims', 'payments', 'reminders', 'alerts']
+
+const activeLayers = reactive<Record<CalLayer, boolean>>({
+  meetings: true,
+  renewals: true,
+  claims: true,
+  payments: true,
+  reminders: true,
+  alerts: true,
+})
+
+const layerPanelOpen = ref(false)
+
+const activeLayerCount = computed(() =>
+  LAYER_ORDER.filter(l => activeLayers[l]).length
+)
+
+/** Which event types are enabled by active layers */
+const enabledTypes = computed(() => {
+  const types = new Set<CalEventType>()
+  for (const layer of LAYER_ORDER) {
+    if (activeLayers[layer]) {
+      for (const t of layerMeta[layer].types) types.add(t)
+    }
+  }
+  return types
+})
+
+function toggleLayer(layer: CalLayer) { activeLayers[layer] = !activeLayers[layer] }
+function enableAllLayers() { LAYER_ORDER.forEach(l => { activeLayers[l] = true }) }
+function disableAllLayers() { LAYER_ORDER.forEach(l => { activeLayers[l] = false }) }
+
+const calView = ref<'month' | 'week' | 'day'>('month')
+
+const typeMeta: Record<CalEventType, { label: string; color: string; icon: string }> = {
+  meeting:   { label: 'Meetings', color: '#01696f', icon: 'i-heroicons-calendar-days' },
+  renewal:   { label: 'Renewals', color: '#7c3aed', icon: 'i-heroicons-arrow-path' },
+  claim:     { label: 'Claims', color: '#c13838', icon: 'i-heroicons-shield-exclamation' },
+  payment:   { label: 'Payments', color: '#c27b1a', icon: 'i-heroicons-banknotes' },
+  reminder:  { label: 'Reminders', color: '#0f7b5f', icon: 'i-heroicons-bell' },
+  threshold: { label: 'Alerts', color: '#be185d', icon: 'i-heroicons-exclamation-triangle' },
+}
+
+/* ── Today's events ── */
+const todayEventsSeed: CalEvent[] = [
+  { id: 'c1', title: 'Renewal review — Constructora Delta', time: '9:00 AM', type: 'renewal', source: 'system', customer: 'Constructora Delta S.A.', detail: 'Policy expires Jul 15. Premium $55K, 3 yr client.', urgent: true },
+  { id: 'c2', title: 'Call with María Pérez', time: '10:30 AM', type: 'meeting', source: 'gmail', customer: 'María Pérez', detail: 'Auto quote follow-up. Synced from Gmail.' },
+  { id: 'c3', title: 'Unpaid premium — Farmacia Salud', time: '11:00 AM', type: 'payment', source: 'system', customer: 'Farmacia Salud', detail: '45 days overdue. $12,800 group life.', urgent: true },
+  { id: 'c4', title: 'Claim status update — Hotel Pacífico', time: '1:00 PM', type: 'claim', source: 'system', customer: 'Hotel Pacífico', detail: 'Fire claim #CL-2891. Adjuster report due.' },
+  { id: 'c5', title: 'Client crossed $100K premium', time: '2:00 PM', type: 'threshold', source: 'system', customer: 'Banco Regional', detail: 'Total book now $186K. VIP follow-up recommended.' },
+  { id: 'c6', title: 'Prepare renewal proposal', time: '3:30 PM', type: 'reminder', source: 'manual', detail: 'Transportes del Sur fleet policy. Get 3 comparative quotes.' },
+  { id: 'c7', title: 'Team sync — weekly pipeline', time: '4:00 PM', type: 'meeting', source: 'gmail', detail: 'Google Meet link attached. All agents.' },
+  { id: 'c8', title: '5 renewals due next 7 days', time: '—', type: 'renewal', source: 'system', detail: 'Batch alert: review upcoming expirations.', urgent: true },
+]
+
+/* ── Month-spread mock events (scattered across the month) ── */
+const monthMockEventsSeed: CalEvent[] = [
+  { id: 'm1', title: 'Renewal — Transportes Delta fleet', time: '9:00', type: 'renewal', dayOfMonth: 2, urgent: true },
+  { id: 'm2', title: 'Payment due — Retail Plaza', time: '—', type: 'payment', dayOfMonth: 3 },
+  { id: 'm3', title: 'Client meeting — Banco Regional', time: '11:00', type: 'meeting', dayOfMonth: 5, customer: 'Banco Regional' },
+  { id: 'm4', title: 'Claim follow-up — Hotel Pacífico', time: '2:00', type: 'claim', dayOfMonth: 7 },
+  { id: 'm5', title: 'Renewal — Clínica Norte group health', time: '—', type: 'renewal', dayOfMonth: 8, urgent: true },
+  { id: 'm6', title: 'Premium threshold — Solís Calderón', time: '—', type: 'threshold', dayOfMonth: 10, customer: 'Luis Andrés Solís' },
+  { id: 'm7', title: 'Quarterly review prep', time: '3:00', type: 'reminder', dayOfMonth: 12 },
+  { id: 'm8', title: 'Team sync', time: '4:00', type: 'meeting', dayOfMonth: 14 },
+  { id: 'm9', title: 'Collections call — 3 accounts', time: '10:00', type: 'payment', dayOfMonth: 15, urgent: true },
+  { id: 'm10', title: 'New business onboarding — Startup Labs', time: '1:00', type: 'meeting', dayOfMonth: 17, customer: 'Startup Labs' },
+  { id: 'm11', title: 'Renewal batch — 4 policies', time: '—', type: 'renewal', dayOfMonth: 19 },
+  { id: 'm12', title: 'Claim deadline — CL-3020', time: '—', type: 'claim', dayOfMonth: 21, urgent: true },
+  { id: 'm13', title: 'Reminder: quote comparison due', time: '—', type: 'reminder', dayOfMonth: 22 },
+  { id: 'm14', title: 'Payment reconciliation', time: '9:00', type: 'payment', dayOfMonth: 24 },
+  { id: 'm15', title: 'Board presentation prep', time: '2:00', type: 'meeting', dayOfMonth: 26 },
+  { id: 'm16', title: 'Month-end close', time: '—', type: 'reminder', dayOfMonth: 28 },
+  { id: 'm17', title: 'Renewal — María Pérez auto', time: '—', type: 'renewal', dayOfMonth: 30 },
+]
+
+/* ── User-created appointments (reactive, add/remove) ── */
+const userAppointments = ref<CalEvent[]>([])
+let nextApptId = 1
+
+/* ── Add appointment modal ── */
+const addModalOpen = ref(false)
+const addForm = reactive({
+  title: '',
+  date: new Date().toISOString().slice(0, 10),
+  startTime: '09:00',
+  endTime: '10:00',
+  allDay: false,
+  type: 'meeting' as CalEventType,
+  customer: '',
+  dayOfMonth: new Date().getDate(),
+  location: '',
+  videoCall: false,
+  repeat: 'none' as 'none' | 'daily' | 'weekly' | 'monthly' | 'yearly',
+  guests: '',
+  notification: '15' as string,
+  color: '' as string,
+  detail: '',
+})
+
+function resetAddForm() {
+  addForm.title = ''
+  addForm.date = new Date().toISOString().slice(0, 10)
+  addForm.startTime = '09:00'
+  addForm.endTime = '10:00'
+  addForm.allDay = false
+  addForm.type = 'meeting'
+  addForm.customer = ''
+  addForm.dayOfMonth = new Date().getDate()
+  addForm.location = ''
+  addForm.videoCall = false
+  addForm.repeat = 'none'
+  addForm.guests = ''
+  addForm.notification = '15'
+  addForm.color = ''
+  addForm.detail = ''
+}
+
+const eventColors = [
+  { label: 'Teal', value: '#01696f' },
+  { label: 'Purple', value: '#7c3aed' },
+  { label: 'Red', value: '#c13838' },
+  { label: 'Amber', value: '#c27b1a' },
+  { label: 'Green', value: '#0f7b5f' },
+  { label: 'Pink', value: '#be185d' },
+  { label: 'Blue', value: '#2563eb' },
+]
+
+function openAddModal(presetDay?: number) {
+  resetAddForm()
+  if (presetDay) {
+    addForm.dayOfMonth = presetDay
+    const y = currentMonth.value.getFullYear()
+    const m = currentMonth.value.getMonth()
+    const d = new Date(y, m, presetDay)
+    addForm.date = d.toISOString().slice(0, 10)
+  }
+  addModalOpen.value = true
+}
+
+function submitAppointment() {
+  if (!addForm.title.trim()) return
+  const parsedDay = addForm.date ? new Date(addForm.date + 'T12:00:00').getDate() : addForm.dayOfMonth
+  const timeLabel = addForm.allDay ? 'All day' : addForm.startTime ? formatTime12(addForm.startTime) : '—'
+  const appt: CalEvent = {
+    id: `user-${nextApptId++}`,
+    title: addForm.title.trim(),
+    time: timeLabel,
+    type: addForm.type,
+    source: 'manual',
+    customer: addForm.customer.trim() || undefined,
+    detail: [
+      addForm.detail.trim(),
+      addForm.location ? `Location: ${addForm.location}` : '',
+      addForm.guests ? `Guests: ${addForm.guests}` : '',
+    ].filter(Boolean).join(' · ') || undefined,
+    dayOfMonth: parsedDay,
+  }
+  userAppointments.value = [...userAppointments.value, appt]
+  addModalOpen.value = false
+}
+
+function formatTime12(t: string) {
+  const [h, m] = t.split(':').map(Number)
+  const ampm = h >= 12 ? 'PM' : 'AM'
+  const h12 = h % 12 || 12
+  return `${h12}:${String(m).padStart(2, '0')} ${ampm}`
+}
+
+function removeAppointment(id: string) {
+  userAppointments.value = userAppointments.value.filter(a => a.id !== id)
+}
+
+/* ── Merged events ── */
+const todayEvents = computed(() => {
+  const today = new Date().getDate()
+  const userToday = userAppointments.value.filter(a => a.dayOfMonth === today)
+  return [...todayEventsSeed, ...userToday]
+})
+
+const monthMockEvents = computed(() => {
+  return [...monthMockEventsSeed, ...userAppointments.value]
+})
+
+const filteredEvents = computed(() => todayEvents.value.filter(e => enabledTypes.value.has(e.type)))
+
+/* ── Month calendar grid ── */
+const currentMonth = ref(new Date())
+
+const monthLabel = computed(() =>
+  currentMonth.value.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+)
+
+function prevMonth() {
+  const d = new Date(currentMonth.value)
+  d.setMonth(d.getMonth() - 1)
+  currentMonth.value = d
+}
+function nextMonth() {
+  const d = new Date(currentMonth.value)
+  d.setMonth(d.getMonth() + 1)
+  currentMonth.value = d
+}
+function goToday() {
+  currentMonth.value = new Date()
+}
+
+const monthGrid = computed(() => {
+  const year = currentMonth.value.getFullYear()
+  const month = currentMonth.value.getMonth()
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const daysInMonth = lastDay.getDate()
+
+  // Monday = 0 start
+  let startDow = firstDay.getDay() - 1
+  if (startDow < 0) startDow = 6
+
+  const today = new Date()
+  const isCurrentMonth = today.getFullYear() === year && today.getMonth() === month
+  const todayDate = today.getDate()
+
+  const cells: {
+    date: number
+    isCurrentMonth: boolean
+    isToday: boolean
+    events: CalEvent[]
+  }[] = []
+
+  // Previous month trailing days
+  const prevLastDay = new Date(year, month, 0).getDate()
+  for (let i = startDow - 1; i >= 0; i--) {
+    cells.push({ date: prevLastDay - i, isCurrentMonth: false, isToday: false, events: [] })
+  }
+
+  // Current month days
+  for (let d = 1; d <= daysInMonth; d++) {
+    const dayEvents = monthMockEvents.value.filter(e => e.dayOfMonth === d && enabledTypes.value.has(e.type))
+    // Add today's events to today's date
+    if (isCurrentMonth && d === todayDate) {
+      const todayFiltered = todayEventsSeed.filter(e => enabledTypes.value.has(e.type))
+      dayEvents.push(...todayFiltered)
+    }
+    cells.push({
+      date: d,
+      isCurrentMonth: true,
+      isToday: isCurrentMonth && d === todayDate,
+      events: dayEvents
+    })
+  }
+
+  // Next month leading days (fill to 6 rows)
+  const remaining = (7 - (cells.length % 7)) % 7
+  for (let i = 1; i <= remaining; i++) {
+    cells.push({ date: i, isCurrentMonth: false, isToday: false, events: [] })
+  }
+
+  return cells
+})
+
+const weekDays = computed(() => {
+  const today = new Date()
+  const dow = today.getDay()
+  const monday = new Date(today)
+  monday.setDate(today.getDate() - (dow === 0 ? 6 : dow - 1))
+  return Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(monday)
+    d.setDate(monday.getDate() + i)
+    return {
+      label: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][i],
+      date: d.getDate(),
+      isToday: d.toDateString() === today.toDateString(),
+      events: i === (dow === 0 ? 6 : dow - 1) ? todayEvents.value.length : Math.floor(Math.random() * 4)
+    }
+  })
+})
+
+function dotStyle(type: CalEventType) { return `background: ${typeMeta[type].color}` }
+
+/* ── Click outside to close panels ── */
+function onClickOutside(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (layerPanelOpen.value && !target.closest('.cal-layers-wrap')) layerPanelOpen.value = false
+}
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
+
+/* ── Google Calendar link (placeholder) ── */
+function openGoogleCalendar() {
+  window.open('https://calendar.google.com', '_blank')
+}
+</script>
+
+<template>
+  <div class="cal-page">
+    <!-- Header row -->
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Calendar</h1>
+        <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
+          Your schedule, system alerts, renewal deadlines, and follow-ups in one view.
+        </p>
+      </div>
+      <div class="flex items-center gap-2 flex-wrap">
+        <!-- Add appointment -->
+        <button type="button" class="cal-action-btn cal-action-primary" @click="openAddModal()">
+          <UIcon name="i-heroicons-plus" style="width: 14px; height: 14px;" />
+          New event
+        </button>
+        <!-- Google Calendar link -->
+        <button type="button" class="cal-action-btn" @click="openGoogleCalendar">
+          <UIcon name="i-heroicons-arrow-top-right-on-square" style="width: 13px; height: 13px;" />
+          Google Calendar
+        </button>
+        <!-- View toggle -->
+        <div class="cal-toggle">
+          <button type="button" class="cal-toggle-btn" :class="calView === 'month' ? 'cal-toggle-on' : 'cal-toggle-off'" @click="calView = 'month'">Month</button>
+          <button type="button" class="cal-toggle-btn" :class="calView === 'week' ? 'cal-toggle-on' : 'cal-toggle-off'" @click="calView = 'week'">Week</button>
+          <button type="button" class="cal-toggle-btn" :class="calView === 'day' ? 'cal-toggle-on' : 'cal-toggle-off'" @click="calView = 'day'">Day</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Layer strip + integration badges -->
+    <div class="cal-layers-row">
+      <!-- Active layer pills -->
+      <div class="flex items-center gap-2 flex-wrap flex-1 min-w-0">
+        <TransitionGroup
+          enter-active-class="transition-all duration-200 ease-out"
+          enter-from-class="opacity-0 scale-90"
+          enter-to-class="opacity-100 scale-100"
+          leave-active-class="transition-all duration-150 ease-in"
+          leave-from-class="opacity-100 scale-100"
+          leave-to-class="opacity-0 scale-90"
+        >
+          <button
+            v-for="layer in LAYER_ORDER"
+            v-show="activeLayers[layer]"
+            :key="layer"
+            type="button"
+            class="cal-layer-pill"
+            :style="`--lc: ${layerMeta[layer].color}`"
+            @click="toggleLayer(layer)"
+            :title="`Click to hide ${layerMeta[layer].label}`"
+          >
+            <span class="cal-layer-dot" :style="`background: ${layerMeta[layer].color}`" />
+            {{ layerMeta[layer].label }}
+            <UIcon name="i-heroicons-x-mark" style="width: 10px; height: 10px; opacity: 0.5;" />
+          </button>
+        </TransitionGroup>
+        <span v-if="activeLayerCount === 0" class="text-[12px] text-[var(--text-muted)] italic">No layers active — click Layers to add some</span>
+      </div>
+
+      <!-- Layers config button -->
+      <div class="cal-layers-wrap relative">
+        <button type="button" class="cal-ctrl-btn" @click.stop="layerPanelOpen = !layerPanelOpen">
+          <UIcon name="i-heroicons-adjustments-horizontal" style="width: 14px; height: 14px;" />
+          Layers
+          <span v-if="activeLayerCount < 6" class="cal-ctrl-count">{{ activeLayerCount }}/6</span>
+        </button>
+        <!-- Layer config dropdown -->
+        <Transition
+          enter-active-class="transition duration-150 ease-out"
+          enter-from-class="opacity-0 scale-95 -translate-y-1"
+          enter-to-class="opacity-100 scale-100 translate-y-0"
+          leave-active-class="transition duration-100 ease-in"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0 scale-95"
+        >
+          <div v-if="layerPanelOpen" class="cal-layer-dropdown">
+            <div class="cal-layer-dropdown-head">
+              <span>Calendar layers</span>
+              <div class="flex gap-1">
+                <button type="button" class="cal-layer-action" @click="enableAllLayers">All on</button>
+                <button type="button" class="cal-layer-action" @click="disableAllLayers">All off</button>
+              </div>
+            </div>
+            <p class="cal-layer-dropdown-hint">Toggle information layers on/off to customize your view.</p>
+            <ul class="cal-layer-list">
+              <li
+                v-for="layer in LAYER_ORDER"
+                :key="layer"
+                class="cal-layer-item"
+                :class="activeLayers[layer] ? 'cal-layer-item-on' : ''"
+                @click="toggleLayer(layer)"
+              >
+                <div class="cal-layer-check" :style="activeLayers[layer] ? `background: ${layerMeta[layer].color}; border-color: ${layerMeta[layer].color}` : ''">
+                  <UIcon v-if="activeLayers[layer]" name="i-heroicons-check" style="width: 11px; height: 11px; color: #fff;" />
+                </div>
+                <UIcon :name="layerMeta[layer].icon" style="width: 14px; height: 14px;" :style="`color: ${layerMeta[layer].color}; opacity: 0.7;`" />
+                <span class="text-[12px] font-medium text-[var(--text-primary)]">{{ layerMeta[layer].label }}</span>
+              </li>
+            </ul>
+          </div>
+        </Transition>
+      </div>
+
+      <!-- Integration badges -->
+      <div class="flex items-center gap-1.5 ml-1">
+        <span class="cal-badge cal-badge-gmail"><UIcon name="i-heroicons-envelope" style="width: 11px; height: 11px;" /> Gmail</span>
+        <span class="cal-badge cal-badge-system"><UIcon name="i-heroicons-cog-6-tooth" style="width: 11px; height: 11px;" /> System</span>
+      </div>
+    </div>
+
+    <!-- Legend -->
+    <div class="cal-legend">
+      <div class="flex items-center justify-between">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.04em] text-[#8a8a86]">Event types</p>
+        <p class="text-[10px] text-[var(--text-muted)]">Double-click a day to add an event</p>
+      </div>
+      <div class="flex flex-wrap gap-3 mt-2">
+        <div v-for="(meta, type) in typeMeta" :key="type" class="flex items-center gap-1.5">
+          <span class="cal-dot" :style="`background: ${meta.color}`" />
+          <span class="text-[12px] text-[var(--text-muted)]">{{ meta.label }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main card -->
+    <div class="cal-card">
+
+      <!-- ═══ MONTH VIEW ═══ -->
+      <template v-if="calView === 'month'">
+        <!-- Month navigation -->
+        <div class="cal-month-nav">
+          <button type="button" class="cal-month-arrow" @click="prevMonth">
+            <UIcon name="i-heroicons-chevron-left" style="width: 16px; height: 16px;" />
+          </button>
+          <div class="flex items-center gap-2">
+            <h2 class="text-[14px] font-semibold text-[var(--text-primary)]">{{ monthLabel }}</h2>
+            <button type="button" class="cal-today-btn" @click="goToday">Today</button>
+          </div>
+          <button type="button" class="cal-month-arrow" @click="nextMonth">
+            <UIcon name="i-heroicons-chevron-right" style="width: 16px; height: 16px;" />
+          </button>
+        </div>
+
+        <!-- Day-of-week headers -->
+        <div class="cal-month-header">
+          <div v-for="day in ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']" :key="day" class="cal-month-dow">
+            {{ day }}
+          </div>
+        </div>
+
+        <!-- Calendar grid -->
+        <div class="cal-month-grid">
+          <div
+            v-for="(cell, ci) in monthGrid"
+            :key="ci"
+            class="cal-month-cell"
+            :class="{
+              'cal-month-cell-other': !cell.isCurrentMonth,
+              'cal-month-cell-today': cell.isToday,
+            }"
+            @dblclick="cell.isCurrentMonth && openAddModal(cell.date)"
+          >
+            <div class="cal-month-cell-head">
+              <span class="cal-month-date" :class="cell.isToday ? 'cal-month-date-today' : ''">
+                {{ cell.date }}
+              </span>
+              <!-- Add button on hover for current month cells -->
+              <button
+                v-if="cell.isCurrentMonth"
+                type="button"
+                class="cal-cell-add"
+                title="Add event"
+                @click.stop="openAddModal(cell.date)"
+              >
+                <UIcon name="i-heroicons-plus" style="width: 10px; height: 10px;" />
+              </button>
+            </div>
+            <div v-if="cell.events.length > 0" class="cal-month-events">
+              <div
+                v-for="ev in cell.events.slice(0, 3)"
+                :key="ev.id"
+                class="cal-month-ev"
+                :class="ev.urgent ? 'cal-month-ev-urgent' : ''"
+                :title="ev.title"
+              >
+                <span class="cal-month-ev-dot" :style="dotStyle(ev.type)" />
+                <span class="cal-month-ev-text">{{ ev.title }}</span>
+                <!-- Remove button for user-created events -->
+                <button
+                  v-if="ev.id.startsWith('user-')"
+                  type="button"
+                  class="cal-ev-remove-mini"
+                  title="Remove"
+                  @click.stop="removeAppointment(ev.id)"
+                >
+                  <UIcon name="i-heroicons-x-mark" style="width: 8px; height: 8px;" />
+                </button>
+              </div>
+              <p v-if="cell.events.length > 3" class="cal-month-ev-more">
+                +{{ cell.events.length - 3 }} more
+              </p>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- ═══ WEEK VIEW ═══ -->
+      <template v-if="calView === 'week'">
+        <div class="cal-week">
+          <div v-for="day in weekDays" :key="day.label" class="cal-week-cell" :class="day.isToday ? 'cal-week-active' : ''">
+            <span class="text-[10px] uppercase tracking-wider" :class="day.isToday ? 'font-semibold text-[#01696f]' : 'text-[var(--text-muted)]'">{{ day.label }}</span>
+            <span class="cal-week-num" :class="day.isToday ? 'cal-week-num-today' : ''">{{ day.date }}</span>
+            <div v-if="day.events > 0" class="flex justify-center gap-0.5 mt-1">
+              <span v-for="n in Math.min(day.events, 4)" :key="n" class="cal-week-pip" :class="day.isToday ? 'bg-[#01696f]' : 'bg-[rgba(0,0,0,0.12)]'" />
+            </div>
+          </div>
+        </div>
+        <div class="cal-events">
+          <div
+            v-for="event in filteredEvents"
+            :key="event.id"
+            class="cal-ev"
+            :class="event.urgent ? 'cal-ev-urgent' : ''"
+          >
+            <div class="cal-ev-time">{{ event.time }}</div>
+            <div class="cal-ev-dot" :style="dotStyle(event.type)" />
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2 flex-wrap">
+                <p class="text-[13px] font-medium text-[var(--text-primary)]">{{ event.title }}</p>
+                <span v-if="event.urgent" class="cal-ev-urgent-tag">Urgent</span>
+                <span v-if="event.id.startsWith('user-')" class="cal-ev-user-tag">You</span>
+              </div>
+              <p v-if="event.detail" class="mt-0.5 text-[12px] leading-snug text-[var(--text-muted)]">{{ event.detail }}</p>
+            </div>
+            <button
+              v-if="event.id.startsWith('user-')"
+              type="button"
+              class="cal-ev-remove"
+              title="Remove event"
+              @click="removeAppointment(event.id)"
+            >
+              <UIcon name="i-heroicons-trash" style="width: 14px; height: 14px;" />
+            </button>
+            <UIcon v-else :name="typeMeta[event.type].icon" style="width: 16px; height: 16px; flex-shrink: 0; opacity: 0.4;" :style="`color: ${typeMeta[event.type].color}`" />
+          </div>
+        </div>
+      </template>
+
+      <!-- ═══ DAY VIEW ═══ -->
+      <template v-if="calView === 'day'">
+        <div class="cal-week">
+          <div v-for="day in weekDays" :key="day.label" class="cal-week-cell" :class="day.isToday ? 'cal-week-active' : ''">
+            <span class="text-[10px] uppercase tracking-wider" :class="day.isToday ? 'font-semibold text-[#01696f]' : 'text-[var(--text-muted)]'">{{ day.label }}</span>
+            <span class="cal-week-num" :class="day.isToday ? 'cal-week-num-today' : ''">{{ day.date }}</span>
+            <div v-if="day.events > 0" class="flex justify-center gap-0.5 mt-1">
+              <span v-for="n in Math.min(day.events, 4)" :key="n" class="cal-week-pip" :class="day.isToday ? 'bg-[#01696f]' : 'bg-[rgba(0,0,0,0.12)]'" />
+            </div>
+          </div>
+        </div>
+
+        <div v-if="filteredEvents.length === 0" class="px-6 py-12 text-center">
+          <p class="text-[13px] text-[var(--text-muted)]">No events match your current layers.</p>
+        </div>
+        <div v-else class="cal-events">
+          <div
+            v-for="event in filteredEvents"
+            :key="event.id"
+            class="cal-ev"
+            :class="event.urgent ? 'cal-ev-urgent' : ''"
+          >
+            <div class="cal-ev-time">{{ event.time }}</div>
+            <div class="cal-ev-dot" :style="dotStyle(event.type)" />
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2 flex-wrap">
+                <p class="text-[13px] font-medium text-[var(--text-primary)]">{{ event.title }}</p>
+                <span v-if="event.urgent" class="cal-ev-urgent-tag">Urgent</span>
+                <span v-if="event.id.startsWith('user-')" class="cal-ev-user-tag">You</span>
+              </div>
+              <p v-if="event.detail" class="mt-0.5 text-[12px] leading-snug text-[var(--text-muted)]">{{ event.detail }}</p>
+              <div class="mt-1.5 flex items-center gap-2 flex-wrap">
+                <span class="cal-ev-src">{{ event.source === 'gmail' ? 'Gmail' : event.source === 'system' ? 'System' : 'Manual' }}</span>
+                <span v-if="event.customer" class="cal-ev-cust">{{ event.customer }}</span>
+              </div>
+            </div>
+            <button
+              v-if="event.id.startsWith('user-')"
+              type="button"
+              class="cal-ev-remove"
+              title="Remove event"
+              @click="removeAppointment(event.id)"
+            >
+              <UIcon name="i-heroicons-trash" style="width: 14px; height: 14px;" />
+            </button>
+            <UIcon v-else :name="typeMeta[event.type].icon" style="width: 16px; height: 16px; flex-shrink: 0; opacity: 0.4;" :style="`color: ${typeMeta[event.type].color}`" />
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- ═══ ADD EVENT MODAL ═══ -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="addModalOpen" class="cal-modal-overlay" @click.self="addModalOpen = false">
+          <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0 scale-95 translate-y-2"
+            enter-to-class="opacity-100 scale-100 translate-y-0"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+          >
+            <div v-if="addModalOpen" class="cal-modal">
+              <!-- Title bar -->
+              <div class="cal-modal-head">
+                <div class="cal-modal-head-left">
+                  <h3>New event</h3>
+                </div>
+                <button type="button" class="cal-modal-close" @click="addModalOpen = false">
+                  <UIcon name="i-heroicons-x-mark" style="width: 16px; height: 16px;" />
+                </button>
+              </div>
+
+              <div class="cal-modal-body">
+                <!-- Title (large input, Gmail-style) -->
+                <input
+                  v-model="addForm.title"
+                  type="text"
+                  class="cal-title-input"
+                  placeholder="Add title"
+                  @keydown.enter="submitAppointment"
+                />
+
+                <!-- Event type chips -->
+                <div class="cal-type-chips">
+                  <button
+                    v-for="(meta, type) in typeMeta"
+                    :key="type"
+                    type="button"
+                    class="cal-type-chip"
+                    :class="{ 'cal-type-chip--active': addForm.type === type }"
+                    :style="addForm.type === type ? `--chip-c: ${meta.color}` : ''"
+                    @click="addForm.type = type"
+                  >
+                    <UIcon :name="meta.icon" style="width: 13px; height: 13px;" />
+                    {{ meta.label }}
+                  </button>
+                </div>
+
+                <!-- Date & time row -->
+                <div class="cal-row cal-row-icon">
+                  <UIcon name="i-heroicons-clock" class="cal-row-icon-el" />
+                  <div class="cal-row-content">
+                    <div class="cal-datetime-row">
+                      <input v-model="addForm.date" type="date" class="cal-input cal-input-date" />
+                      <template v-if="!addForm.allDay">
+                        <input v-model="addForm.startTime" type="time" class="cal-input cal-input-time" />
+                        <span class="cal-time-sep">—</span>
+                        <input v-model="addForm.endTime" type="time" class="cal-input cal-input-time" />
+                      </template>
+                    </div>
+                    <label class="cal-checkbox-label">
+                      <input v-model="addForm.allDay" type="checkbox" class="cal-checkbox" />
+                      All day
+                    </label>
+                  </div>
+                </div>
+
+                <!-- Repeat -->
+                <div class="cal-row cal-row-icon">
+                  <UIcon name="i-heroicons-arrow-path" class="cal-row-icon-el" />
+                  <select v-model="addForm.repeat" class="cal-select cal-select-full">
+                    <option value="none">Does not repeat</option>
+                    <option value="daily">Daily</option>
+                    <option value="weekly">Weekly</option>
+                    <option value="monthly">Monthly</option>
+                    <option value="yearly">Annually</option>
+                  </select>
+                </div>
+
+                <!-- Guests -->
+                <div class="cal-row cal-row-icon">
+                  <UIcon name="i-heroicons-user-plus" class="cal-row-icon-el" />
+                  <input v-model="addForm.guests" type="text" class="cal-input cal-input-full" placeholder="Add guests (emails, comma separated)" />
+                </div>
+
+                <!-- Video call toggle -->
+                <div class="cal-row cal-row-icon">
+                  <UIcon name="i-heroicons-video-camera" class="cal-row-icon-el" />
+                  <button
+                    type="button"
+                    class="cal-video-btn"
+                    :class="{ 'cal-video-btn--active': addForm.videoCall }"
+                    @click="addForm.videoCall = !addForm.videoCall"
+                  >
+                    <UIcon :name="addForm.videoCall ? 'i-heroicons-check-circle' : 'i-heroicons-plus-circle'" style="width: 15px; height: 15px;" />
+                    {{ addForm.videoCall ? 'Google Meet link added' : 'Add Google Meet video conferencing' }}
+                  </button>
+                </div>
+
+                <!-- Location -->
+                <div class="cal-row cal-row-icon">
+                  <UIcon name="i-heroicons-map-pin" class="cal-row-icon-el" />
+                  <input v-model="addForm.location" type="text" class="cal-input cal-input-full" placeholder="Add location" />
+                </div>
+
+                <!-- Notification -->
+                <div class="cal-row cal-row-icon">
+                  <UIcon name="i-heroicons-bell" class="cal-row-icon-el" />
+                  <select v-model="addForm.notification" class="cal-select cal-select-full">
+                    <option value="0">At time of event</option>
+                    <option value="5">5 minutes before</option>
+                    <option value="10">10 minutes before</option>
+                    <option value="15">15 minutes before</option>
+                    <option value="30">30 minutes before</option>
+                    <option value="60">1 hour before</option>
+                    <option value="1440">1 day before</option>
+                  </select>
+                </div>
+
+                <!-- Customer (insurance-specific) -->
+                <div class="cal-row cal-row-icon">
+                  <UIcon name="i-heroicons-building-office" class="cal-row-icon-el" />
+                  <input v-model="addForm.customer" type="text" class="cal-input cal-input-full" placeholder="Link to customer or policy (optional)" />
+                </div>
+
+                <!-- Color -->
+                <div class="cal-row cal-row-icon">
+                  <UIcon name="i-heroicons-swatch" class="cal-row-icon-el" />
+                  <div class="cal-color-row">
+                    <button
+                      v-for="c in eventColors"
+                      :key="c.value"
+                      type="button"
+                      class="cal-color-dot"
+                      :class="{ 'cal-color-dot--active': addForm.color === c.value }"
+                      :style="`background: ${c.value}`"
+                      :title="c.label"
+                      @click="addForm.color = addForm.color === c.value ? '' : c.value"
+                    />
+                  </div>
+                </div>
+
+                <!-- Description -->
+                <div class="cal-row cal-row-icon cal-row-icon-top">
+                  <UIcon name="i-heroicons-bars-3-bottom-left" class="cal-row-icon-el" />
+                  <textarea v-model="addForm.detail" class="cal-textarea cal-textarea-full" rows="3" placeholder="Add description or notes" />
+                </div>
+              </div>
+
+              <div class="cal-modal-foot">
+                <div class="cal-gcal-hint">
+                  <UIcon name="i-heroicons-arrow-top-right-on-square" style="width: 12px; height: 12px;" />
+                  <span>Sync with <button type="button" class="cal-gcal-link" @click="openGoogleCalendar">Google Calendar</button></span>
+                </div>
+                <div class="cal-modal-foot-actions">
+                  <button type="button" class="cal-btn-cancel" @click="addModalOpen = false">Cancel</button>
+                  <button
+                    type="button"
+                    class="cal-btn-submit"
+                    :disabled="!addForm.title.trim()"
+                    @click="submitAppointment"
+                  >
+                    Save
+                  </button>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.cal-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-bottom: 3rem;
+}
+
+/* ── Action buttons ── */
+.cal-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.08);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: #fff;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.cal-action-btn:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+.cal-action-primary {
+  background: #01696f;
+  color: #fff;
+  border-color: #01696f;
+}
+.cal-action-primary:hover {
+  background: #015a5f;
+  color: #fff;
+  border-color: #015a5f;
+}
+
+/* ── Controls ── */
+.cal-ctrl-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.08);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.cal-ctrl-btn:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+.cal-ctrl-count {
+  font-size: 10px; font-weight: 600; padding: 0 5px;
+  border-radius: 9999px; background: rgba(1,105,111,0.1); color: #01696f;
+}
+
+.cal-toggle {
+  display: inline-flex; gap: 1px; padding: 2px; border-radius: 8px; background: rgba(0,0,0,0.04);
+}
+.cal-toggle-btn {
+  padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
+  border: none; cursor: pointer; transition: all 150ms ease;
+}
+.cal-toggle-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
+.cal-toggle-off { background: transparent; color: var(--text-muted); }
+
+/* ── Layers row ── */
+.cal-layers-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.cal-layer-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px 3px 8px;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, var(--lc) 20%, transparent);
+  background: color-mix(in srgb, var(--lc) 5%, transparent);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--lc);
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.cal-layer-pill:hover {
+  background: color-mix(in srgb, var(--lc) 10%, transparent);
+  border-color: color-mix(in srgb, var(--lc) 30%, transparent);
+}
+.cal-layer-dot {
+  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
+}
+
+/* ── Layer dropdown ── */
+.cal-layer-dropdown {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  z-index: 30;
+  width: 260px;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
+  overflow: hidden;
+}
+.cal-layer-dropdown-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.cal-layer-action {
+  font-size: 10px;
+  font-weight: 500;
+  color: #01696f;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: background 150ms ease;
+}
+.cal-layer-action:hover { background: rgba(1,105,111,0.06); }
+.cal-layer-dropdown-hint {
+  padding: 4px 14px 8px;
+  font-size: 11px;
+  color: #8a8a86;
+}
+.cal-layer-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.cal-layer-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px;
+  cursor: pointer;
+  transition: background 100ms ease;
+  border-top: 1px solid rgba(0,0,0,0.03);
+}
+.cal-layer-item:hover { background: rgba(0,0,0,0.02); }
+.cal-layer-item-on { background: rgba(1,105,111,0.02); }
+.cal-layer-item-on:hover { background: rgba(1,105,111,0.04); }
+.cal-layer-check {
+  width: 16px; height: 16px;
+  border-radius: 4px;
+  border: 1.5px solid rgba(0,0,0,0.15);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: all 150ms ease;
+}
+
+/* ── Badges ── */
+.cal-badge {
+  display: inline-flex; align-items: center; gap: 3px;
+  padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 500;
+}
+.cal-badge-gmail  { background: rgba(219,68,55,0.06); color: #b33a2e; }
+.cal-badge-system { background: rgba(1,105,111,0.06); color: #01696f; }
+
+/* ── Card ── */
+.cal-card {
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03); overflow: hidden;
+}
+
+/* ══════════════════════════════════════════════════════
+   MONTH VIEW
+   ══════════════════════════════════════════════════════ */
+.cal-month-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.cal-month-arrow {
+  display: flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 6px;
+  border: none; background: transparent; color: #8a8a86;
+  cursor: pointer; transition: all 150ms ease;
+}
+.cal-month-arrow:hover { background: rgba(0,0,0,0.04); color: var(--text-primary); }
+.cal-today-btn {
+  font-size: 11px; font-weight: 500; color: #01696f;
+  padding: 2px 8px; border-radius: 4px; border: none;
+  background: rgba(1,105,111,0.06); cursor: pointer;
+  transition: background 150ms ease;
+}
+.cal-today-btn:hover { background: rgba(1,105,111,0.1); }
+
+.cal-month-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.cal-month-dow {
+  padding: 8px 0;
+  text-align: center;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #8a8a86;
+}
+
+.cal-month-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.cal-month-cell {
+  min-height: 90px;
+  padding: 6px 8px;
+  border-right: 1px solid rgba(0,0,0,0.04);
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+  transition: background 100ms ease;
+  position: relative;
+  overflow: hidden;
+}
+.cal-month-cell:nth-child(7n) { border-right: none; }
+.cal-month-cell:hover { background: rgba(0,0,0,0.01); }
+.cal-month-cell-other { opacity: 0.35; }
+.cal-month-cell-today { background: rgba(1,105,111,0.02); }
+.cal-month-cell-today:hover { background: rgba(1,105,111,0.04); }
+
+.cal-month-cell-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cal-cell-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px; height: 16px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 150ms ease;
+}
+.cal-month-cell:hover .cal-cell-add { opacity: 1; }
+.cal-cell-add:hover { background: rgba(1,105,111,0.1); color: #01696f; }
+
+.cal-month-date {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; border-radius: 50%;
+  font-size: 12px; font-weight: 500; color: var(--text-primary);
+}
+.cal-month-date-today {
+  background: #01696f; color: #ffffff; font-weight: 600;
+}
+
+.cal-month-events {
+  display: flex; flex-direction: column; gap: 2px; margin-top: 4px;
+}
+.cal-month-ev {
+  display: flex; align-items: center; gap: 4px;
+  padding: 2px 4px; border-radius: 4px;
+  transition: background 100ms ease;
+  cursor: default;
+}
+.cal-month-ev:hover { background: rgba(0,0,0,0.03); }
+.cal-month-ev-urgent { background: rgba(193,56,56,0.03); }
+.cal-month-ev-dot {
+  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
+}
+.cal-month-ev-text {
+  font-size: 10px; font-weight: 500; color: var(--text-primary);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  min-width: 0; flex: 1;
+}
+.cal-month-ev-more {
+  font-size: 9px; font-weight: 600; color: #01696f;
+  padding: 1px 4px;
+}
+.cal-ev-remove-mini {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px; height: 14px;
+  border-radius: 3px;
+  border: none;
+  background: transparent;
+  color: #c13838;
+  cursor: pointer;
+  opacity: 0;
+  flex-shrink: 0;
+  transition: all 120ms ease;
+}
+.cal-month-ev:hover .cal-ev-remove-mini { opacity: 0.6; }
+.cal-ev-remove-mini:hover { opacity: 1 !important; background: rgba(193,56,56,0.08); }
+
+/* ══════════════════════════════════════════════════════
+   WEEK STRIP
+   ══════════════════════════════════════════════════════ */
+.cal-week {
+  display: grid; grid-template-columns: repeat(7, 1fr);
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.cal-week-cell {
+  display: flex; flex-direction: column; align-items: center;
+  padding: 12px 4px 10px; transition: background 100ms ease;
+}
+.cal-week-active { background: rgba(1,105,111,0.03); }
+.cal-week-num {
+  font-size: 16px; font-weight: 600; margin-top: 2px; color: var(--text-primary);
+  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
+}
+.cal-week-num-today { background: #01696f; color: #fff; }
+.cal-week-pip { width: 4px; height: 4px; border-radius: 50%; }
+
+/* ══════════════════════════════════════════════════════
+   DAY EVENT LIST
+   ══════════════════════════════════════════════════════ */
+.cal-events { display: flex; flex-direction: column; }
+.cal-ev {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.04);
+  transition: background 100ms ease;
+}
+.cal-ev:last-child { border-bottom: none; }
+.cal-ev:hover { background: rgba(0,0,0,0.015); }
+.cal-ev-urgent { background: rgba(193,56,56,0.02); }
+.cal-ev-urgent:hover { background: rgba(193,56,56,0.04); }
+
+.cal-ev-time {
+  width: 68px; flex-shrink: 0; font-size: 12px; font-weight: 500;
+  color: var(--text-muted); padding-top: 1px; font-variant-numeric: tabular-nums;
+}
+.cal-ev-dot {
+  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
+}
+.cal-ev-urgent-tag {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(193,56,56,0.08); color: #c13838; flex-shrink: 0;
+}
+.cal-ev-user-tag {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(1,105,111,0.08); color: #01696f; flex-shrink: 0;
+}
+.cal-ev-src {
+  font-size: 10px; font-weight: 500; padding: 1px 5px; border-radius: 4px;
+  background: rgba(0,0,0,0.04); color: var(--text-muted);
+}
+.cal-ev-cust {
+  font-size: 10px; font-weight: 500; padding: 1px 5px; border-radius: 4px;
+  background: rgba(1,105,111,0.06); color: #01696f;
+}
+.cal-ev-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px; height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: #c13838;
+  cursor: pointer;
+  opacity: 0;
+  flex-shrink: 0;
+  transition: all 150ms ease;
+}
+.cal-ev:hover .cal-ev-remove { opacity: 0.5; }
+.cal-ev-remove:hover { opacity: 1 !important; background: rgba(193,56,56,0.06); }
+
+/* ── Legend ── */
+.cal-legend {
+  padding: 16px 20px; border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06); background: var(--surface);
+}
+.cal-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+
+/* ══════════════════════════════════════════════════════
+   ADD EVENT MODAL
+   ══════════════════════════════════════════════════════ */
+.cal-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(0,0,0,0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  backdrop-filter: blur(2px);
+}
+.cal-modal {
+  width: 100%;
+  max-width: 560px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
+  overflow: hidden;
+  max-height: calc(100vh - 40px);
+  display: flex;
+  flex-direction: column;
+}
+.cal-modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px 0;
+  flex-shrink: 0;
+}
+.cal-modal-head h3 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.cal-modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px; height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.cal-modal-close:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
+
+.cal-modal-body {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+/* ── Gmail-style title input ── */
+.cal-title-input {
+  width: 100%;
+  border: none;
+  outline: none;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--text-primary);
+  padding: 4px 0 8px;
+  border-bottom: 2px solid rgba(0,0,0,0.06);
+  background: transparent;
+  transition: border-color 200ms ease;
+}
+.cal-title-input::placeholder { color: #b0b0ac; font-weight: 400; }
+.cal-title-input:focus { border-bottom-color: #01696f; }
+
+/* ── Event type chips ── */
+.cal-type-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.cal-type-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 11px;
+  border-radius: 9999px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.cal-type-chip:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+.cal-type-chip--active {
+  background: color-mix(in srgb, var(--chip-c, #01696f) 8%, transparent);
+  border-color: color-mix(in srgb, var(--chip-c, #01696f) 25%, transparent);
+  color: var(--chip-c, #01696f);
+}
+
+/* ── Form rows with icon ── */
+.cal-row { display: flex; align-items: center; gap: 10px; }
+.cal-row-icon { display: flex; align-items: center; gap: 10px; }
+.cal-row-icon-el {
+  width: 18px; height: 18px;
+  color: #8a8a86;
+  flex-shrink: 0;
+}
+.cal-row-icon-top { align-items: flex-start; }
+.cal-row-icon-top .cal-row-icon-el { margin-top: 8px; }
+.cal-row-content {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── Date & time row ── */
+.cal-datetime-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.cal-input-date { min-width: 140px; flex: 1; }
+.cal-input-time { width: 110px; }
+.cal-time-sep {
+  font-size: 13px;
+  color: #8a8a86;
+  flex-shrink: 0;
+}
+.cal-input-full { flex: 1; min-width: 0; }
+.cal-select-full { flex: 1; min-width: 0; }
+.cal-textarea-full { flex: 1; min-width: 0; }
+
+/* ── Checkbox ── */
+.cal-checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.cal-checkbox {
+  width: 14px; height: 14px;
+  border-radius: 3px;
+  accent-color: #01696f;
+  cursor: pointer;
+}
+
+/* ── Video call button ── */
+.cal-video-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 150ms ease;
+  flex: 1;
+}
+.cal-video-btn:hover { border-color: rgba(0,0,0,0.15); }
+.cal-video-btn--active {
+  background: rgba(1,105,111,0.04);
+  border-color: rgba(1,105,111,0.2);
+  color: #01696f;
+}
+
+/* ── Color dots ── */
+.cal-color-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.cal-color-dot {
+  width: 20px; height: 20px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+  position: relative;
+}
+.cal-color-dot:hover { transform: scale(1.15); }
+.cal-color-dot--active {
+  border-color: var(--text-primary);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px currentColor;
+}
+
+/* ── Modal footer ── */
+.cal-modal-foot-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cal-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.cal-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+}
+.cal-input {
+  padding: 7px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 13px;
+  color: var(--text-primary);
+  background: #fff;
+  outline: none;
+  transition: border-color 150ms ease;
+}
+.cal-input:focus { border-color: #01696f; }
+.cal-select {
+  padding: 7px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 13px;
+  color: var(--text-primary);
+  background: #fff;
+  outline: none;
+  transition: border-color 150ms ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8a86' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 28px;
+}
+.cal-select:focus { border-color: #01696f; }
+.cal-textarea {
+  padding: 7px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 13px;
+  color: var(--text-primary);
+  background: #fff;
+  outline: none;
+  resize: vertical;
+  font-family: inherit;
+  transition: border-color 150ms ease;
+}
+.cal-textarea:focus { border-color: #01696f; }
+
+.cal-gcal-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(0,0,0,0.02);
+  font-size: 11px;
+  color: #8a8a86;
+}
+.cal-gcal-link {
+  color: #01696f;
+  font-weight: 500;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: rgba(1,105,111,0.3);
+  text-underline-offset: 2px;
+  transition: color 150ms ease;
+}
+.cal-gcal-link:hover { color: #015a5f; }
+
+.cal-modal-foot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px 16px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+}
+.cal-btn-cancel {
+  padding: 7px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.cal-btn-cancel:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+.cal-btn-submit {
+  padding: 7px 16px;
+  border-radius: 8px;
+  border: none;
+  background: #01696f;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.cal-btn-submit:hover { background: #015a5f; }
+.cal-btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ── Responsive ── */
+@media (max-width: 640px) {
+  .cal-month-cell { min-height: 60px; padding: 4px; }
+  .cal-month-ev-text { font-size: 9px; }
+  .cal-month-date { width: 20px; height: 20px; font-size: 11px; }
+  .cal-layers-row { flex-direction: column; align-items: flex-start; }
+}
+</style>
diff --git a/app/pages/claims/[id].vue b/app/pages/claims/[id].vue
new file mode 100644
index 0000000..cc59319
--- /dev/null
+++ b/app/pages/claims/[id].vue
@@ -0,0 +1,1198 @@
+<script setup lang="ts">
+import {
+  MOCK_CLAIM_DETAILS, CARRIER_STATUS_LABELS, WORKFLOW_STATUS_LABELS,
+  PRIORITY_LABELS, TASK_STATUS_LABELS, DOC_CATEGORY_LABELS,
+  slaColor, fmtClaimMoney,
+  type ClaimDetail, type ClaimTask, type ClaimCommEntry, type ClaimDocument,
+  type CommType, type DocCategory, type TaskStatus, type GeneratedFormStatus,
+} from '~/data/mock-claims'
+
+definePageMeta({ ssr: false })
+usePageTitle('Claim Detail')
+
+const route = useRoute()
+const claimId = route.params.id as string
+const claim = ref<ClaimDetail | null>(MOCK_CLAIM_DETAILS[claimId] ?? null)
+
+// ── Tabs ──────────────────────────────────────────────────────────────────────
+type TabId = 'overview' | 'tasks' | 'communications' | 'documents' | 'financial'
+const activeTab = ref<TabId>('overview')
+const tabs: { id: TabId; label: string; icon: string }[] = [
+  { id: 'overview', label: 'Overview', icon: 'i-heroicons-squares-2x2' },
+  { id: 'tasks', label: 'Tasks', icon: 'i-heroicons-clipboard-document-check' },
+  { id: 'communications', label: 'Communications', icon: 'i-heroicons-chat-bubble-left-right' },
+  { id: 'documents', label: 'Documents', icon: 'i-heroicons-folder-open' },
+  { id: 'financial', label: 'Financial', icon: 'i-heroicons-banknotes' },
+]
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const fmtMoney = (n: number) => '$' + n.toLocaleString('en-US', { minimumFractionDigits: 0 })
+const fmtDate = (d: string) => {
+  if (!d) return '—'
+  return new Date(d).toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' })
+}
+const fmtDateTime = (d: string) => {
+  if (!d) return '—'
+  return new Date(d).toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+const carrierStatusClass = (s: string) => {
+  const map: Record<string, string> = {
+    fnol_submitted: 'cl-cs-fnol', acknowledged: 'cl-cs-ack', investigation: 'cl-cs-inv',
+    documentation_pending: 'cl-cs-doc', reserved: 'cl-cs-rsv', negotiation: 'cl-cs-neg',
+    settlement_offered: 'cl-cs-set', closed: 'cl-cs-closed',
+  }
+  return map[s] ?? ''
+}
+
+const priorityClass = (p: string) => {
+  const map: Record<string, string> = { critical: 'cl-pri-critical', high: 'cl-pri-high', medium: 'cl-pri-medium', low: 'cl-pri-low' }
+  return map[p] ?? ''
+}
+
+const taskStatusClass = (s: TaskStatus) => {
+  const map: Record<string, string> = { open: 'cl-ts-open', in_progress: 'cl-ts-progress', overdue: 'cl-ts-overdue', done: 'cl-ts-done' }
+  return map[s] ?? ''
+}
+
+const commIcon = (t: CommType) => {
+  const map: Record<string, string> = { email: 'i-heroicons-envelope', call: 'i-heroicons-phone', note: 'i-heroicons-pencil-square', system: 'i-heroicons-cog-6-tooth' }
+  return map[t] ?? 'i-heroicons-chat-bubble-left'
+}
+
+const commTypeLabel = (t: CommType) => {
+  const map: Record<string, string> = { email: 'Email', call: 'Call', note: 'Note', system: 'System' }
+  return map[t] ?? t
+}
+
+const formStatusClass = (s: GeneratedFormStatus) => {
+  const map: Record<string, string> = { draft: 'cl-fs-draft', ready_for_signature: 'cl-fs-ready', signed: 'cl-fs-signed', submitted: 'cl-fs-submitted' }
+  return map[s] ?? ''
+}
+
+const formStatusLabel = (s: GeneratedFormStatus) => {
+  const map: Record<string, string> = { draft: 'Draft', ready_for_signature: 'Ready for Signature', signed: 'Signed', submitted: 'Submitted' }
+  return map[s] ?? s
+}
+
+// ── Party filter (for communications) ─────────────────────────────────────────
+const activePartyId = ref<string | null>(null)
+
+const filteredComms = computed(() => {
+  if (!claim.value) return []
+  let comms = [...claim.value.communications]
+  if (activePartyId.value) comms = comms.filter(c => c.partyId === activePartyId.value)
+  if (commTypeFilter.value) comms = comms.filter(c => c.type === commTypeFilter.value)
+  return comms.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+})
+
+const commTypeFilter = ref<CommType | null>(null)
+
+// ── Tasks ─────────────────────────────────────────────────────────────────────
+const sortedTasks = computed(() => {
+  if (!claim.value) return []
+  return [...claim.value.tasks].sort((a, b) => {
+    const order: Record<TaskStatus, number> = { overdue: 0, open: 1, in_progress: 2, done: 3 }
+    return (order[a.status] ?? 9) - (order[b.status] ?? 9)
+  })
+})
+
+const openActions = computed(() => {
+  if (!claim.value) return []
+  return claim.value.tasks.filter(t => t.status === 'open' || t.status === 'overdue' || t.status === 'in_progress')
+})
+
+// ── Documents ─────────────────────────────────────────────────────────────────
+const docsByCategory = computed(() => {
+  if (!claim.value) return []
+  const cats: DocCategory[] = ['fnol', 'evidence', 'estimates', 'correspondence', 'settlement']
+  return cats.map(cat => ({
+    category: cat,
+    label: DOC_CATEGORY_LABELS[cat],
+    docs: claim.value!.documents.filter(d => d.category === cat),
+    requiredCount: claim.value!.documents.filter(d => d.category === cat && d.required).length,
+    receivedCount: claim.value!.documents.filter(d => d.category === cat && d.required && d.received).length,
+  }))
+})
+
+// ── Financial ─────────────────────────────────────────────────────────────────
+const reserveEntries = computed(() => claim.value?.financials.filter(f => f.type === 'reserve_change') ?? [])
+const paymentEntries = computed(() => claim.value?.financials.filter(f => f.type === 'payment') ?? [])
+const subrogationEntries = computed(() => claim.value?.financials.filter(f => f.type === 'subrogation') ?? [])
+const expenseEntries = computed(() => claim.value?.financials.filter(f => f.type === 'expense') ?? [])
+
+const financialSummary = computed(() => {
+  if (!claim.value) return { reserved: 0, paid: 0, subrogated: 0, expenses: 0, net: 0 }
+  const reserved = claim.value.reservedAmount
+  const paid = claim.value.paidAmount
+  const subrogated = subrogationEntries.value.reduce((s, e) => s + e.amount, 0)
+  const expenses = expenseEntries.value.reduce((s, e) => s + e.amount, 0)
+  return { reserved, paid, subrogated, expenses, net: paid - subrogated + expenses }
+})
+
+// ── AI Recap ──────────────────────────────────────────────────────────────────
+const aiRecapOpen = ref(true)
+
+// ── Quick compose ─────────────────────────────────────────────────────────────
+const composeText = ref('')
+const composeType = ref<CommType>('note')
+
+// ── Intake action button ──────────────────────────────────────────────────────
+const intakeActionLabel = computed(() => {
+  if (!claim.value) return ''
+  const map: Record<string, string> = {
+    not_sent: 'Send Intake Form',
+    sent: 'Intake Pending',
+    in_progress: 'Intake In Progress',
+    completed: 'Generate Forms',
+  }
+  return map[claim.value.intakeStatus] ?? ''
+})
+const intakeActionIcon = computed(() => {
+  if (!claim.value) return ''
+  const map: Record<string, string> = {
+    not_sent: 'i-heroicons-paper-airplane',
+    sent: 'i-heroicons-clock',
+    in_progress: 'i-heroicons-arrow-path',
+    completed: 'i-heroicons-document-duplicate',
+  }
+  return map[claim.value.intakeStatus] ?? ''
+})
+const intakeActionDisabled = computed(() => {
+  return claim.value?.intakeStatus === 'sent' || claim.value?.intakeStatus === 'in_progress'
+})
+
+// ── Action handlers ──────────────────────────────────────────────────────────
+const toast = useToast()
+function handleGenerateForms() {
+  toast.add({ title: 'Generating carrier forms…', description: `Forms for claim ${claimId} are being prepared.`, color: 'green' })
+}
+function handleIntakeAction() {
+  if (!claim.value) return
+  if (claim.value.intakeStatus === 'not_sent') {
+    toast.add({ title: 'Intake form sent', description: `Sent to ${claim.value.customerName} via email.`, color: 'green' })
+  } else if (claim.value.intakeStatus === 'completed') {
+    handleGenerateForms()
+  }
+}
+
+// ── Reserve chart ─────────────────────────────────────────────────────────────
+const maxReserve = computed(() => {
+  if (!claim.value) return 1
+  return Math.max(...claim.value.reserveHistory.map(r => r.amount), 1)
+})
+</script>
+
+<template>
+  <div class="cl-root mx-auto max-w-6xl pb-12">
+    <!-- Not found state -->
+    <template v-if="!claim">
+      <div class="cl-not-found">
+        <UIcon name="i-heroicons-exclamation-triangle" class="w-8 h-8" />
+        <h2>Claim not found</h2>
+        <p>No claim with ID <strong>{{ claimId }}</strong> exists.</p>
+        <NuxtLink to="/claims" class="cl-back-link">Back to Claims</NuxtLink>
+      </div>
+    </template>
+
+    <template v-else>
+      <!-- Back link -->
+      <NuxtLink to="/claims" class="cl-back-link">
+        <UIcon name="i-heroicons-arrow-left" class="w-3.5 h-3.5" />
+        Back to Claims
+      </NuxtLink>
+
+      <!-- ═══════════ HEADER ═══════════ -->
+      <div class="cl-detail-header">
+        <div class="cl-header-left">
+          <div class="cl-title-row">
+            <h1 class="cl-title">{{ claim.id }}</h1>
+            <span class="cl-carrier-pill" :class="carrierStatusClass(claim.carrierStatus)">
+              {{ CARRIER_STATUS_LABELS[claim.carrierStatus] }}
+            </span>
+            <span class="cl-workflow-pill">
+              {{ WORKFLOW_STATUS_LABELS[claim.workflowStatus] }}
+            </span>
+            <span class="cl-priority-badge" :class="priorityClass(claim.priority)">
+              {{ PRIORITY_LABELS[claim.priority] }}
+            </span>
+          </div>
+          <div class="cl-subtitle">
+            <NuxtLink :to="`/customers/${claim.customerId}`" class="cl-subtitle-link">{{ claim.customerName }}</NuxtLink>
+            <span class="cl-sep">/</span>
+            <NuxtLink :to="`/policies/${claim.policyId}`" class="cl-subtitle-link">{{ claim.policyNumber }}</NuxtLink>
+            <span class="cl-sep">/</span>
+            <span>{{ claim.carrier }}</span>
+            <span class="cl-sep">/</span>
+            <span>{{ claim.lob }}</span>
+          </div>
+          <div class="cl-meta-row">
+            <span>Filed {{ fmtDate(claim.dateFiled) }}</span>
+            <span class="cl-sep">·</span>
+            <span :class="claim.daysOpen > 30 ? 'cl-days-warn' : ''">{{ claim.daysOpen }} days open</span>
+            <span class="cl-sep">·</span>
+            <span>{{ claim.type }}</span>
+            <span class="cl-sep">·</span>
+            <span>Handler: <strong>{{ claim.handler }}</strong></span>
+          </div>
+        </div>
+        <div class="cl-header-right">
+          <button
+            class="cl-intake-btn"
+            :class="{ 'cl-intake-btn-disabled': intakeActionDisabled }"
+            :disabled="intakeActionDisabled"
+            @click="handleIntakeAction"
+          >
+            <UIcon :name="intakeActionIcon" class="w-4 h-4" />
+            {{ intakeActionLabel }}
+          </button>
+        </div>
+      </div>
+
+      <!-- ═══════════ PARTIES STRIP ═══════════ -->
+      <div class="cl-party-strip">
+        <button
+          class="cl-party-chip"
+          :class="{ 'cl-party-active': !activePartyId }"
+          @click="activePartyId = null"
+        >
+          <span class="cl-party-avatar">All</span>
+          <span class="cl-party-name">All Parties</span>
+        </button>
+        <button
+          v-for="party in claim.parties"
+          :key="party.id"
+          class="cl-party-chip"
+          :class="{ 'cl-party-active': activePartyId === party.id }"
+          @click="activePartyId = activePartyId === party.id ? null : party.id"
+        >
+          <span class="cl-party-avatar">{{ party.initials }}</span>
+          <div class="cl-party-info">
+            <span class="cl-party-role">{{ party.role.replace('_', ' ') }}</span>
+            <span class="cl-party-name">{{ party.name }}</span>
+          </div>
+          <span v-if="party.unreadComms > 0" class="cl-party-dot" />
+        </button>
+        <button class="cl-party-chip cl-party-add">
+          <UIcon name="i-heroicons-plus" class="w-3.5 h-3.5" />
+          Add Party
+        </button>
+      </div>
+
+      <!-- ═══════════ QUICK STATS ═══════════ -->
+      <div class="cl-quick-strip">
+        <div class="cl-quick-item">
+          <UIcon name="i-heroicons-shield-exclamation" class="w-4 h-4 cl-quick-icon" />
+          <div class="cl-quick-data">
+            <span class="cl-quick-value">{{ fmtMoney(claim.reservedAmount) }}</span>
+            <span class="cl-quick-label">Reserved</span>
+          </div>
+        </div>
+        <div class="cl-quick-sep" />
+        <div class="cl-quick-item">
+          <UIcon name="i-heroicons-banknotes" class="w-4 h-4 cl-quick-icon" />
+          <div class="cl-quick-data">
+            <span class="cl-quick-value">{{ fmtMoney(claim.paidAmount) }}</span>
+            <span class="cl-quick-label">Paid</span>
+          </div>
+        </div>
+        <div class="cl-quick-sep" />
+        <div class="cl-quick-item">
+          <UIcon name="i-heroicons-folder-open" class="w-4 h-4 cl-quick-icon" />
+          <div class="cl-quick-data">
+            <span class="cl-quick-value">
+              {{ claim.documents.filter(d => d.required && d.received).length }}/{{ claim.documents.filter(d => d.required).length }}
+            </span>
+            <span class="cl-quick-label">Docs</span>
+          </div>
+        </div>
+        <div class="cl-quick-sep" />
+        <div class="cl-quick-item">
+          <UIcon name="i-heroicons-clock" class="w-4 h-4 cl-quick-icon" />
+          <div class="cl-quick-data">
+            <span class="cl-quick-value">{{ fmtDate(claim.communications[0]?.timestamp ?? '') }}</span>
+            <span class="cl-quick-label">Last Activity</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════ OPEN ACTIONS ═══════════ -->
+      <div v-if="openActions.length" class="cl-action-panel">
+        <div class="cl-action-header">
+          <UIcon name="i-heroicons-bell-alert" class="w-4 h-4" />
+          Open Actions
+          <span class="cl-action-count">{{ openActions.length }}</span>
+        </div>
+        <div
+          v-for="task in openActions"
+          :key="task.id"
+          class="cl-action-row"
+        >
+          <span class="cl-sla-dot" :class="`cl-sla-${slaColor(task.slaPercent)}`" />
+          <span class="cl-action-title">{{ task.title }}</span>
+          <span class="cl-action-assignee">{{ task.assignee }}</span>
+          <span class="cl-action-due" :class="{ 'cl-action-overdue': task.status === 'overdue' }">
+            {{ fmtDate(task.dueDate) }}
+          </span>
+          <div class="cl-action-btns">
+            <button v-if="task.isSystemSuggested" class="cl-btn-escalate">Escalate</button>
+            <button v-if="task.isSystemSuggested" class="cl-btn-dismiss">Dismiss</button>
+            <button v-if="task.type === 'communication'" class="cl-btn-draft">Draft IA</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════ AI RECAP ═══════════ -->
+      <div class="cl-ai-panel">
+        <div class="cl-ai-header" @click="aiRecapOpen = !aiRecapOpen">
+          <span class="cl-ai-badge">IA</span>
+          <span class="cl-ai-title">Claim Summary</span>
+          <span class="cl-ai-source">{{ claim.aiRecapSourceCount }} sources</span>
+          <UIcon :name="aiRecapOpen ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'" class="w-4 h-4 cl-ai-toggle" />
+        </div>
+        <div v-if="aiRecapOpen" class="cl-ai-body">
+          <p>{{ claim.aiRecap }}</p>
+          <button class="cl-ai-regen">
+            <UIcon name="i-heroicons-arrow-path" class="w-3.5 h-3.5" />
+            Regenerar
+          </button>
+        </div>
+      </div>
+
+      <!-- ═══════════ TAB NAVIGATION ═══════════ -->
+      <div class="cl-main-tabs">
+        <button
+          v-for="t in tabs"
+          :key="t.id"
+          type="button"
+          class="cl-main-tab"
+          :class="activeTab === t.id ? 'cl-main-tab-on' : 'cl-main-tab-off'"
+          @click="activeTab = t.id"
+        >
+          <UIcon :name="t.icon" class="w-3.5 h-3.5" />
+          {{ t.label }}
+          <span v-if="t.id === 'tasks'" class="cl-tab-count" :class="activeTab === 'tasks' ? 'cl-tab-count-on' : ''">{{ claim.tasks.length }}</span>
+          <span v-if="t.id === 'communications'" class="cl-tab-count" :class="activeTab === 'communications' ? 'cl-tab-count-on' : ''">{{ claim.communications.length }}</span>
+          <span v-if="t.id === 'documents'" class="cl-tab-count" :class="activeTab === 'documents' ? 'cl-tab-count-on' : ''">{{ claim.documents.length }}</span>
+        </button>
+      </div>
+
+      <!-- ═══════════════════ OVERVIEW TAB ═══════════════════ -->
+      <template v-if="activeTab === 'overview'">
+        <div class="cl-section-grid">
+          <!-- Key Dates Timeline -->
+          <div class="cl-card">
+            <h3 class="cl-card-title">Key Dates</h3>
+            <div class="cl-timeline">
+              <div
+                v-for="(kd, idx) in claim.keyDates"
+                :key="idx"
+                class="cl-timeline-entry"
+                :class="{ 'cl-timeline-done': kd.done }"
+              >
+                <div class="cl-timeline-dot" :class="kd.done ? 'cl-timeline-dot-done' : ''" />
+                <div v-if="idx < claim.keyDates.length - 1" class="cl-timeline-line" />
+                <div class="cl-timeline-content">
+                  <span class="cl-timeline-label">{{ kd.label }}</span>
+                  <span class="cl-timeline-date">{{ kd.date ? fmtDate(kd.date) : 'Pending' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Parties Detail -->
+          <div class="cl-card">
+            <h3 class="cl-card-title">Parties</h3>
+            <div class="cl-party-cards">
+              <div v-for="party in claim.parties" :key="party.id" class="cl-party-card">
+                <div class="cl-party-card-header">
+                  <span class="cl-party-card-avatar">{{ party.initials }}</span>
+                  <div>
+                    <div class="cl-party-card-name">{{ party.name }}</div>
+                    <div class="cl-party-card-role">{{ party.role.replace('_', ' ') }}</div>
+                  </div>
+                </div>
+                <div v-if="party.company" class="cl-party-card-detail">
+                  <UIcon name="i-heroicons-building-office" class="w-3 h-3" />
+                  {{ party.company }}
+                </div>
+                <div v-if="party.email" class="cl-party-card-detail">
+                  <UIcon name="i-heroicons-envelope" class="w-3 h-3" />
+                  {{ party.email }}
+                </div>
+                <div v-if="party.phone" class="cl-party-card-detail">
+                  <UIcon name="i-heroicons-phone" class="w-3 h-3" />
+                  {{ party.phone }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Reserve History Chart -->
+        <div class="cl-card" style="margin-top: 16px;">
+          <h3 class="cl-card-title">Reserve History</h3>
+          <div class="cl-reserve-chart">
+            <div
+              v-for="(rh, idx) in claim.reserveHistory"
+              :key="idx"
+              class="cl-reserve-bar-wrap"
+            >
+              <div class="cl-reserve-bar" :style="{ width: (rh.amount / maxReserve * 100) + '%' }">
+                <span class="cl-reserve-amount">{{ fmtMoney(rh.amount) }}</span>
+              </div>
+              <div class="cl-reserve-meta">
+                <span>{{ fmtDate(rh.date) }}</span>
+                <span class="cl-reserve-note">{{ rh.annotation }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- ═══════════════════ TASKS TAB ═══════════════════ -->
+      <template v-if="activeTab === 'tasks'">
+        <div class="cl-card">
+          <table class="cl-table">
+            <thead>
+              <tr>
+                <th style="width: 28px;"></th>
+                <th>Task</th>
+                <th>Status</th>
+                <th>Assignee</th>
+                <th>Due</th>
+                <th>SLA</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="task in sortedTasks" :key="task.id" :class="{ 'cl-row-overdue': task.status === 'overdue' }">
+                <td><span class="cl-sla-dot" :class="`cl-sla-${slaColor(task.slaPercent)}`" /></td>
+                <td>
+                  <div class="cl-task-title">{{ task.title }}</div>
+                  <div v-if="task.isSystemSuggested" class="cl-task-system">System suggested</div>
+                </td>
+                <td><span class="cl-task-status" :class="taskStatusClass(task.status)">{{ TASK_STATUS_LABELS[task.status] }}</span></td>
+                <td>{{ task.assignee }}</td>
+                <td :class="{ 'cl-action-overdue': task.status === 'overdue' }">{{ fmtDate(task.dueDate) }}</td>
+                <td>
+                  <div class="cl-sla-bar-wrap">
+                    <div class="cl-sla-bar" :class="`cl-sla-bar-${slaColor(task.slaPercent)}`" :style="{ width: Math.min(task.slaPercent, 100) + '%' }" />
+                  </div>
+                  <span class="cl-sla-pct">{{ task.slaPercent }}%</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+
+      <!-- ═══════════════════ COMMUNICATIONS TAB ═══════════════════ -->
+      <template v-if="activeTab === 'communications'">
+        <!-- Type filter chips -->
+        <div class="cl-comm-filters">
+          <button
+            class="cl-comm-chip"
+            :class="{ 'cl-comm-chip-on': !commTypeFilter }"
+            @click="commTypeFilter = null"
+          >All</button>
+          <button
+            v-for="ct in (['email', 'call', 'note', 'system'] as CommType[])"
+            :key="ct"
+            class="cl-comm-chip"
+            :class="{ 'cl-comm-chip-on': commTypeFilter === ct }"
+            @click="commTypeFilter = commTypeFilter === ct ? null : ct"
+          >
+            <UIcon :name="commIcon(ct)" class="w-3 h-3" />
+            {{ commTypeLabel(ct) }}
+          </button>
+        </div>
+
+        <!-- Timeline -->
+        <div class="cl-comm-timeline">
+          <div v-for="comm in filteredComms" :key="comm.id" class="cl-comm-entry">
+            <div class="cl-comm-icon-wrap">
+              <UIcon :name="commIcon(comm.type)" class="w-4 h-4" />
+            </div>
+            <div class="cl-comm-body">
+              <div class="cl-comm-header">
+                <span class="cl-comm-from">{{ comm.from }}</span>
+                <span v-if="comm.to" class="cl-comm-to">→ {{ comm.to }}</span>
+                <span class="cl-comm-type-badge">{{ commTypeLabel(comm.type) }}</span>
+                <span class="cl-comm-time">{{ fmtDateTime(comm.timestamp) }}</span>
+              </div>
+              <div v-if="comm.subject" class="cl-comm-subject">{{ comm.subject }}</div>
+              <div class="cl-comm-text">{{ comm.body }}</div>
+              <!-- AI Thread Digest -->
+              <div v-if="comm.aiDigest" class="cl-ai-panel cl-ai-inline">
+                <span class="cl-ai-badge">IA</span>
+                <span class="cl-ai-digest-text">{{ comm.aiDigest }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Quick Compose -->
+        <div class="cl-compose">
+          <div class="cl-compose-header">
+            <select v-model="composeType" class="cl-compose-type">
+              <option value="note">Note</option>
+              <option value="email">Email</option>
+              <option value="call">Call Log</option>
+            </select>
+          </div>
+          <textarea
+            v-model="composeText"
+            class="cl-compose-input"
+            placeholder="Write a note, log a call, or draft an email..."
+            rows="3"
+          />
+          <div class="cl-compose-footer">
+            <button class="cl-btn-draft">
+              <UIcon name="i-heroicons-sparkles" class="w-3.5 h-3.5" />
+              Draft IA
+            </button>
+            <button class="cl-btn-send" :disabled="!composeText.trim()">
+              <UIcon name="i-heroicons-paper-airplane" class="w-3.5 h-3.5" />
+              Send
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <!-- ═══════════════════ DOCUMENTS TAB ═══════════════════ -->
+      <template v-if="activeTab === 'documents'">
+        <!-- Section A: Required Documents by Category -->
+        <div class="cl-doc-section-label">Required Documents</div>
+        <div v-for="group in docsByCategory" :key="group.category" class="cl-doc-category">
+          <div class="cl-doc-cat-header">
+            <h4 class="cl-doc-cat-title">{{ group.label }}</h4>
+            <span v-if="group.requiredCount" class="cl-doc-cat-progress">
+              {{ group.receivedCount }}/{{ group.requiredCount }} received
+            </span>
+            <button class="cl-btn-upload">
+              <UIcon name="i-heroicons-arrow-up-tray" class="w-3 h-3" />
+              Upload
+            </button>
+          </div>
+          <div v-if="group.docs.length" class="cl-doc-list">
+            <div v-for="doc in group.docs" :key="doc.id" class="cl-doc-row">
+              <span class="cl-doc-check" :class="doc.received ? 'cl-doc-check-on' : ''">
+                <UIcon :name="doc.received ? 'i-heroicons-check-circle-solid' : 'i-heroicons-minus-circle'" class="w-4 h-4" />
+              </span>
+              <span class="cl-doc-name">{{ doc.name }}</span>
+              <span v-if="doc.required" class="cl-doc-req">Required</span>
+              <span class="cl-doc-meta">{{ doc.uploadedBy }} · {{ fmtDate(doc.uploadedAt) }} · {{ doc.size }}</span>
+            </div>
+          </div>
+          <div v-else class="cl-doc-empty">No documents in this category yet.</div>
+        </div>
+
+        <!-- Section B: Generated Forms -->
+        <div class="cl-doc-section-label" style="margin-top: 28px;">
+          Generated Carrier Forms
+          <span class="cl-doc-section-sub">Carrier-specific forms only — government forms (FUD, police reports) are uploaded under Evidence</span>
+        </div>
+        <div v-if="claim.generatedForms.length" class="cl-card">
+          <div v-for="form in claim.generatedForms" :key="form.id" class="cl-form-row">
+            <div class="cl-form-info">
+              <span class="cl-form-name">{{ form.carrierFormName }}</span>
+              <span class="cl-form-carrier">{{ form.carrier }} · {{ form.lob }}</span>
+            </div>
+            <span class="cl-form-status" :class="formStatusClass(form.status)">{{ formStatusLabel(form.status) }}</span>
+            <span class="cl-form-date">{{ fmtDate(form.generatedAt) }}</span>
+            <button class="cl-btn-preview">
+              <UIcon name="i-heroicons-eye" class="w-3.5 h-3.5" />
+              Preview
+            </button>
+            <button v-if="form.status === 'ready_for_signature'" class="cl-btn-sign">
+              <UIcon name="i-heroicons-pencil" class="w-3.5 h-3.5" />
+              Send for Signature
+            </button>
+          </div>
+        </div>
+        <div v-else class="cl-card cl-doc-empty">
+          <template v-if="claim.intakeStatus === 'completed'">
+            <p>Intake complete — forms ready to generate.</p>
+            <button class="cl-intake-btn" style="margin-top: 8px;" @click="handleGenerateForms">
+              <UIcon name="i-heroicons-document-duplicate" class="w-4 h-4" />
+              Generate Forms
+            </button>
+          </template>
+          <template v-else>
+            No generated forms yet. Complete the intake form first.
+          </template>
+        </div>
+      </template>
+
+      <!-- ═══════════════════ FINANCIAL TAB ═══════════════════ -->
+      <template v-if="activeTab === 'financial'">
+        <!-- Cost Summary Card -->
+        <div class="cl-fin-summary">
+          <div class="cl-fin-summary-item">
+            <span class="cl-fin-summary-label">Reserved</span>
+            <span class="cl-fin-summary-value">{{ fmtMoney(financialSummary.reserved) }}</span>
+          </div>
+          <div class="cl-fin-summary-sep" />
+          <div class="cl-fin-summary-item">
+            <span class="cl-fin-summary-label">Paid</span>
+            <span class="cl-fin-summary-value">{{ fmtMoney(financialSummary.paid) }}</span>
+          </div>
+          <div class="cl-fin-summary-sep" />
+          <div class="cl-fin-summary-item">
+            <span class="cl-fin-summary-label">Subrogated</span>
+            <span class="cl-fin-summary-value cl-fin-sub">{{ fmtMoney(financialSummary.subrogated) }}</span>
+          </div>
+          <div class="cl-fin-summary-sep" />
+          <div class="cl-fin-summary-item">
+            <span class="cl-fin-summary-label">Expenses</span>
+            <span class="cl-fin-summary-value">{{ fmtMoney(financialSummary.expenses) }}</span>
+          </div>
+          <div class="cl-fin-summary-sep" />
+          <div class="cl-fin-summary-item">
+            <span class="cl-fin-summary-label">Net Cost</span>
+            <span class="cl-fin-summary-value cl-fin-net">{{ fmtMoney(financialSummary.net) }}</span>
+          </div>
+        </div>
+
+        <!-- Reserve History -->
+        <div class="cl-card">
+          <h3 class="cl-card-title">Reserve History</h3>
+          <table class="cl-table">
+            <thead>
+              <tr><th>Date</th><th>Amount</th><th>Type</th><th>Description</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="e in reserveEntries" :key="e.id">
+                <td>{{ fmtDate(e.date) }}</td>
+                <td>{{ fmtMoney(e.amount) }}</td>
+                <td>Reserve Change</td>
+                <td>
+                  {{ e.description }}
+                  <span v-if="e.annotation" class="cl-fin-annotation">{{ e.annotation }}</span>
+                </td>
+              </tr>
+              <tr v-if="!reserveEntries.length"><td colspan="4" class="cl-table-empty">No reserve changes recorded.</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Payments -->
+        <div class="cl-card">
+          <h3 class="cl-card-title">Payments</h3>
+          <table class="cl-table">
+            <thead>
+              <tr><th>Date</th><th>Amount</th><th>Description</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="e in paymentEntries" :key="e.id">
+                <td>{{ fmtDate(e.date) }}</td>
+                <td>{{ fmtMoney(e.amount) }}</td>
+                <td>{{ e.description }}</td>
+              </tr>
+              <tr v-if="!paymentEntries.length"><td colspan="3" class="cl-table-empty">No payments recorded.</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Subrogation -->
+        <div class="cl-card">
+          <h3 class="cl-card-title">Subrogation</h3>
+          <table class="cl-table">
+            <thead>
+              <tr><th>Date</th><th>Amount</th><th>Description</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="e in subrogationEntries" :key="e.id">
+                <td>{{ fmtDate(e.date) }}</td>
+                <td class="cl-fin-sub">{{ fmtMoney(e.amount) }}</td>
+                <td>{{ e.description }}</td>
+              </tr>
+              <tr v-if="!subrogationEntries.length"><td colspan="3" class="cl-table-empty">No subrogation activity.</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* =====================================================================
+   CLAIM DETAIL PAGE — scoped, cl- prefix
+   ===================================================================== */
+
+.cl-root {
+  --cl-brand: #01696f;
+  --cl-brand-soft: rgba(1, 105, 111, 0.06);
+  --cl-border: rgba(0, 0, 0, 0.06);
+  --cl-border-strong: rgba(0, 0, 0, 0.08);
+  --cl-muted: #8a8a86;
+  --cl-surface: #ffffff;
+  --cl-amber: #c27b1a;
+  --cl-red: #c13838;
+  --cl-purple: #9333ea;
+}
+
+/* ---- Not Found ---- */
+.cl-not-found { text-align: center; padding: 80px 0; color: var(--cl-muted); }
+.cl-not-found h2 { font-size: 18px; font-weight: 600; margin: 12px 0 4px; color: #1a1a1a; }
+.cl-not-found p { margin-bottom: 16px; font-size: 13px; }
+
+/* ---- Back link ---- */
+.cl-back-link {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 12px; font-weight: 500; color: var(--cl-muted);
+  text-decoration: none; margin-bottom: 12px; transition: color 150ms ease;
+}
+.cl-back-link:hover { color: var(--cl-brand); }
+
+/* ---- Detail header ---- */
+.cl-detail-header {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
+}
+.cl-header-left { display: flex; flex-direction: column; gap: 6px; }
+.cl-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.cl-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.cl-title {
+  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
+  color: #1a1a1a; line-height: 1; font-family: 'SF Mono', 'Fira Code', monospace;
+}
+.cl-subtitle {
+  display: flex; align-items: center; gap: 6px; font-size: 13px;
+  color: #5c5650; flex-wrap: wrap;
+}
+.cl-subtitle-link { color: var(--cl-brand); text-decoration: none; font-weight: 500; }
+.cl-subtitle-link:hover { text-decoration: underline; }
+.cl-sep { color: var(--cl-muted); opacity: 0.5; }
+.cl-meta-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cl-muted); flex-wrap: wrap; }
+.cl-days-warn { color: var(--cl-red); font-weight: 600; }
+
+/* ---- Carrier Status Pill (filled) ---- */
+.cl-carrier-pill {
+  display: inline-flex; align-items: center; padding: 3px 10px;
+  border-radius: 10px; font-size: 11px; font-weight: 600;
+  white-space: nowrap; letter-spacing: 0.02em;
+}
+.cl-cs-fnol { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
+.cl-cs-ack { background: rgba(16, 185, 129, 0.1); color: #059669; }
+.cl-cs-inv { background: rgba(245, 158, 11, 0.1); color: #d97706; }
+.cl-cs-doc { background: rgba(147, 51, 234, 0.1); color: #9333ea; }
+.cl-cs-rsv { background: rgba(1, 105, 111, 0.1); color: #01696f; }
+.cl-cs-neg { background: rgba(194, 123, 26, 0.1); color: #c27b1a; }
+.cl-cs-set { background: rgba(16, 185, 129, 0.1); color: #059669; }
+.cl-cs-closed { background: rgba(138, 138, 134, 0.1); color: #8a8a86; }
+
+/* ---- Workflow Pill (outline) ---- */
+.cl-workflow-pill {
+  display: inline-flex; align-items: center; padding: 2px 9px;
+  border-radius: 10px; font-size: 11px; font-weight: 600;
+  border: 1.5px solid var(--cl-brand); color: var(--cl-brand);
+  white-space: nowrap; letter-spacing: 0.02em;
+}
+
+/* ---- Priority Badge ---- */
+.cl-priority-badge {
+  display: inline-flex; align-items: center; padding: 2px 8px;
+  border-radius: 8px; font-size: 10px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.05em;
+}
+.cl-pri-critical { background: rgba(193, 56, 56, 0.1); color: var(--cl-red); }
+.cl-pri-high { background: rgba(194, 123, 26, 0.1); color: var(--cl-amber); }
+.cl-pri-medium { background: rgba(138, 138, 134, 0.08); color: #5c5650; }
+.cl-pri-low { background: rgba(138, 138, 134, 0.06); color: var(--cl-muted); }
+
+/* ---- Intake Button ---- */
+.cl-intake-btn {
+  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
+  border-radius: 10px; font-size: 13px; font-weight: 600;
+  background: var(--cl-brand); color: white; border: none; cursor: pointer;
+  transition: opacity 150ms ease;
+}
+.cl-intake-btn:hover { opacity: 0.9; }
+.cl-intake-btn-disabled { opacity: 0.5; cursor: not-allowed; background: var(--cl-muted); }
+
+/* ---- Party Strip ---- */
+.cl-party-strip {
+  display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 12px;
+  scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.1) transparent;
+}
+.cl-party-chip {
+  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
+  border-radius: 20px; border: 1px solid var(--cl-border-strong);
+  background: var(--cl-surface); font-size: 12px; cursor: pointer;
+  transition: all 150ms ease; white-space: nowrap; position: relative;
+}
+.cl-party-chip:hover { border-color: var(--cl-brand); }
+.cl-party-active { border-color: var(--cl-brand); background: var(--cl-brand-soft); color: var(--cl-brand); font-weight: 600; }
+.cl-party-avatar {
+  display: flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; border-radius: 50%;
+  background: var(--cl-brand-soft); color: var(--cl-brand);
+  font-size: 9px; font-weight: 700; text-transform: uppercase;
+}
+.cl-party-info { display: flex; flex-direction: column; }
+.cl-party-role { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cl-muted); font-weight: 600; }
+.cl-party-name { font-size: 12px; }
+.cl-party-dot {
+  position: absolute; top: 4px; right: 4px;
+  width: 7px; height: 7px; border-radius: 50%; background: var(--cl-red);
+}
+.cl-party-add { border-style: dashed; color: var(--cl-muted); }
+.cl-party-add:hover { color: var(--cl-brand); border-color: var(--cl-brand); }
+
+/* ---- Quick Stats Strip ---- */
+.cl-quick-strip {
+  display: flex; align-items: center; gap: 16px; padding: 12px 16px;
+  background: var(--cl-surface); border: 1px solid var(--cl-border);
+  border-radius: 12px; margin-bottom: 16px;
+}
+.cl-quick-item { display: flex; align-items: center; gap: 8px; }
+.cl-quick-icon { color: var(--cl-brand); }
+.cl-quick-data { display: flex; flex-direction: column; }
+.cl-quick-value { font-size: 15px; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
+.cl-quick-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cl-muted); font-weight: 600; }
+.cl-quick-sep { width: 1px; height: 28px; background: var(--cl-border); }
+
+/* ---- Open Actions Panel ---- */
+.cl-action-panel {
+  background: var(--cl-surface); border: 1px solid var(--cl-border);
+  border-radius: 12px; margin-bottom: 16px; overflow: hidden;
+}
+.cl-action-header {
+  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
+  font-size: 13px; font-weight: 700; color: var(--cl-red);
+  border-bottom: 1px solid var(--cl-border);
+}
+.cl-action-count {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 20px; height: 20px; padding: 0 6px;
+  border-radius: 10px; background: rgba(193, 56, 56, 0.1);
+  font-size: 11px; font-weight: 700; color: var(--cl-red);
+}
+.cl-action-row {
+  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
+  border-bottom: 1px solid var(--cl-border); font-size: 13px;
+}
+.cl-action-row:last-child { border-bottom: none; }
+.cl-action-title { flex: 1; font-weight: 500; }
+.cl-action-assignee { color: var(--cl-muted); font-size: 12px; }
+.cl-action-due { font-size: 12px; color: var(--cl-muted); }
+.cl-action-overdue { color: var(--cl-red); font-weight: 600; }
+.cl-action-btns { display: flex; gap: 6px; }
+
+/* ---- Action buttons ---- */
+.cl-btn-escalate {
+  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
+  background: rgba(193, 56, 56, 0.08); color: var(--cl-red);
+  border: 1px solid rgba(193, 56, 56, 0.2); cursor: pointer;
+}
+.cl-btn-escalate:hover { background: rgba(193, 56, 56, 0.15); }
+.cl-btn-dismiss {
+  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
+  background: rgba(138, 138, 134, 0.08); color: var(--cl-muted);
+  border: 1px solid var(--cl-border-strong); cursor: pointer;
+}
+.cl-btn-dismiss:hover { background: rgba(138, 138, 134, 0.15); }
+.cl-btn-draft {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
+  background: var(--cl-brand-soft); color: var(--cl-brand);
+  border: 1px solid rgba(1, 105, 111, 0.2); cursor: pointer;
+}
+.cl-btn-draft:hover { background: rgba(1, 105, 111, 0.12); }
+.cl-btn-send {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
+  background: var(--cl-brand); color: white; border: none; cursor: pointer;
+}
+.cl-btn-send:disabled { opacity: 0.4; cursor: not-allowed; }
+.cl-btn-upload {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
+  background: var(--cl-brand-soft); color: var(--cl-brand);
+  border: 1px solid rgba(1, 105, 111, 0.15); cursor: pointer; margin-left: auto;
+}
+.cl-btn-upload:hover { background: rgba(1, 105, 111, 0.12); }
+.cl-btn-preview {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
+  background: rgba(138, 138, 134, 0.06); color: #5c5650;
+  border: 1px solid var(--cl-border-strong); cursor: pointer;
+}
+.cl-btn-sign {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
+  background: var(--cl-brand); color: white; border: none; cursor: pointer;
+}
+
+/* ---- AI Panel ---- */
+.cl-ai-panel {
+  background: var(--cl-brand-soft); border-left: 3px solid var(--cl-brand);
+  border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; position: relative;
+}
+.cl-ai-header {
+  display: flex; align-items: center; gap: 8px; cursor: pointer;
+}
+.cl-ai-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 800;
+  background: var(--cl-brand); color: white; letter-spacing: 0.05em;
+}
+.cl-ai-title { font-size: 13px; font-weight: 600; color: #1a1a1a; }
+.cl-ai-source { font-size: 11px; color: var(--cl-muted); margin-left: auto; }
+.cl-ai-toggle { color: var(--cl-muted); }
+.cl-ai-body { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #3a3a3a; }
+.cl-ai-regen {
+  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
+  padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
+  background: transparent; color: var(--cl-brand); border: 1px solid rgba(1, 105, 111, 0.2); cursor: pointer;
+}
+.cl-ai-regen:hover { background: rgba(1, 105, 111, 0.06); }
+.cl-ai-inline { padding: 8px 12px; margin-top: 8px; display: flex; align-items: flex-start; gap: 8px; }
+.cl-ai-digest-text { font-size: 12px; line-height: 1.5; color: #3a3a3a; flex: 1; }
+
+/* ---- Main Tabs ---- */
+.cl-main-tabs {
+  display: inline-flex; gap: 2px; padding: 3px;
+  border-radius: 8px; background: rgba(0,0,0,0.03); margin-bottom: 20px;
+}
+.cl-main-tab {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 7px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
+  border: none; cursor: pointer; transition: all 150ms ease;
+  white-space: nowrap;
+}
+.cl-main-tab-on { background: var(--cl-surface); color: #1a1a1a; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
+.cl-main-tab-off { background: transparent; color: var(--cl-muted); }
+.cl-main-tab-off:hover { color: #1a1a1a; }
+.cl-tab-count {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 18px; height: 18px; padding: 0 5px;
+  border-radius: 9px; background: rgba(0,0,0,0.06);
+  font-size: 10px; font-weight: 700;
+}
+.cl-tab-count-on { background: var(--cl-brand); color: white; }
+
+/* ---- Cards ---- */
+.cl-card {
+  background: var(--cl-surface); border: 1px solid var(--cl-border);
+  border-radius: 12px; padding: 16px; margin-bottom: 16px;
+}
+.cl-card-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: #1a1a1a; }
+.cl-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+
+/* ---- SLA Dot ---- */
+.cl-sla-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.cl-sla-green { background: #059669; }
+.cl-sla-amber { background: var(--cl-amber); }
+.cl-sla-red { background: var(--cl-red); }
+
+/* ---- SLA Bar ---- */
+.cl-sla-bar-wrap { width: 48px; height: 4px; background: rgba(0,0,0,0.06); border-radius: 2px; display: inline-block; vertical-align: middle; }
+.cl-sla-bar { height: 100%; border-radius: 2px; transition: width 300ms ease; }
+.cl-sla-bar-green { background: #059669; }
+.cl-sla-bar-amber { background: var(--cl-amber); }
+.cl-sla-bar-red { background: var(--cl-red); }
+.cl-sla-pct { font-size: 10px; color: var(--cl-muted); margin-left: 4px; }
+
+/* ---- Timeline (Overview) ---- */
+.cl-timeline { display: flex; flex-direction: column; gap: 0; padding-left: 4px; }
+.cl-timeline-entry { display: flex; align-items: flex-start; gap: 12px; position: relative; min-height: 40px; }
+.cl-timeline-dot {
+  width: 10px; height: 10px; border-radius: 50%;
+  border: 2px solid var(--cl-border-strong); background: white;
+  margin-top: 4px; flex-shrink: 0; z-index: 1;
+}
+.cl-timeline-dot-done { border-color: var(--cl-brand); background: var(--cl-brand); }
+.cl-timeline-line {
+  position: absolute; left: 4px; top: 16px; bottom: -8px;
+  width: 2px; background: var(--cl-border-strong);
+}
+.cl-timeline-done .cl-timeline-line { background: var(--cl-brand); }
+.cl-timeline-content { padding-bottom: 12px; }
+.cl-timeline-label { font-size: 13px; font-weight: 500; display: block; }
+.cl-timeline-date { font-size: 11px; color: var(--cl-muted); }
+
+/* ---- Party Cards (Overview) ---- */
+.cl-party-cards { display: flex; flex-direction: column; gap: 10px; }
+.cl-party-card {
+  padding: 10px 12px; border: 1px solid var(--cl-border);
+  border-radius: 8px; background: rgba(0,0,0,0.01);
+}
+.cl-party-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.cl-party-card-avatar {
+  display: flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 50%;
+  background: var(--cl-brand-soft); color: var(--cl-brand);
+  font-size: 10px; font-weight: 700;
+}
+.cl-party-card-name { font-size: 13px; font-weight: 600; }
+.cl-party-card-role { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cl-muted); }
+.cl-party-card-detail { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5c5650; margin-top: 3px; }
+
+/* ---- Reserve Chart (Overview) ---- */
+.cl-reserve-chart { display: flex; flex-direction: column; gap: 10px; }
+.cl-reserve-bar-wrap { display: flex; flex-direction: column; gap: 4px; }
+.cl-reserve-bar {
+  height: 24px; background: var(--cl-brand); border-radius: 4px;
+  display: flex; align-items: center; padding: 0 8px; min-width: 60px;
+}
+.cl-reserve-amount { font-size: 11px; font-weight: 700; color: white; }
+.cl-reserve-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--cl-muted); }
+.cl-reserve-note { font-style: italic; }
+
+/* ---- Table ---- */
+.cl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.cl-table th {
+  text-align: left; padding: 8px 10px; font-size: 10px;
+  text-transform: uppercase; letter-spacing: 0.05em; color: var(--cl-muted);
+  font-weight: 600; border-bottom: 1px solid var(--cl-border);
+}
+.cl-table td { padding: 10px 10px; border-bottom: 1px solid var(--cl-border); vertical-align: top; }
+.cl-table tbody tr:last-child td { border-bottom: none; }
+.cl-table-empty { text-align: center; color: var(--cl-muted); padding: 24px 0 !important; font-style: italic; }
+.cl-row-overdue { background: rgba(193, 56, 56, 0.03); }
+.cl-task-title { font-weight: 500; }
+.cl-task-system { font-size: 10px; color: var(--cl-amber); font-weight: 600; margin-top: 2px; }
+
+/* ---- Task Status Badge ---- */
+.cl-task-status {
+  display: inline-flex; padding: 2px 8px; border-radius: 8px;
+  font-size: 11px; font-weight: 600; white-space: nowrap;
+}
+.cl-ts-open { background: rgba(59, 130, 246, 0.08); color: #2563eb; }
+.cl-ts-progress { background: rgba(1, 105, 111, 0.08); color: var(--cl-brand); }
+.cl-ts-overdue { background: rgba(193, 56, 56, 0.08); color: var(--cl-red); }
+.cl-ts-done { background: rgba(138, 138, 134, 0.08); color: var(--cl-muted); }
+
+/* ---- Communications ---- */
+.cl-comm-filters { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
+.cl-comm-chip {
+  display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px;
+  border-radius: 16px; font-size: 12px; font-weight: 500;
+  border: 1px solid var(--cl-border-strong); background: var(--cl-surface);
+  cursor: pointer; transition: all 150ms ease;
+}
+.cl-comm-chip:hover { border-color: var(--cl-brand); }
+.cl-comm-chip-on { background: var(--cl-brand-soft); border-color: var(--cl-brand); color: var(--cl-brand); font-weight: 600; }
+
+.cl-comm-timeline { display: flex; flex-direction: column; gap: 0; }
+.cl-comm-entry {
+  display: flex; gap: 12px; padding: 14px 0;
+  border-bottom: 1px solid var(--cl-border);
+}
+.cl-comm-entry:last-child { border-bottom: none; }
+.cl-comm-icon-wrap {
+  width: 32px; height: 32px; border-radius: 50%;
+  background: var(--cl-brand-soft); color: var(--cl-brand);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0; margin-top: 2px;
+}
+.cl-comm-body { flex: 1; min-width: 0; }
+.cl-comm-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
+.cl-comm-from { font-size: 13px; font-weight: 600; }
+.cl-comm-to { font-size: 12px; color: var(--cl-muted); }
+.cl-comm-type-badge {
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  padding: 1px 6px; border-radius: 4px;
+  background: rgba(0,0,0,0.04); color: var(--cl-muted); letter-spacing: 0.03em;
+}
+.cl-comm-time { font-size: 11px; color: var(--cl-muted); margin-left: auto; }
+.cl-comm-subject { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
+.cl-comm-text { font-size: 13px; line-height: 1.55; color: #3a3a3a; white-space: pre-wrap; }
+
+/* ---- Compose ---- */
+.cl-compose {
+  background: var(--cl-surface); border: 1px solid var(--cl-border);
+  border-radius: 12px; padding: 12px; margin-top: 16px;
+}
+.cl-compose-header { margin-bottom: 8px; }
+.cl-compose-type {
+  padding: 4px 8px; border-radius: 6px; font-size: 12px;
+  border: 1px solid var(--cl-border-strong); background: white;
+  color: #1a1a1a; font-weight: 500;
+}
+.cl-compose-input {
+  width: 100%; border: 1px solid var(--cl-border); border-radius: 8px;
+  padding: 8px 10px; font-size: 13px; resize: vertical;
+  font-family: inherit; color: #1a1a1a;
+}
+.cl-compose-input:focus { outline: none; border-color: var(--cl-brand); }
+.cl-compose-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
+
+/* ---- Documents ---- */
+.cl-doc-section-label {
+  font-size: 14px; font-weight: 700; margin-bottom: 12px; color: #1a1a1a;
+}
+.cl-doc-section-sub {
+  display: block; font-size: 11px; font-weight: 400; color: var(--cl-muted);
+  margin-top: 2px;
+}
+.cl-doc-category {
+  background: var(--cl-surface); border: 1px solid var(--cl-border);
+  border-radius: 12px; margin-bottom: 12px; overflow: hidden;
+}
+.cl-doc-cat-header {
+  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
+  border-bottom: 1px solid var(--cl-border);
+}
+.cl-doc-cat-title { font-size: 13px; font-weight: 600; margin: 0; }
+.cl-doc-cat-progress { font-size: 11px; color: var(--cl-muted); }
+.cl-doc-list { padding: 0; }
+.cl-doc-row {
+  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
+  border-bottom: 1px solid var(--cl-border); font-size: 13px;
+}
+.cl-doc-row:last-child { border-bottom: none; }
+.cl-doc-check { color: var(--cl-muted); }
+.cl-doc-check-on { color: var(--cl-brand); }
+.cl-doc-name { flex: 1; font-weight: 500; }
+.cl-doc-req { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--cl-amber); letter-spacing: 0.03em; }
+.cl-doc-meta { font-size: 11px; color: var(--cl-muted); }
+.cl-doc-empty { padding: 20px 16px; text-align: center; color: var(--cl-muted); font-size: 13px; }
+
+/* ---- Generated Forms ---- */
+.cl-form-row {
+  display: flex; align-items: center; gap: 12px; padding: 10px 0;
+  border-bottom: 1px solid var(--cl-border);
+}
+.cl-form-row:last-child { border-bottom: none; }
+.cl-form-info { flex: 1; }
+.cl-form-name { font-size: 13px; font-weight: 600; display: block; }
+.cl-form-carrier { font-size: 11px; color: var(--cl-muted); }
+.cl-form-status {
+  display: inline-flex; padding: 2px 8px; border-radius: 8px;
+  font-size: 11px; font-weight: 600;
+}
+.cl-fs-draft { background: rgba(138, 138, 134, 0.08); color: var(--cl-muted); }
+.cl-fs-ready { background: rgba(194, 123, 26, 0.08); color: var(--cl-amber); }
+.cl-fs-signed { background: rgba(1, 105, 111, 0.08); color: var(--cl-brand); }
+.cl-fs-submitted { background: rgba(16, 185, 129, 0.08); color: #059669; }
+.cl-form-date { font-size: 11px; color: var(--cl-muted); }
+
+/* ---- Financial ---- */
+.cl-fin-summary {
+  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
+  background: var(--cl-surface); border: 1px solid var(--cl-border);
+  border-radius: 12px; margin-bottom: 16px; flex-wrap: wrap;
+}
+.cl-fin-summary-item { display: flex; flex-direction: column; gap: 2px; }
+.cl-fin-summary-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cl-muted); font-weight: 600; }
+.cl-fin-summary-value { font-size: 16px; font-weight: 700; color: #1a1a1a; }
+.cl-fin-summary-sep { width: 1px; height: 32px; background: var(--cl-border); }
+.cl-fin-sub { color: #059669; }
+.cl-fin-net { color: var(--cl-brand); }
+.cl-fin-annotation { display: block; font-size: 11px; color: var(--cl-muted); font-style: italic; margin-top: 2px; }
+
+/* ---- Responsive ---- */
+@media (max-width: 768px) {
+  .cl-section-grid { grid-template-columns: 1fr; }
+  .cl-quick-strip { flex-wrap: wrap; }
+  .cl-fin-summary { flex-direction: column; align-items: flex-start; }
+  .cl-fin-summary-sep { width: 100%; height: 1px; }
+  .cl-detail-header { flex-direction: column; }
+  .cl-main-tabs { overflow-x: auto; width: 100%; }
+  .cl-action-row { flex-wrap: wrap; }
+}
+</style>
diff --git a/app/pages/claims/index.vue b/app/pages/claims/index.vue
new file mode 100644
index 0000000..efdb197
--- /dev/null
+++ b/app/pages/claims/index.vue
@@ -0,0 +1,506 @@
+<script setup lang="ts">
+import { slaColor, CARRIER_STATUS_LABELS, WORKFLOW_STATUS_LABELS } from '~/data/mock-claims'
+import type { CarrierStatus, BrokerWorkflowStatus } from '~/data/mock-claims'
+
+usePageTitle('Claims')
+
+interface Claim {
+  id: string
+  customer: string
+  agent: string
+  line: string
+  type: string
+  carrier: string
+  reserved: string
+  paid: string
+  daysOpen: number
+  priority: 'critical' | 'high' | 'medium' | 'low'
+  status: 'open' | 'under_review' | 'awaiting_docs' | 'approved' | 'denied' | 'closed'
+  docsPending: number
+  opened: string
+  carrierStatus: CarrierStatus
+  workflowStatus: BrokerWorkflowStatus
+  slaPercent: number
+  handler: string
+}
+
+const claims = ref<Claim[]>([
+  { id: 'CLM-0048', customer: 'Hotel Pacífico', agent: 'Marco V.', line: 'General Risk', type: 'Fire damage', carrier: 'ASSA', reserved: '$128,000', paid: '$0', daysOpen: 3, priority: 'critical', status: 'open', docsPending: 4, opened: 'Apr 2, 2026', carrierStatus: 'investigation', workflowStatus: 'waiting_carrier', slaPercent: 110, handler: 'Ana R.' },
+  { id: 'CLM-0047', customer: 'Empresa ABC S.A.', agent: 'Ana R.', line: 'Auto', type: 'Collision — fleet unit #7', carrier: 'Qualitas', reserved: '$14,200', paid: '$0', daysOpen: 5, priority: 'high', status: 'under_review', docsPending: 2, opened: 'Mar 31, 2026', carrierStatus: 'documentation_pending', workflowStatus: 'waiting_insured_docs', slaPercent: 60, handler: 'Ana R.' },
+  { id: 'CLM-0046', customer: 'Jorge Herrera', agent: 'Marco V.', line: 'Auto', type: 'Windshield replacement', carrier: 'Qualitas', reserved: '$1,100', paid: '$0', daysOpen: 8, priority: 'low', status: 'awaiting_docs', docsPending: 1, opened: 'Mar 28, 2026', carrierStatus: 'documentation_pending', workflowStatus: 'waiting_insured_docs', slaPercent: 40, handler: 'Marco V.' },
+  { id: 'CLM-0045', customer: 'Clínica San José', agent: 'Ana R.', line: 'Life', type: 'Surgery pre-auth', carrier: 'Pan-American Life', reserved: '$23,500', paid: '$0', daysOpen: 12, priority: 'high', status: 'under_review', docsPending: 0, opened: 'Mar 24, 2026', carrierStatus: 'reserved', workflowStatus: 'waiting_carrier', slaPercent: 85, handler: 'Ana R.' },
+  { id: 'CLM-0044', customer: 'Carmen Ruiz', agent: 'Ana R.', line: 'Life', type: 'Outpatient claim', carrier: 'Pan-American Life', reserved: '$3,800', paid: '$3,200', daysOpen: 18, priority: 'medium', status: 'approved', docsPending: 0, opened: 'Mar 18, 2026', carrierStatus: 'settlement_offered', workflowStatus: 'ready_to_close', slaPercent: 50, handler: 'Ana R.' },
+  { id: 'CLM-0043', customer: 'Supermercado Tico', agent: 'Marco V.', line: 'General Risk', type: 'Customer injury — store premises', carrier: 'Mapfre', reserved: '$45,000', paid: '$0', daysOpen: 22, priority: 'high', status: 'under_review', docsPending: 3, opened: 'Mar 14, 2026', carrierStatus: 'negotiation', workflowStatus: 'client_update_overdue', slaPercent: 100, handler: 'Marco V.' },
+  { id: 'CLM-0042', customer: 'Isabel Mora', agent: 'Ana R.', line: 'Auto', type: 'Theft — total loss', carrier: 'ASSA', reserved: '$18,500', paid: '$18,500', daysOpen: 35, priority: 'medium', status: 'closed', docsPending: 0, opened: 'Mar 1, 2026', carrierStatus: 'closed', workflowStatus: 'ready_to_close', slaPercent: 95, handler: 'Ana R.' },
+  { id: 'CLM-0041', customer: 'Manuel Torres', agent: 'Marco V.', line: 'Life', type: 'Disability benefit', carrier: 'Pan-American Life', reserved: '$52,000', paid: '$12,000', daysOpen: 41, priority: 'medium', status: 'approved', docsPending: 0, opened: 'Feb 23, 2026', carrierStatus: 'reserved', workflowStatus: 'waiting_carrier', slaPercent: 70, handler: 'Marco V.' },
+])
+
+// ── View toggle ─────────────────────────────────────────────────────────────
+const viewMode = ref<'my' | 'all'>('all')
+
+type ClaimFilter = 'all' | 'active' | 'resolved'
+const activeFilter = ref<ClaimFilter>('all')
+
+// ── Filter dropdowns ────────────────────────────────────────────────────────
+const statusFilter = ref('')
+const carrierFilter = ref('')
+const lobFilter = ref('')
+const handlerFilter = ref('')
+const agingFilter = ref('')
+const priorityFilter = ref('')
+
+const uniqueCarriers = computed(() => [...new Set(claims.value.map(c => c.carrier))].sort())
+const uniqueLobs = computed(() => [...new Set(claims.value.map(c => c.line))].sort())
+const uniqueHandlers = computed(() => [...new Set(claims.value.map(c => c.handler))].sort())
+
+const filteredClaims = computed(() => {
+  let result = [...claims.value]
+
+  if (activeFilter.value === 'active') result = result.filter(c => !['closed', 'denied'].includes(c.status))
+  if (activeFilter.value === 'resolved') result = result.filter(c => ['closed', 'denied'].includes(c.status))
+
+  if (statusFilter.value) result = result.filter(c => c.status === statusFilter.value)
+  if (carrierFilter.value) result = result.filter(c => c.carrier === carrierFilter.value)
+  if (lobFilter.value) result = result.filter(c => c.line === lobFilter.value)
+  if (handlerFilter.value) result = result.filter(c => c.handler === handlerFilter.value)
+  if (priorityFilter.value) result = result.filter(c => c.priority === priorityFilter.value)
+
+  if (agingFilter.value) {
+    const ranges: Record<string, [number, number]> = { '0-7': [0, 7], '8-14': [8, 14], '15-30': [15, 30], '30+': [30, 9999] }
+    const [min, max] = ranges[agingFilter.value] ?? [0, 9999]
+    result = result.filter(c => c.daysOpen >= min && c.daysOpen <= max)
+  }
+
+  // Sort: breached first
+  result.sort((a, b) => {
+    const aBreached = a.slaPercent >= 100 ? 0 : 1
+    const bBreached = b.slaPercent >= 100 ? 0 : 1
+    if (aBreached !== bBreached) return aBreached - bBreached
+    return b.slaPercent - a.slaPercent
+  })
+
+  return result
+})
+
+const filterCounts = computed(() => ({
+  all: claims.value.length,
+  active: claims.value.filter(c => !['closed', 'denied'].includes(c.status)).length,
+  resolved: claims.value.filter(c => ['closed', 'denied'].includes(c.status)).length,
+}))
+
+const kpis = computed(() => {
+  const active = claims.value.filter(c => !['closed', 'denied'].includes(c.status))
+  const underReview = claims.value.filter(c => c.status === 'under_review').length
+  const avgDays = active.length ? Math.round(active.reduce((s, c) => s + c.daysOpen, 0) / active.length) : 0
+  const totalReserved = claims.value.filter(c => c.status !== 'closed').reduce((s, c) => s + parseFloat(c.reserved.replace(/[$,]/g, '')), 0)
+  const breached = claims.value.filter(c => c.slaPercent >= 100 && !['closed', 'denied'].includes(c.status)).length
+  return { openClaims: active.length, underReview, avgDays, totalReserved, breached }
+})
+
+const statusMeta: Record<string, { label: string; class: string }> = {
+  open: { label: 'Open', class: 'cl-st-open' },
+  under_review: { label: 'Under Review', class: 'cl-st-review' },
+  awaiting_docs: { label: 'Awaiting Docs', class: 'cl-st-docs' },
+  approved: { label: 'Approved', class: 'cl-st-approved' },
+  denied: { label: 'Denied', class: 'cl-st-denied' },
+  closed: { label: 'Closed', class: 'cl-st-closed' },
+}
+
+const priorityMeta: Record<string, { label: string; class: string }> = {
+  critical: { label: 'Critical', class: 'cl-pri-critical' },
+  high: { label: 'High', class: 'cl-pri-high' },
+  medium: { label: 'Med', class: 'cl-pri-medium' },
+  low: { label: 'Low', class: 'cl-pri-low' },
+}
+
+const carrierPillClass = (s: CarrierStatus) => {
+  const map: Record<string, string> = {
+    fnol_submitted: 'cl-csp-fnol', acknowledged: 'cl-csp-ack', investigation: 'cl-csp-inv',
+    documentation_pending: 'cl-csp-doc', reserved: 'cl-csp-rsv', negotiation: 'cl-csp-neg',
+    settlement_offered: 'cl-csp-set', closed: 'cl-csp-closed',
+  }
+  return map[s] ?? ''
+}
+
+function formatCurrency(n: number) {
+  return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 0 })
+}
+
+function clearFilters() {
+  statusFilter.value = ''
+  carrierFilter.value = ''
+  lobFilter.value = ''
+  handlerFilter.value = ''
+  agingFilter.value = ''
+  priorityFilter.value = ''
+}
+
+const hasActiveFilters = computed(() => !!(statusFilter.value || carrierFilter.value || lobFilter.value || handlerFilter.value || agingFilter.value || priorityFilter.value))
+
+const toast = useToast()
+function handleNewClaim() {
+  toast.add({ title: 'New claim flow coming soon', description: 'This will open the FNOL intake wizard.', color: 'neutral' })
+}
+</script>
+
+<template>
+  <div class="cl-page">
+    <!-- Header -->
+    <div class="flex flex-wrap items-end justify-between gap-3">
+      <div class="max-w-xl">
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Claims</h1>
+        <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+          Track claims lifecycle from first notice of loss through resolution and payment.
+        </p>
+      </div>
+      <button type="button" class="cl-action-btn-primary" @click="handleNewClaim">
+        <UIcon name="i-heroicons-plus" style="width: 14px; height: 14px;" />
+        New Claim
+      </button>
+    </div>
+
+    <!-- KPI strip -->
+    <div class="cl-kpi-strip">
+      <div class="cl-kpi">
+        <p class="cl-kpi-label">Open claims</p>
+        <p class="cl-kpi-value">{{ kpis.openClaims }}</p>
+      </div>
+      <div class="cl-kpi">
+        <p class="cl-kpi-label">Under review</p>
+        <p class="cl-kpi-value" style="color: #c27b1a;">{{ kpis.underReview }}</p>
+      </div>
+      <div class="cl-kpi">
+        <p class="cl-kpi-label">SLA breached</p>
+        <p class="cl-kpi-value" :style="kpis.breached > 0 ? 'color: #c13838;' : ''">{{ kpis.breached }}</p>
+      </div>
+      <div class="cl-kpi">
+        <p class="cl-kpi-label">Avg days open</p>
+        <p class="cl-kpi-value">{{ kpis.avgDays }}d</p>
+      </div>
+      <div class="cl-kpi">
+        <p class="cl-kpi-label">Total reserved</p>
+        <p class="cl-kpi-value">{{ formatCurrency(kpis.totalReserved) }}</p>
+      </div>
+    </div>
+
+    <!-- View toggle + Filter tabs -->
+    <div class="cl-controls-row">
+      <div class="cl-view-toggle">
+        <button
+          type="button"
+          class="cl-view-btn"
+          :class="viewMode === 'my' ? 'cl-view-on' : 'cl-view-off'"
+          @click="viewMode = 'my'"
+        >My Claims</button>
+        <button
+          type="button"
+          class="cl-view-btn"
+          :class="viewMode === 'all' ? 'cl-view-on' : 'cl-view-off'"
+          @click="viewMode = 'all'"
+        >All Claims</button>
+      </div>
+
+      <div class="cl-filter-tabs">
+        <button
+          v-for="f in ([
+            { id: 'all', label: 'All' },
+            { id: 'active', label: 'Active' },
+            { id: 'resolved', label: 'Resolved' },
+          ] as { id: ClaimFilter; label: string }[])"
+          :key="f.id"
+          type="button"
+          class="cl-filter-tab"
+          :class="activeFilter === f.id ? 'cl-filter-on' : 'cl-filter-off'"
+          @click="activeFilter = f.id"
+        >
+          {{ f.label }}
+          <span class="cl-filter-count" :class="activeFilter === f.id ? 'cl-filter-count-on' : ''">{{ filterCounts[f.id] }}</span>
+        </button>
+      </div>
+
+      <span class="text-[11px] text-[var(--text-muted)] ml-auto">{{ filteredClaims.length }} results</span>
+    </div>
+
+    <!-- Filter dropdowns row -->
+    <div class="cl-dropdown-row">
+      <select v-model="statusFilter" class="cl-dropdown">
+        <option value="">Status</option>
+        <option value="open">Open</option>
+        <option value="under_review">Under Review</option>
+        <option value="awaiting_docs">Awaiting Docs</option>
+        <option value="approved">Approved</option>
+        <option value="denied">Denied</option>
+        <option value="closed">Closed</option>
+      </select>
+      <select v-model="carrierFilter" class="cl-dropdown">
+        <option value="">Carrier</option>
+        <option v-for="c in uniqueCarriers" :key="c" :value="c">{{ c }}</option>
+      </select>
+      <select v-model="lobFilter" class="cl-dropdown">
+        <option value="">LOB</option>
+        <option v-for="l in uniqueLobs" :key="l" :value="l">{{ l }}</option>
+      </select>
+      <select v-model="handlerFilter" class="cl-dropdown">
+        <option value="">Handler</option>
+        <option v-for="h in uniqueHandlers" :key="h" :value="h">{{ h }}</option>
+      </select>
+      <select v-model="agingFilter" class="cl-dropdown">
+        <option value="">Aging</option>
+        <option value="0-7">0–7 days</option>
+        <option value="8-14">8–14 days</option>
+        <option value="15-30">15–30 days</option>
+        <option value="30+">30+ days</option>
+      </select>
+      <select v-model="priorityFilter" class="cl-dropdown">
+        <option value="">Priority</option>
+        <option value="critical">Critical</option>
+        <option value="high">High</option>
+        <option value="medium">Medium</option>
+        <option value="low">Low</option>
+      </select>
+      <button v-if="hasActiveFilters" class="cl-clear-btn" @click="clearFilters">
+        <UIcon name="i-heroicons-x-mark" class="w-3 h-3" />
+        Clear
+      </button>
+    </div>
+
+    <!-- Claims table -->
+    <div class="cl-table-wrap">
+      <table class="cl-table">
+        <thead>
+          <tr>
+            <th style="width: 28px;"></th>
+            <th>Claim</th>
+            <th>Customer / Agent</th>
+            <th>Line / Type</th>
+            <th>Carrier</th>
+            <th>Status</th>
+            <th class="text-right">Reserved</th>
+            <th class="text-right">Paid</th>
+            <th class="text-right">Days</th>
+            <th>Priority</th>
+            <th class="text-center">Docs</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="c in filteredClaims"
+            :key="c.id"
+            class="cl-row"
+            :class="{ 'cl-breach-row': c.slaPercent >= 100 && !['closed', 'denied'].includes(c.status) }"
+            style="cursor: pointer;"
+            @click="navigateTo(`/claims/${c.id}`)"
+          >
+            <td><span class="cl-sla-dot" :class="`cl-sla-${slaColor(c.slaPercent)}`" /></td>
+            <td>
+              <NuxtLink :to="`/claims/${c.id}`" class="cl-claim-link" @click.stop>{{ c.id }}</NuxtLink>
+            </td>
+            <td>
+              <p class="text-[13px] font-medium text-[var(--text-primary)]">{{ c.customer || 'Unnamed customer' }}</p>
+              <p class="text-[11px] text-[var(--text-muted)]">{{ c.agent || '—' }}</p>
+            </td>
+            <td>
+              <p class="text-[13px] text-[var(--text-primary)]">{{ c.line }}</p>
+              <p class="text-[11px] text-[var(--text-muted)]">{{ c.type }}</p>
+            </td>
+            <td class="text-[13px] text-[var(--text-muted)]">{{ c.carrier }}</td>
+            <td>
+              <div class="cl-dual-status">
+                <span class="cl-carrier-status-pill" :class="carrierPillClass(c.carrierStatus)">{{ CARRIER_STATUS_LABELS[c.carrierStatus] }}</span>
+                <span class="cl-workflow-status-pill">{{ WORKFLOW_STATUS_LABELS[c.workflowStatus] }}</span>
+              </div>
+            </td>
+            <td class="text-right font-semibold text-[13px] text-[var(--text-primary)]">{{ c.reserved }}</td>
+            <td class="text-right text-[13px]" :class="c.paid !== '$0' ? 'text-[var(--text-primary)] font-medium' : 'text-[var(--text-muted)] opacity-50'">{{ c.paid }}</td>
+            <td class="text-right">
+              <span class="text-[13px] font-bold" :class="c.daysOpen > 30 ? 'text-rose-600' : c.daysOpen > 14 ? 'text-amber-600' : 'text-[var(--text-primary)]'">{{ c.daysOpen }}d</span>
+            </td>
+            <td>
+              <span :class="priorityMeta[c.priority].class">{{ priorityMeta[c.priority].label }}</span>
+            </td>
+            <td class="text-center">
+              <span v-if="c.docsPending > 0" class="cl-docs-badge">{{ c.docsPending }}</span>
+              <span v-else class="text-[11px] text-[var(--text-muted)] opacity-40">—</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cl-page {
+  max-width: 76rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-bottom: 3rem;
+}
+
+.cl-action-btn-primary {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px; border-radius: 8px;
+  background: #01696f; color: #fff;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.cl-action-btn-primary:hover { background: #015458; }
+
+/* ── KPI strip ── */
+.cl-kpi-strip {
+  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.cl-kpi { padding: 14px 18px; background: #fff; }
+.cl-kpi:first-child { border-radius: 12px 0 0 12px; }
+.cl-kpi:last-child { border-radius: 0 12px 12px 0; }
+.cl-kpi-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+}
+.cl-kpi-value {
+  margin-top: 4px; font-size: 22px; font-weight: 600;
+  color: var(--text-primary); font-variant-numeric: tabular-nums;
+}
+@media (max-width: 640px) { .cl-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
+
+/* ── Controls row ── */
+.cl-controls-row {
+  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+}
+
+/* ── View toggle ── */
+.cl-view-toggle {
+  display: inline-flex; gap: 1px; padding: 2px;
+  border-radius: 8px; background: rgba(0,0,0,0.04);
+}
+.cl-view-btn {
+  padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
+  border: none; cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.cl-view-on { background: #01696f; color: white; }
+.cl-view-off { background: transparent; color: #8a8a86; }
+.cl-view-off:hover { color: var(--text-primary); }
+
+/* ── Filter tabs ── */
+.cl-filter-tabs {
+  display: inline-flex; gap: 2px; padding: 3px;
+  border-radius: 10px; background: rgba(0,0,0,0.04);
+}
+.cl-filter-tab {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 6px 12px; border-radius: 8px;
+  font-size: 12px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.cl-filter-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.cl-filter-off { background: transparent; color: var(--text-muted); }
+.cl-filter-off:hover { color: var(--text-primary); }
+.cl-filter-count {
+  font-size: 10px; font-weight: 600; padding: 1px 5px;
+  border-radius: 9999px; background: rgba(0,0,0,0.06); color: var(--text-muted);
+}
+.cl-filter-count-on { background: rgba(1,105,111,0.1); color: #01696f; }
+
+/* ── Dropdown filters ── */
+.cl-dropdown-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.cl-dropdown {
+  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.08); background: #fff; color: var(--text-primary);
+  cursor: pointer; min-width: 100px;
+}
+.cl-dropdown:focus { outline: none; border-color: #01696f; }
+.cl-clear-btn {
+  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px;
+  border-radius: 8px; font-size: 11px; font-weight: 600;
+  background: rgba(193, 56, 56, 0.06); color: #c13838;
+  border: 1px solid rgba(193, 56, 56, 0.15); cursor: pointer;
+}
+.cl-clear-btn:hover { background: rgba(193, 56, 56, 0.12); }
+
+/* ── Table ── */
+.cl-table-wrap {
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow-x: auto;
+}
+.cl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.cl-table thead th {
+  padding: 10px 14px;
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+  white-space: nowrap; text-align: left;
+}
+.cl-table tbody td {
+  padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.04);
+  vertical-align: top;
+}
+.cl-row { transition: background 100ms ease; }
+.cl-row:hover { background: rgba(0,0,0,0.015); }
+.cl-row:last-child td { border-bottom: none; }
+
+/* ── Breach row ── */
+.cl-breach-row { box-shadow: inset 3px 0 0 #c13838; }
+
+/* ── SLA dot ── */
+.cl-sla-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.cl-sla-green { background: #059669; }
+.cl-sla-amber { background: #c27b1a; }
+.cl-sla-red { background: #c13838; }
+
+/* ── Claim link ── */
+.cl-claim-link {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px; font-weight: 600; color: #01696f;
+  text-decoration: none;
+}
+.cl-claim-link:hover { text-decoration: underline; }
+
+/* ── Dual status pills ── */
+.cl-dual-status { display: flex; flex-direction: column; gap: 3px; }
+.cl-carrier-status-pill {
+  display: inline-flex; padding: 2px 7px; border-radius: 8px;
+  font-size: 10px; font-weight: 600; white-space: nowrap;
+}
+.cl-csp-fnol { background: rgba(59, 130, 246, 0.08); color: #2563eb; }
+.cl-csp-ack { background: rgba(16, 185, 129, 0.08); color: #059669; }
+.cl-csp-inv { background: rgba(245, 158, 11, 0.08); color: #d97706; }
+.cl-csp-doc { background: rgba(147, 51, 234, 0.08); color: #9333ea; }
+.cl-csp-rsv { background: rgba(1, 105, 111, 0.08); color: #01696f; }
+.cl-csp-neg { background: rgba(194, 123, 26, 0.08); color: #c27b1a; }
+.cl-csp-set { background: rgba(16, 185, 129, 0.08); color: #059669; }
+.cl-csp-closed { background: rgba(138, 138, 134, 0.08); color: #8a8a86; }
+
+.cl-workflow-status-pill {
+  display: inline-flex; padding: 0; border-radius: 0;
+  font-size: 10px; font-weight: 500; white-space: nowrap;
+  border: none; color: var(--text-muted);
+}
+
+/* ── Status badges ── */
+.cl-st-open { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(193,56,56,0.08); color: #c13838; white-space: nowrap; }
+.cl-st-review { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap; }
+.cl-st-docs { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(147,51,234,0.08); color: #9333ea; white-space: nowrap; }
+.cl-st-approved { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(1,105,111,0.08); color: #01696f; white-space: nowrap; }
+.cl-st-denied { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(0,0,0,0.06); color: #6b6b68; white-space: nowrap; }
+.cl-st-closed { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(0,0,0,0.04); color: #8a8a86; white-space: nowrap; }
+
+/* ── Priority badges ── */
+.cl-pri-critical { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9999px; background: rgba(193,56,56,0.12); color: #c13838; white-space: nowrap; }
+.cl-pri-high { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap; }
+.cl-pri-medium { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(0,0,0,0.05); color: #6b6b68; white-space: nowrap; }
+.cl-pri-low { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(0,0,0,0.03); color: #8a8a86; white-space: nowrap; }
+
+/* ── Docs pending badge ── */
+.cl-docs-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 20px; height: 20px; padding: 0 5px;
+  border-radius: 9999px; background: rgba(147,51,234,0.08); color: #9333ea;
+  font-size: 11px; font-weight: 700;
+}
+</style>
diff --git a/app/pages/claims/intake/[token].vue b/app/pages/claims/intake/[token].vue
new file mode 100644
index 0000000..f093be9
--- /dev/null
+++ b/app/pages/claims/intake/[token].vue
@@ -0,0 +1,672 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false, layout: false })
+
+const route = useRoute()
+const token = route.params.token as string
+
+// ── Mock claim lookup by token ────────────────────────────────────────────────
+interface IntakeClaim {
+  id: string
+  customerName: string
+  policyNumber: string
+  carrier: string
+  lob: 'Auto' | 'Life' | 'General Risk' | 'Home'
+  handler: string
+  expiresAt: string
+}
+
+const MOCK_TOKENS: Record<string, IntakeClaim> = {
+  'tk_hp_048_a3f1': { id: 'CLM-0048', customerName: 'Hotel Pacífico S.A.', policyNumber: 'PROP-2024-HP-001', carrier: 'ASSA', lob: 'General Risk', handler: 'Ana R.', expiresAt: '2026-04-09T14:30:00Z' },
+  'tk_abc_047_b7e2': { id: 'CLM-0047', customerName: 'Empresa ABC S.A.', policyNumber: 'AUTO-2024-FLEET-007', carrier: 'Qualitas', lob: 'Auto', handler: 'Ana R.', expiresAt: '2026-04-07T11:00:00Z' },
+  'tk_st_043_c9d4': { id: 'CLM-0043', customerName: 'Supermercado Tico S.A.', policyNumber: 'GL-2023-ST-001', carrier: 'Mapfre', lob: 'General Risk', handler: 'Marco V.', expiresAt: '2026-03-20T16:00:00Z' },
+  'demo-auto': { id: 'CLM-DEMO-A', customerName: 'Demo Auto Client', policyNumber: 'AUTO-DEMO-001', carrier: 'ASSA', lob: 'Auto', handler: 'Ana R.', expiresAt: '2026-12-31T23:59:00Z' },
+  'demo-life': { id: 'CLM-DEMO-L', customerName: 'Demo Life Client', policyNumber: 'LIFE-DEMO-001', carrier: 'Pan-American Life', lob: 'Life', handler: 'Ana R.', expiresAt: '2026-12-31T23:59:00Z' },
+}
+
+const claim = computed(() => MOCK_TOKENS[token] ?? null)
+const expired = computed(() => {
+  if (!claim.value) return false
+  return new Date(claim.value.expiresAt) < new Date()
+})
+
+// ── Steps ─────────────────────────────────────────────────────────────────────
+const currentStep = ref(0)
+const submitted = ref(false)
+
+const steps = computed(() => {
+  const base = [
+    { id: 'incident', label: 'Incident Details' },
+    { id: 'parties', label: claim.value?.lob === 'Auto' ? 'Vehicles & Parties' : claim.value?.lob === 'Life' ? 'Patient & Provider' : 'Property & Parties' },
+    { id: 'documents', label: 'Documents & Photos' },
+    { id: 'review', label: 'Review & Submit' },
+  ]
+  return base
+})
+
+function nextStep() { if (currentStep.value < steps.value.length - 1) currentStep.value++ }
+function prevStep() { if (currentStep.value > 0) currentStep.value-- }
+function submitForm() { submitted.value = true }
+
+// ── Form data ─────────────────────────────────────────────────────────────────
+const form = reactive({
+  // Step 1: Incident
+  incidentDate: '',
+  incidentTime: '',
+  incidentLocation: '',
+  incidentDescription: '',
+
+  // Step 2: Auto-specific
+  vehicleMake: '',
+  vehicleModel: '',
+  vehicleYear: '',
+  vehiclePlate: '',
+  vehicleColor: '',
+  otherDriverName: '',
+  otherDriverPhone: '',
+  otherDriverInsurance: '',
+  otherDriverPlate: '',
+  witnessName: '',
+  witnessPhone: '',
+
+  // Step 2: Life-specific
+  patientName: '',
+  patientDob: '',
+  patientCedula: '',
+  providerName: '',
+  providerAddress: '',
+  diagnosis: '',
+  treatmentDates: '',
+
+  // Step 2: Property/General Risk
+  propertyAddress: '',
+  propertyType: '',
+  damageDescription: '',
+  emergencyServicesCalled: false,
+  thirdPartyInvolved: false,
+
+  // Step 3: Documents
+  photoDescriptions: [] as string[],
+  hasSignedFud: false,
+  additionalNotes: '',
+})
+
+// ── Photo uploads (mock) ──────────────────────────────────────────────────────
+const photoSlots = computed(() => {
+  if (!claim.value) return []
+  if (claim.value.lob === 'Auto') return [
+    { id: 'front', label: 'Front of vehicle' },
+    { id: 'rear', label: 'Rear of vehicle' },
+    { id: 'left', label: 'Left side' },
+    { id: 'right', label: 'Right side' },
+    { id: 'damage', label: 'Close-up of damage' },
+    { id: 'fud', label: 'FUD firmado — foto del documento (si aplica)', optional: true },
+  ]
+  if (claim.value.lob === 'Life') return [
+    { id: 'prescription', label: 'Medical prescription' },
+    { id: 'referral', label: 'Specialist referral' },
+    { id: 'records', label: 'Medical records' },
+  ]
+  return [
+    { id: 'damage1', label: 'Damage photo 1' },
+    { id: 'damage2', label: 'Damage photo 2' },
+    { id: 'damage3', label: 'Additional photos' },
+    { id: 'report', label: 'Fire/police report (if available)', optional: true },
+  ]
+})
+
+const uploadedPhotos = ref<Record<string, boolean>>({})
+function mockUpload(slotId: string) { uploadedPhotos.value[slotId] = true }
+</script>
+
+<template>
+  <div class="ci-page">
+    <!-- Segur-OS branding bar -->
+    <div class="ci-brand-bar">
+      <span class="ci-brand-logo">Segur-OS</span>
+      <span class="ci-brand-tag">Client Intake Form</span>
+    </div>
+
+    <!-- Invalid / expired token -->
+    <template v-if="!claim">
+      <div class="ci-error">
+        <div class="ci-error-icon">!</div>
+        <h2>Invalid Link</h2>
+        <p>This intake form link is invalid or has expired. Please contact your broker for a new link.</p>
+      </div>
+    </template>
+
+    <template v-else-if="expired">
+      <div class="ci-error">
+        <div class="ci-error-icon">⏱</div>
+        <h2>Link Expired</h2>
+        <p>This intake form link expired on {{ new Date(claim.expiresAt).toLocaleDateString() }}. Please contact your broker to request a new link.</p>
+      </div>
+    </template>
+
+    <!-- Success state -->
+    <template v-else-if="submitted">
+      <div class="ci-success">
+        <div class="ci-success-icon">✓</div>
+        <h2>Thank You</h2>
+        <p>Your claim information for <strong>{{ claim.id }}</strong> has been submitted successfully.</p>
+        <p class="ci-success-sub">Your broker {{ claim.handler }} will review the information and follow up with you shortly.</p>
+      </div>
+    </template>
+
+    <!-- Main form -->
+    <template v-else>
+      <!-- Claim context header -->
+      <div class="ci-context">
+        <div class="ci-context-left">
+          <h1 class="ci-context-title">{{ claim.customerName }}</h1>
+          <p class="ci-context-meta">{{ claim.id }} · {{ claim.policyNumber }} · {{ claim.carrier }}</p>
+        </div>
+        <div class="ci-context-right">
+          <span class="ci-context-lob">{{ claim.lob }}</span>
+        </div>
+      </div>
+
+      <!-- Step indicator -->
+      <div class="ci-steps">
+        <div
+          v-for="(step, idx) in steps"
+          :key="step.id"
+          class="ci-step"
+          :class="{
+            'ci-step-done': idx < currentStep,
+            'ci-step-active': idx === currentStep,
+            'ci-step-pending': idx > currentStep,
+          }"
+        >
+          <div class="ci-step-circle">
+            <span v-if="idx < currentStep">✓</span>
+            <span v-else>{{ idx + 1 }}</span>
+          </div>
+          <span class="ci-step-label">{{ step.label }}</span>
+        </div>
+      </div>
+
+      <!-- Step content -->
+      <div class="ci-card">
+        <!-- ═══ Step 1: Incident Details ═══ -->
+        <template v-if="currentStep === 0">
+          <h2 class="ci-section-title">Incident Details</h2>
+          <p class="ci-section-desc">When and where did the incident occur?</p>
+
+          <div class="ci-field-grid">
+            <div class="ci-field">
+              <label class="ci-label">Date of Incident</label>
+              <input v-model="form.incidentDate" type="date" class="ci-input" />
+            </div>
+            <div class="ci-field">
+              <label class="ci-label">Time (approximate)</label>
+              <input v-model="form.incidentTime" type="time" class="ci-input" />
+            </div>
+          </div>
+          <div class="ci-field">
+            <label class="ci-label">Location</label>
+            <input v-model="form.incidentLocation" type="text" class="ci-input" placeholder="Street address, intersection, or description" />
+          </div>
+          <div class="ci-field">
+            <label class="ci-label">Description of what happened</label>
+            <textarea v-model="form.incidentDescription" class="ci-textarea" rows="4" placeholder="Describe the incident in detail..." />
+          </div>
+        </template>
+
+        <!-- ═══ Step 2: Auto ═══ -->
+        <template v-if="currentStep === 1 && claim.lob === 'Auto'">
+          <h2 class="ci-section-title">Vehicles & Parties</h2>
+          <p class="ci-section-desc">Your vehicle and other parties involved.</p>
+
+          <h3 class="ci-subsection">Your Vehicle</h3>
+          <div class="ci-field-grid">
+            <div class="ci-field">
+              <label class="ci-label">Make</label>
+              <input v-model="form.vehicleMake" type="text" class="ci-input" placeholder="Toyota" />
+            </div>
+            <div class="ci-field">
+              <label class="ci-label">Model</label>
+              <input v-model="form.vehicleModel" type="text" class="ci-input" placeholder="Hilux" />
+            </div>
+            <div class="ci-field">
+              <label class="ci-label">Year</label>
+              <input v-model="form.vehicleYear" type="text" class="ci-input" placeholder="2024" />
+            </div>
+            <div class="ci-field">
+              <label class="ci-label">Plate</label>
+              <input v-model="form.vehiclePlate" type="text" class="ci-input" placeholder="ABC-123" />
+            </div>
+          </div>
+          <div class="ci-field">
+            <label class="ci-label">Color</label>
+            <input v-model="form.vehicleColor" type="text" class="ci-input" placeholder="White" />
+          </div>
+
+          <h3 class="ci-subsection">Other Driver</h3>
+          <div class="ci-field-grid">
+            <div class="ci-field">
+              <label class="ci-label">Name</label>
+              <input v-model="form.otherDriverName" type="text" class="ci-input" />
+            </div>
+            <div class="ci-field">
+              <label class="ci-label">Phone</label>
+              <input v-model="form.otherDriverPhone" type="tel" class="ci-input" />
+            </div>
+          </div>
+          <div class="ci-field-grid">
+            <div class="ci-field">
+              <label class="ci-label">Insurance Company</label>
+              <input v-model="form.otherDriverInsurance" type="text" class="ci-input" />
+            </div>
+            <div class="ci-field">
+              <label class="ci-label">Plate Number</label>
+              <input v-model="form.otherDriverPlate" type="text" class="ci-input" />
+            </div>
+          </div>
+
+          <h3 class="ci-subsection">Witness (if any)</h3>
+          <div class="ci-field-grid">
+            <div class="ci-field">
+              <label class="ci-label">Name</label>
+              <input v-model="form.witnessName" type="text" class="ci-input" />
+            </div>
+            <div class="ci-field">
+              <label class="ci-label">Phone</label>
+              <input v-model="form.witnessPhone" type="tel" class="ci-input" />
+            </div>
+          </div>
+        </template>
+
+        <!-- ═══ Step 2: Life ═══ -->
+        <template v-if="currentStep === 1 && claim.lob === 'Life'">
+          <h2 class="ci-section-title">Patient & Provider</h2>
+          <p class="ci-section-desc">Information about the patient and medical provider.</p>
+
+          <h3 class="ci-subsection">Patient Information</h3>
+          <div class="ci-field-grid">
+            <div class="ci-field">
+              <label class="ci-label">Patient Name</label>
+              <input v-model="form.patientName" type="text" class="ci-input" />
+            </div>
+            <div class="ci-field">
+              <label class="ci-label">Date of Birth</label>
+              <input v-model="form.patientDob" type="date" class="ci-input" />
+            </div>
+          </div>
+          <div class="ci-field">
+            <label class="ci-label">Cédula / ID</label>
+            <input v-model="form.patientCedula" type="text" class="ci-input" />
+          </div>
+
+          <h3 class="ci-subsection">Medical Provider</h3>
+          <div class="ci-field">
+            <label class="ci-label">Provider / Hospital Name</label>
+            <input v-model="form.providerName" type="text" class="ci-input" />
+          </div>
+          <div class="ci-field">
+            <label class="ci-label">Provider Address</label>
+            <input v-model="form.providerAddress" type="text" class="ci-input" />
+          </div>
+          <div class="ci-field">
+            <label class="ci-label">Diagnosis</label>
+            <textarea v-model="form.diagnosis" class="ci-textarea" rows="3" placeholder="Describe the diagnosis or reason for treatment..." />
+          </div>
+          <div class="ci-field">
+            <label class="ci-label">Treatment Dates</label>
+            <input v-model="form.treatmentDates" type="text" class="ci-input" placeholder="e.g. April 1–5, 2026" />
+          </div>
+        </template>
+
+        <!-- ═══ Step 2: General Risk / Home ═══ -->
+        <template v-if="currentStep === 1 && (claim.lob === 'General Risk' || claim.lob === 'Home')">
+          <h2 class="ci-section-title">Property & Parties</h2>
+          <p class="ci-section-desc">Details about the affected property.</p>
+
+          <div class="ci-field">
+            <label class="ci-label">Property Address</label>
+            <input v-model="form.propertyAddress" type="text" class="ci-input" />
+          </div>
+          <div class="ci-field">
+            <label class="ci-label">Property Type</label>
+            <select v-model="form.propertyType" class="ci-input">
+              <option value="">Select...</option>
+              <option value="commercial">Commercial</option>
+              <option value="residential">Residential</option>
+              <option value="industrial">Industrial</option>
+              <option value="other">Other</option>
+            </select>
+          </div>
+          <div class="ci-field">
+            <label class="ci-label">Damage Description</label>
+            <textarea v-model="form.damageDescription" class="ci-textarea" rows="4" placeholder="Describe the damage in detail..." />
+          </div>
+          <div class="ci-field-row">
+            <label class="ci-checkbox">
+              <input v-model="form.emergencyServicesCalled" type="checkbox" />
+              <span>Emergency services were called (fire, police, ambulance)</span>
+            </label>
+          </div>
+          <div class="ci-field-row">
+            <label class="ci-checkbox">
+              <input v-model="form.thirdPartyInvolved" type="checkbox" />
+              <span>Third parties are involved</span>
+            </label>
+          </div>
+        </template>
+
+        <!-- ═══ Step 3: Documents & Photos ═══ -->
+        <template v-if="currentStep === 2">
+          <h2 class="ci-section-title">Documents & Photos</h2>
+          <p class="ci-section-desc">Upload photos and supporting documents. Take clear, well-lit photos.</p>
+
+          <div class="ci-photo-grid">
+            <div v-for="slot in photoSlots" :key="slot.id" class="ci-photo-slot">
+              <div class="ci-photo-box" :class="{ 'ci-photo-uploaded': uploadedPhotos[slot.id] }" @click="mockUpload(slot.id)">
+                <template v-if="uploadedPhotos[slot.id]">
+                  <span class="ci-photo-check">✓</span>
+                </template>
+                <template v-else>
+                  <span class="ci-photo-plus">+</span>
+                </template>
+              </div>
+              <span class="ci-photo-label">{{ slot.label }}</span>
+              <span v-if="slot.optional" class="ci-photo-optional">Optional</span>
+            </div>
+          </div>
+
+          <div class="ci-field" style="margin-top: 20px;">
+            <label class="ci-label">Additional Notes</label>
+            <textarea v-model="form.additionalNotes" class="ci-textarea" rows="3" placeholder="Anything else your broker should know..." />
+          </div>
+        </template>
+
+        <!-- ═══ Step 4: Review & Submit ═══ -->
+        <template v-if="currentStep === 3">
+          <h2 class="ci-section-title">Review & Submit</h2>
+          <p class="ci-section-desc">Please review your information before submitting.</p>
+
+          <div class="ci-review-section">
+            <h3 class="ci-review-heading">Incident</h3>
+            <div class="ci-review-grid">
+              <div class="ci-review-item">
+                <span class="ci-review-label">Date</span>
+                <span class="ci-review-value">{{ form.incidentDate || '—' }}</span>
+              </div>
+              <div class="ci-review-item">
+                <span class="ci-review-label">Time</span>
+                <span class="ci-review-value">{{ form.incidentTime || '—' }}</span>
+              </div>
+              <div class="ci-review-item ci-review-full">
+                <span class="ci-review-label">Location</span>
+                <span class="ci-review-value">{{ form.incidentLocation || '—' }}</span>
+              </div>
+              <div class="ci-review-item ci-review-full">
+                <span class="ci-review-label">Description</span>
+                <span class="ci-review-value">{{ form.incidentDescription || '—' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="claim.lob === 'Auto'" class="ci-review-section">
+            <h3 class="ci-review-heading">Vehicle</h3>
+            <div class="ci-review-grid">
+              <div class="ci-review-item">
+                <span class="ci-review-label">Vehicle</span>
+                <span class="ci-review-value">{{ form.vehicleYear }} {{ form.vehicleMake }} {{ form.vehicleModel }}</span>
+              </div>
+              <div class="ci-review-item">
+                <span class="ci-review-label">Plate</span>
+                <span class="ci-review-value">{{ form.vehiclePlate || '—' }}</span>
+              </div>
+              <div class="ci-review-item">
+                <span class="ci-review-label">Other Driver</span>
+                <span class="ci-review-value">{{ form.otherDriverName || 'Not provided' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="claim.lob === 'Life'" class="ci-review-section">
+            <h3 class="ci-review-heading">Patient & Provider</h3>
+            <div class="ci-review-grid">
+              <div class="ci-review-item">
+                <span class="ci-review-label">Patient</span>
+                <span class="ci-review-value">{{ form.patientName || '—' }}</span>
+              </div>
+              <div class="ci-review-item">
+                <span class="ci-review-label">Provider</span>
+                <span class="ci-review-value">{{ form.providerName || '—' }}</span>
+              </div>
+              <div class="ci-review-item ci-review-full">
+                <span class="ci-review-label">Diagnosis</span>
+                <span class="ci-review-value">{{ form.diagnosis || '—' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="claim.lob === 'General Risk' || claim.lob === 'Home'" class="ci-review-section">
+            <h3 class="ci-review-heading">Property</h3>
+            <div class="ci-review-grid">
+              <div class="ci-review-item">
+                <span class="ci-review-label">Address</span>
+                <span class="ci-review-value">{{ form.propertyAddress || '—' }}</span>
+              </div>
+              <div class="ci-review-item">
+                <span class="ci-review-label">Type</span>
+                <span class="ci-review-value">{{ form.propertyType || '—' }}</span>
+              </div>
+              <div class="ci-review-item ci-review-full">
+                <span class="ci-review-label">Damage</span>
+                <span class="ci-review-value">{{ form.damageDescription || '—' }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="ci-review-section">
+            <h3 class="ci-review-heading">Documents</h3>
+            <p class="ci-review-photos">{{ Object.values(uploadedPhotos).filter(Boolean).length }} of {{ photoSlots.length }} photos uploaded</p>
+          </div>
+        </template>
+      </div>
+
+      <!-- Navigation buttons -->
+      <div class="ci-nav">
+        <button v-if="currentStep > 0" class="ci-btn-back" @click="prevStep">
+          ← Back
+        </button>
+        <div class="ci-nav-spacer" />
+        <button v-if="currentStep < steps.length - 1" class="ci-btn-next" @click="nextStep">
+          Continue →
+        </button>
+        <button v-if="currentStep === steps.length - 1" class="ci-btn-submit" @click="submitForm">
+          Submit Claim Information
+        </button>
+      </div>
+    </template>
+
+    <!-- Footer -->
+    <div class="ci-footer">
+      <p>Powered by <strong>Segur-OS</strong> · This form does not require a login</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* =====================================================================
+   CLIENT INTAKE FORM — mobile-first, no layout, ci- prefix
+   ===================================================================== */
+
+.ci-page {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 0 16px 48px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: #1a1a1a;
+  min-height: 100vh;
+  background: #f8f8f6;
+}
+
+/* ── Brand bar ── */
+.ci-brand-bar {
+  display: flex; align-items: center; gap: 10px;
+  padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.06);
+  margin-bottom: 20px;
+}
+.ci-brand-logo { font-size: 16px; font-weight: 800; color: #01696f; letter-spacing: -0.02em; }
+.ci-brand-tag { font-size: 12px; color: #8a8a86; font-weight: 500; }
+
+/* ── Error / expired ── */
+.ci-error { text-align: center; padding: 60px 16px; }
+.ci-error-icon { font-size: 40px; margin-bottom: 12px; }
+.ci-error h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
+.ci-error p { font-size: 14px; color: #5c5650; line-height: 1.6; }
+
+/* ── Success ── */
+.ci-success { text-align: center; padding: 60px 16px; }
+.ci-success-icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 56px; height: 56px; border-radius: 50%;
+  background: rgba(1, 105, 111, 0.1); color: #01696f;
+  font-size: 28px; font-weight: 700; margin-bottom: 16px;
+}
+.ci-success h2 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
+.ci-success p { font-size: 14px; color: #3a3a3a; line-height: 1.6; }
+.ci-success-sub { color: #8a8a86; margin-top: 8px; }
+
+/* ── Context header ── */
+.ci-context {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 12px; padding: 12px 16px;
+  background: white; border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 12px; margin-bottom: 16px;
+}
+.ci-context-title { font-size: 16px; font-weight: 700; }
+.ci-context-meta { font-size: 12px; color: #8a8a86; margin-top: 2px; }
+.ci-context-lob {
+  display: inline-flex; padding: 4px 10px;
+  border-radius: 8px; font-size: 11px; font-weight: 700;
+  background: rgba(1, 105, 111, 0.08); color: #01696f;
+  text-transform: uppercase; letter-spacing: 0.04em;
+}
+
+/* ── Step indicator ── */
+.ci-steps {
+  display: flex; gap: 4px; margin-bottom: 20px; overflow-x: auto;
+}
+.ci-step {
+  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
+  border-radius: 8px; font-size: 12px; font-weight: 500;
+  white-space: nowrap; flex: 1; min-width: 0;
+}
+.ci-step-circle {
+  width: 24px; height: 24px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 11px; font-weight: 700; flex-shrink: 0;
+}
+.ci-step-label { overflow: hidden; text-overflow: ellipsis; }
+.ci-step-done { color: #01696f; }
+.ci-step-done .ci-step-circle { background: #01696f; color: white; }
+.ci-step-active { color: #1a1a1a; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
+.ci-step-active .ci-step-circle { background: #01696f; color: white; }
+.ci-step-pending { color: #8a8a86; }
+.ci-step-pending .ci-step-circle { background: rgba(0,0,0,0.06); color: #8a8a86; }
+
+/* ── Card ── */
+.ci-card {
+  background: white; border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 12px; padding: 20px 16px;
+}
+
+/* ── Section ── */
+.ci-section-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
+.ci-section-desc { font-size: 13px; color: #8a8a86; margin-bottom: 20px; }
+.ci-subsection { font-size: 14px; font-weight: 600; margin: 20px 0 10px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.06); }
+
+/* ── Fields ── */
+.ci-field { margin-bottom: 14px; }
+.ci-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
+.ci-field-row { margin-bottom: 12px; }
+.ci-label { display: block; font-size: 12px; font-weight: 600; color: #5c5650; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
+.ci-input {
+  width: 100%; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 8px; font-size: 14px; color: #1a1a1a;
+  background: white; transition: border-color 150ms ease;
+}
+.ci-input:focus { outline: none; border-color: #01696f; }
+.ci-textarea {
+  width: 100%; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 8px; font-size: 14px; color: #1a1a1a;
+  resize: vertical; font-family: inherit;
+}
+.ci-textarea:focus { outline: none; border-color: #01696f; }
+.ci-checkbox {
+  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
+  font-size: 14px; color: #3a3a3a;
+}
+.ci-checkbox input { margin-top: 3px; accent-color: #01696f; }
+
+/* ── Photo grid ── */
+.ci-photo-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
+}
+.ci-photo-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+.ci-photo-box {
+  width: 100%; aspect-ratio: 4/3; border: 2px dashed rgba(0,0,0,0.12);
+  border-radius: 10px; display: flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: all 150ms ease; background: rgba(0,0,0,0.02);
+}
+.ci-photo-box:hover { border-color: #01696f; background: rgba(1, 105, 111, 0.03); }
+.ci-photo-uploaded { border-style: solid; border-color: #01696f; background: rgba(1, 105, 111, 0.06); }
+.ci-photo-plus { font-size: 24px; color: #8a8a86; }
+.ci-photo-check { font-size: 24px; color: #01696f; font-weight: 700; }
+.ci-photo-label { font-size: 11px; color: #5c5650; text-align: center; line-height: 1.3; }
+.ci-photo-optional { font-size: 10px; color: #8a8a86; font-style: italic; }
+
+/* ── Review ── */
+.ci-review-section { margin-bottom: 20px; }
+.ci-review-heading { font-size: 14px; font-weight: 700; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(0,0,0,0.06); }
+.ci-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.ci-review-full { grid-column: 1 / -1; }
+.ci-review-item { }
+.ci-review-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86; margin-bottom: 2px; }
+.ci-review-value { font-size: 14px; color: #1a1a1a; }
+.ci-review-photos { font-size: 13px; color: #5c5650; }
+
+/* ── Navigation ── */
+.ci-nav {
+  display: flex; align-items: center; gap: 12px;
+  margin-top: 16px; padding: 0 4px;
+}
+.ci-nav-spacer { flex: 1; }
+.ci-btn-back {
+  padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 600;
+  background: white; color: #5c5650; border: 1px solid rgba(0,0,0,0.1);
+  cursor: pointer;
+}
+.ci-btn-back:hover { color: #1a1a1a; border-color: rgba(0,0,0,0.2); }
+.ci-btn-next {
+  padding: 10px 24px; border-radius: 10px; font-size: 14px; font-weight: 600;
+  background: #01696f; color: white; border: none; cursor: pointer;
+}
+.ci-btn-next:hover { opacity: 0.9; }
+.ci-btn-submit {
+  padding: 12px 28px; border-radius: 10px; font-size: 14px; font-weight: 700;
+  background: #01696f; color: white; border: none; cursor: pointer;
+}
+.ci-btn-submit:hover { opacity: 0.9; }
+
+/* ── Footer ── */
+.ci-footer {
+  text-align: center; padding: 24px 0; margin-top: 32px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+  font-size: 12px; color: #8a8a86;
+}
+
+/* ── Responsive ── */
+@media (max-width: 480px) {
+  .ci-field-grid { grid-template-columns: 1fr; }
+  .ci-photo-grid { grid-template-columns: repeat(2, 1fr); }
+  .ci-review-grid { grid-template-columns: 1fr; }
+  .ci-steps { gap: 2px; }
+  .ci-step-label { display: none; }
+}
+</style>
diff --git a/app/pages/claims/settings.vue b/app/pages/claims/settings.vue
new file mode 100644
index 0000000..41257a9
--- /dev/null
+++ b/app/pages/claims/settings.vue
@@ -0,0 +1,416 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+usePageTitle('Claims Settings')
+
+// ── SLA Rules ─────────────────────────────────────────────────────────────────
+interface SlaRule {
+  lob: string
+  targetDays: number
+  tier1Pct: number
+  tier2Pct: number
+  tier3Pct: number
+}
+
+const slaRules = ref<SlaRule[]>([
+  { lob: 'Auto', targetDays: 14, tier1Pct: 50, tier2Pct: 75, tier3Pct: 100 },
+  { lob: 'Life', targetDays: 21, tier1Pct: 50, tier2Pct: 75, tier3Pct: 100 },
+  { lob: 'General Risk', targetDays: 30, tier1Pct: 50, tier2Pct: 75, tier3Pct: 100 },
+  { lob: 'Home', targetDays: 21, tier1Pct: 50, tier2Pct: 75, tier3Pct: 100 },
+  { lob: 'Fianza', targetDays: 10, tier1Pct: 50, tier2Pct: 75, tier3Pct: 100 },
+])
+
+function tierDays(rule: SlaRule, pct: number) {
+  return Math.round(rule.targetDays * pct / 100)
+}
+
+// ── Escalation Tiers ──────────────────────────────────────────────────────────
+interface EscalationTier {
+  threshold: string
+  action: string
+  notify: string
+}
+
+const escalationTiers = ref<EscalationTier[]>([
+  { threshold: '50% of SLA', action: 'Notify handler', notify: 'Handler' },
+  { threshold: '75% of SLA', action: 'Notify handler + manager', notify: 'Handler, Manager' },
+  { threshold: '100% of SLA', action: 'Auto-escalate to manager', notify: 'Manager, Team Lead' },
+])
+
+// ── Required Document Gates ───────────────────────────────────────────────────
+interface DocGate {
+  status: string
+  docTypes: string[]
+}
+
+const docGateStatuses = ['FNOL Submitted', 'Investigation', 'Documentation Pending', 'Reserved', 'Negotiation', 'Settlement']
+const docTypes = ['FNOL Form', 'Police Report', 'Photos', 'Estimates', 'Medical Records', 'Proof of Loss', 'Settlement Letter']
+
+const docGates = ref<Record<string, Record<string, boolean>>>({})
+
+// Initialize doc gates
+for (const status of docGateStatuses) {
+  docGates.value[status] = {}
+  for (const doc of docTypes) {
+    // Defaults: FNOL always required, Photos after investigation
+    if (doc === 'FNOL Form') docGates.value[status][doc] = true
+    else if (doc === 'Photos' && ['Investigation', 'Documentation Pending', 'Reserved', 'Negotiation', 'Settlement'].includes(status)) docGates.value[status][doc] = true
+    else if (doc === 'Estimates' && ['Reserved', 'Negotiation', 'Settlement'].includes(status)) docGates.value[status][doc] = true
+    else if (doc === 'Settlement Letter' && status === 'Settlement') docGates.value[status][doc] = true
+    else docGates.value[status][doc] = false
+  }
+}
+
+function toggleDocGate(status: string, doc: string) {
+  docGates.value[status][doc] = !docGates.value[status][doc]
+}
+
+// ── Alert Thresholds ──────────────────────────────────────────────────────────
+const alertThresholds = reactive({
+  reserveIncreasePct: 25,
+  ageDays: 30,
+  carrierNonResponseDays: 5,
+  documentOverdueDays: 7,
+})
+
+// ── Form Templates ────────────────────────────────────────────────────────────
+interface FormTemplate {
+  id: string
+  name: string
+  carrier: string
+  lob: string
+  active: boolean
+}
+
+const formTemplates = ref<FormTemplate[]>([
+  { id: 'ft-1', name: 'Informe de Accidente', carrier: 'ASSA', lob: 'Auto', active: true },
+  { id: 'ft-2', name: 'Informe de Accidente', carrier: 'Qualitas', lob: 'Auto', active: true },
+  { id: 'ft-3', name: 'Aviso de Pérdida', carrier: 'ASSA', lob: 'General Risk', active: true },
+  { id: 'ft-4', name: 'Aviso de Pérdida', carrier: 'Mapfre', lob: 'General Risk', active: true },
+  { id: 'ft-5', name: 'Reclamos Médicos', carrier: 'Pan-American Life', lob: 'Life', active: true },
+  { id: 'ft-6', name: 'Reclamos Médicos', carrier: 'ASSA', lob: 'Life', active: false },
+])
+</script>
+
+<template>
+  <div class="cs-page">
+    <!-- Header -->
+    <div class="cs-header">
+      <div>
+        <NuxtLink to="/claims" class="cs-back-link">
+          <UIcon name="i-heroicons-arrow-left" class="w-3.5 h-3.5" />
+          Back to Claims
+        </NuxtLink>
+        <h1 class="cs-title">Claims Settings</h1>
+        <p class="cs-subtitle">Configure SLA rules, escalation tiers, required documents, and alert thresholds.</p>
+      </div>
+      <button class="cs-save-btn">
+        <UIcon name="i-heroicons-check" class="w-4 h-4" />
+        Save Changes
+      </button>
+    </div>
+
+    <!-- ═══ Section 1: SLA Rule Builder ═══ -->
+    <div class="cs-card">
+      <div class="cs-card-header">
+        <UIcon name="i-heroicons-clock" class="w-5 h-5" />
+        <div>
+          <h2 class="cs-card-title">SLA Rule Builder</h2>
+          <p class="cs-card-desc">Set target resolution days per line of business. Escalation tiers auto-compute from percentages.</p>
+        </div>
+      </div>
+      <div class="cs-table-wrap">
+        <table class="cs-table">
+          <thead>
+            <tr>
+              <th>Line of Business</th>
+              <th>Target Days</th>
+              <th>Tier 1 ({{ slaRules[0]?.tier1Pct ?? 50 }}%)</th>
+              <th>Tier 2 ({{ slaRules[0]?.tier2Pct ?? 75 }}%)</th>
+              <th>Tier 3 ({{ slaRules[0]?.tier3Pct ?? 100 }}%)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="rule in slaRules" :key="rule.lob">
+              <td class="cs-td-bold">{{ rule.lob }}</td>
+              <td>
+                <input v-model.number="rule.targetDays" type="number" min="1" max="365" class="cs-input-sm" />
+              </td>
+              <td class="cs-td-computed">{{ tierDays(rule, rule.tier1Pct) }} days</td>
+              <td class="cs-td-computed">{{ tierDays(rule, rule.tier2Pct) }} days</td>
+              <td class="cs-td-computed cs-td-red">{{ tierDays(rule, rule.tier3Pct) }} days</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- ═══ Section 2: Escalation Tiers ═══ -->
+    <div class="cs-card">
+      <div class="cs-card-header">
+        <UIcon name="i-heroicons-bell-alert" class="w-5 h-5" />
+        <div>
+          <h2 class="cs-card-title">Escalation Tiers</h2>
+          <p class="cs-card-desc">Actions triggered when SLA thresholds are reached.</p>
+        </div>
+      </div>
+      <div class="cs-escalation-list">
+        <div v-for="(tier, idx) in escalationTiers" :key="idx" class="cs-escalation-row">
+          <div class="cs-escalation-dot" :class="idx === 0 ? 'cs-dot-green' : idx === 1 ? 'cs-dot-amber' : 'cs-dot-red'" />
+          <div class="cs-escalation-content">
+            <span class="cs-escalation-threshold">{{ tier.threshold }}</span>
+            <div class="cs-escalation-fields">
+              <div class="cs-field-inline">
+                <label class="cs-label-sm">Action</label>
+                <input v-model="tier.action" type="text" class="cs-input-med" />
+              </div>
+              <div class="cs-field-inline">
+                <label class="cs-label-sm">Notify</label>
+                <input v-model="tier.notify" type="text" class="cs-input-med" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ Section 3: Required Document Gates ═══ -->
+    <div class="cs-card">
+      <div class="cs-card-header">
+        <UIcon name="i-heroicons-folder-open" class="w-5 h-5" />
+        <div>
+          <h2 class="cs-card-title">Required Document Gates</h2>
+          <p class="cs-card-desc">Check which documents are required at each carrier status stage. Missing docs generate tasks automatically.</p>
+        </div>
+      </div>
+      <div class="cs-table-wrap cs-matrix-wrap">
+        <table class="cs-table cs-matrix">
+          <thead>
+            <tr>
+              <th>Status ↓ / Doc →</th>
+              <th v-for="doc in docTypes" :key="doc" class="cs-th-rotated">
+                <span>{{ doc }}</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="status in docGateStatuses" :key="status">
+              <td class="cs-td-bold">{{ status }}</td>
+              <td v-for="doc in docTypes" :key="doc" class="cs-td-check" @click="toggleDocGate(status, doc)">
+                <span v-if="docGates[status][doc]" class="cs-check-on">✓</span>
+                <span v-else class="cs-check-off">·</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- ═══ Section 4: Alert Thresholds ═══ -->
+    <div class="cs-card">
+      <div class="cs-card-header">
+        <UIcon name="i-heroicons-exclamation-triangle" class="w-5 h-5" />
+        <div>
+          <h2 class="cs-card-title">Alert Thresholds</h2>
+          <p class="cs-card-desc">Configure when the system flags claims for attention.</p>
+        </div>
+      </div>
+      <div class="cs-alert-grid">
+        <div class="cs-alert-item">
+          <label class="cs-label">Reserve Increase Trigger</label>
+          <div class="cs-input-group">
+            <input v-model.number="alertThresholds.reserveIncreasePct" type="number" min="1" max="100" class="cs-input-sm" />
+            <span class="cs-input-suffix">% increase</span>
+          </div>
+          <p class="cs-alert-help">Alert when reserve changes by more than this percentage.</p>
+        </div>
+        <div class="cs-alert-item">
+          <label class="cs-label">Claim Age Warning</label>
+          <div class="cs-input-group">
+            <input v-model.number="alertThresholds.ageDays" type="number" min="1" max="365" class="cs-input-sm" />
+            <span class="cs-input-suffix">days</span>
+          </div>
+          <p class="cs-alert-help">Highlight claims older than this threshold.</p>
+        </div>
+        <div class="cs-alert-item">
+          <label class="cs-label">Carrier Non-Response</label>
+          <div class="cs-input-group">
+            <input v-model.number="alertThresholds.carrierNonResponseDays" type="number" min="1" max="30" class="cs-input-sm" />
+            <span class="cs-input-suffix">days</span>
+          </div>
+          <p class="cs-alert-help">Suggest escalation when carrier hasn't responded.</p>
+        </div>
+        <div class="cs-alert-item">
+          <label class="cs-label">Document Overdue</label>
+          <div class="cs-input-group">
+            <input v-model.number="alertThresholds.documentOverdueDays" type="number" min="1" max="30" class="cs-input-sm" />
+            <span class="cs-input-suffix">days</span>
+          </div>
+          <p class="cs-alert-help">Flag overdue required documents after this many days.</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ Section 5: Carrier Form Templates ═══ -->
+    <div class="cs-card">
+      <div class="cs-card-header">
+        <UIcon name="i-heroicons-document-duplicate" class="w-5 h-5" />
+        <div>
+          <h2 class="cs-card-title">Carrier Form Templates</h2>
+          <p class="cs-card-desc">Manage which carrier-specific forms are available for generation. Government forms (FUD) are not managed here.</p>
+        </div>
+      </div>
+      <div class="cs-table-wrap">
+        <table class="cs-table">
+          <thead>
+            <tr>
+              <th>Form Name</th>
+              <th>Carrier</th>
+              <th>LOB</th>
+              <th>Active</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="ft in formTemplates" :key="ft.id">
+              <td class="cs-td-bold">{{ ft.name }}</td>
+              <td>{{ ft.carrier }}</td>
+              <td>{{ ft.lob }}</td>
+              <td>
+                <button
+                  class="cs-toggle"
+                  :class="ft.active ? 'cs-toggle-on' : 'cs-toggle-off'"
+                  @click="ft.active = !ft.active"
+                >
+                  <span class="cs-toggle-dot" />
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* =====================================================================
+   CLAIMS SETTINGS — scoped, cs- prefix
+   ===================================================================== */
+
+.cs-page {
+  max-width: 64rem; margin: 0 auto;
+  display: flex; flex-direction: column; gap: 24px; padding-bottom: 48px;
+}
+
+/* ── Header ── */
+.cs-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.cs-back-link {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 12px; font-weight: 500; color: #8a8a86;
+  text-decoration: none; margin-bottom: 8px; transition: color 150ms ease;
+}
+.cs-back-link:hover { color: #01696f; }
+.cs-title { font-size: 22px; font-weight: 700; color: #1a1a1a; }
+.cs-subtitle { font-size: 13px; color: #8a8a86; margin-top: 4px; }
+.cs-save-btn {
+  display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px;
+  border-radius: 10px; font-size: 13px; font-weight: 600;
+  background: #01696f; color: white; border: none; cursor: pointer;
+}
+.cs-save-btn:hover { opacity: 0.9; }
+
+/* ── Card ── */
+.cs-card {
+  background: #fff; border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+.cs-card-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; color: #01696f; }
+.cs-card-title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
+.cs-card-desc { font-size: 12px; color: #8a8a86; margin-top: 2px; }
+
+/* ── Table ── */
+.cs-table-wrap { overflow-x: auto; }
+.cs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.cs-table thead th {
+  padding: 8px 12px; font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  color: #8a8a86; border-bottom: 1px solid rgba(0,0,0,0.06);
+  text-align: left; white-space: nowrap;
+}
+.cs-table tbody td {
+  padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.04);
+  vertical-align: middle;
+}
+.cs-table tbody tr:last-child td { border-bottom: none; }
+.cs-td-bold { font-weight: 600; }
+.cs-td-computed { color: #5c5650; font-variant-numeric: tabular-nums; }
+.cs-td-red { color: #c13838; font-weight: 600; }
+
+/* ── Inputs ── */
+.cs-input-sm {
+  width: 72px; padding: 5px 8px; border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 6px; font-size: 13px; text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.cs-input-sm:focus { outline: none; border-color: #01696f; }
+.cs-input-med {
+  flex: 1; padding: 5px 10px; border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 6px; font-size: 13px;
+}
+.cs-input-med:focus { outline: none; border-color: #01696f; }
+.cs-input-group { display: flex; align-items: center; gap: 6px; }
+.cs-input-suffix { font-size: 12px; color: #8a8a86; }
+.cs-label { display: block; font-size: 13px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
+.cs-label-sm { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #8a8a86; margin-bottom: 2px; }
+
+/* ── Escalation ── */
+.cs-escalation-list { display: flex; flex-direction: column; gap: 16px; }
+.cs-escalation-row { display: flex; align-items: flex-start; gap: 12px; }
+.cs-escalation-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
+.cs-dot-green { background: #059669; }
+.cs-dot-amber { background: #c27b1a; }
+.cs-dot-red { background: #c13838; }
+.cs-escalation-content { flex: 1; }
+.cs-escalation-threshold { font-size: 14px; font-weight: 700; display: block; margin-bottom: 8px; }
+.cs-escalation-fields { display: flex; gap: 12px; flex-wrap: wrap; }
+.cs-field-inline { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
+
+/* ── Document Matrix ── */
+.cs-matrix-wrap { max-height: 500px; }
+.cs-matrix th, .cs-matrix td { text-align: center; }
+.cs-matrix td:first-child, .cs-matrix th:first-child { text-align: left; }
+.cs-th-rotated span {
+  writing-mode: vertical-lr; transform: rotate(180deg);
+  font-size: 10px; white-space: nowrap;
+}
+.cs-td-check { cursor: pointer; padding: 6px 8px !important; }
+.cs-td-check:hover { background: rgba(1, 105, 111, 0.04); }
+.cs-check-on { color: #01696f; font-weight: 700; font-size: 16px; }
+.cs-check-off { color: rgba(0,0,0,0.15); font-size: 20px; }
+
+/* ── Alert Grid ── */
+.cs-alert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.cs-alert-item { }
+.cs-alert-help { font-size: 11px; color: #8a8a86; margin-top: 4px; }
+
+/* ── Toggle ── */
+.cs-toggle {
+  width: 36px; height: 20px; border-radius: 10px; border: none;
+  cursor: pointer; position: relative; transition: background 200ms ease;
+  padding: 0;
+}
+.cs-toggle-on { background: #01696f; }
+.cs-toggle-off { background: rgba(0,0,0,0.15); }
+.cs-toggle-dot {
+  display: block; width: 16px; height: 16px; border-radius: 50%;
+  background: white; position: absolute; top: 2px;
+  transition: left 200ms ease;
+}
+.cs-toggle-on .cs-toggle-dot { left: 18px; }
+.cs-toggle-off .cs-toggle-dot { left: 2px; }
+
+/* ── Responsive ── */
+@media (max-width: 640px) {
+  .cs-alert-grid { grid-template-columns: 1fr; }
+  .cs-escalation-fields { flex-direction: column; }
+}
+</style>
diff --git a/app/pages/collections/index.vue b/app/pages/collections/index.vue
new file mode 100644
index 0000000..09d2b89
--- /dev/null
+++ b/app/pages/collections/index.vue
@@ -0,0 +1,2724 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+usePageTitle('Collections')
+
+// ── Types ──
+interface ContactNote {
+  date: string
+  agent: string
+  note: string
+}
+
+interface PaymentPlan {
+  totalAmount: number
+  installments: number
+  nextDue: string
+  amountPer: number
+}
+
+type AccountStatus = 'pending' | 'contacted' | 'payment_plan' | 'escalated' | 'resolved'
+type AccountGrade = 'A' | 'B' | 'C' | 'D'
+type LOB = 'Auto' | 'Health' | 'Life' | 'General Risk'
+
+interface OverdueAccount {
+  id: string
+  customerName: string
+  customerId: string
+  policyNumber: string
+  insurer: string
+  lob: LOB
+  daysOverdue: number
+  overdueAmount: number
+  totalPremium: number
+  grade: AccountGrade
+  assignedAgent: string | null
+  status: AccountStatus
+  lastContactDate: string | null
+  notes: ContactNote[]
+  paymentPlan: PaymentPlan | null
+  economicGroup: string | null
+}
+
+interface AssignmentRule {
+  id: string
+  insurer: string | null
+  policyType: LOB | null
+  grade: AccountGrade | null
+  specificAccount: string | null
+  assignedAgent: string
+  enabled: boolean
+}
+
+interface UploadRecord {
+  id: string
+  filename: string
+  date: string
+  policiesPaid: number
+  newOverdue: number
+}
+
+// ── Mock Data ──
+const agents = ['R. Vega', 'A. Morales', 'L. Castro', 'M. Jimenez', 'K. Solano']
+
+const accounts = ref<OverdueAccount[]>([
+  {
+    id: 'COL-001', customerName: 'Transportes del Norte S.A.', customerId: 'CUS-112',
+    policyNumber: 'POL-4401', insurer: 'ASSA', lob: 'Auto',
+    daysOverdue: 95, overdueAmount: 18500, totalPremium: 42000, grade: 'D',
+    assignedAgent: 'A. Morales', status: 'escalated', lastContactDate: '2026-03-15',
+    notes: [
+      { date: '2026-03-15', agent: 'A. Morales', note: 'Client unreachable by phone. Sent formal demand letter via email.' },
+      { date: '2026-02-28', agent: 'A. Morales', note: 'Spoke with accounts payable. They claim cash flow issues.' },
+      { date: '2026-02-10', agent: 'R. Vega', note: 'Initial contact. Client acknowledged debt, requested extension.' },
+    ],
+    paymentPlan: null, economicGroup: 'Grupo Transportes Norte',
+  },
+  {
+    id: 'COL-002', customerName: 'Maria Fernanda Rojas', customerId: 'CUS-238',
+    policyNumber: 'POL-4520', insurer: 'INS', lob: 'Health',
+    daysOverdue: 72, overdueAmount: 3200, totalPremium: 8400, grade: 'C',
+    assignedAgent: 'L. Castro', status: 'contacted', lastContactDate: '2026-03-22',
+    notes: [
+      { date: '2026-03-22', agent: 'L. Castro', note: 'Client says will pay next week. Following up Monday.' },
+    ],
+    paymentPlan: null, economicGroup: null,
+  },
+  {
+    id: 'COL-003', customerName: 'Hotel Pacífico Resort', customerId: 'CUS-045',
+    policyNumber: 'POL-3899', insurer: 'ASSA', lob: 'General Risk',
+    daysOverdue: 105, overdueAmount: 42000, totalPremium: 96000, grade: 'D',
+    assignedAgent: 'A. Morales', status: 'escalated', lastContactDate: '2026-03-18',
+    notes: [
+      { date: '2026-03-18', agent: 'A. Morales', note: 'Escalated to legal department. Property lien under review.' },
+      { date: '2026-03-01', agent: 'A. Morales', note: 'Multiple attempts to contact general manager. No response.' },
+    ],
+    paymentPlan: null, economicGroup: 'Grupo Pacífico',
+  },
+  {
+    id: 'COL-004', customerName: 'Carlos Enrique Vargas', customerId: 'CUS-389',
+    policyNumber: 'POL-4610', insurer: 'Qualitas', lob: 'Auto',
+    daysOverdue: 34, overdueAmount: 890, totalPremium: 2400, grade: 'B',
+    assignedAgent: 'R. Vega', status: 'payment_plan', lastContactDate: '2026-03-28',
+    notes: [
+      { date: '2026-03-28', agent: 'R. Vega', note: 'Set up 3-installment plan. First payment due Apr 5.' },
+    ],
+    paymentPlan: { totalAmount: 890, installments: 3, nextDue: '2026-04-05', amountPer: 297 }, economicGroup: null,
+  },
+  {
+    id: 'COL-005', customerName: 'Clínica Santa María', customerId: 'CUS-067',
+    policyNumber: 'POL-4122', insurer: 'Blue Cross', lob: 'Health',
+    daysOverdue: 61, overdueAmount: 15800, totalPremium: 54000, grade: 'C',
+    assignedAgent: 'L. Castro', status: 'contacted', lastContactDate: '2026-03-25',
+    notes: [
+      { date: '2026-03-25', agent: 'L. Castro', note: 'Clinic administrator says insurance check is being processed. ETA 2 weeks.' },
+    ],
+    paymentPlan: null, economicGroup: 'Grupo Clínica Santa María',
+  },
+  {
+    id: 'COL-006', customerName: 'Roberto Alfaro Mora', customerId: 'CUS-412',
+    policyNumber: 'POL-4700', insurer: 'Pan-American Life', lob: 'Life',
+    daysOverdue: 28, overdueAmount: 1450, totalPremium: 6000, grade: 'A',
+    assignedAgent: null, status: 'pending', lastContactDate: null,
+    notes: [],
+    paymentPlan: null, economicGroup: null,
+  },
+  {
+    id: 'COL-007', customerName: 'Farmacia Central S.A.', customerId: 'CUS-156',
+    policyNumber: 'POL-4055', insurer: 'INS', lob: 'General Risk',
+    daysOverdue: 88, overdueAmount: 6700, totalPremium: 18000, grade: 'D',
+    assignedAgent: 'M. Jimenez', status: 'escalated', lastContactDate: '2026-03-20',
+    notes: [
+      { date: '2026-03-20', agent: 'M. Jimenez', note: 'Formal notice sent. 15-day deadline to pay or policy cancellation.' },
+      { date: '2026-03-05', agent: 'M. Jimenez', note: 'Owner says business is slow. Cannot commit to date.' },
+    ],
+    paymentPlan: null, economicGroup: 'Colectivo Farmacias Nacionales',
+  },
+  {
+    id: 'COL-008', customerName: 'Ana Lucía Bermúdez', customerId: 'CUS-501',
+    policyNumber: 'POL-4811', insurer: 'ASSA', lob: 'Auto',
+    daysOverdue: 15, overdueAmount: 520, totalPremium: 1800, grade: 'A',
+    assignedAgent: 'R. Vega', status: 'contacted', lastContactDate: '2026-04-01',
+    notes: [
+      { date: '2026-04-01', agent: 'R. Vega', note: 'Client will pay by Apr 10. Reminder scheduled.' },
+    ],
+    paymentPlan: null, economicGroup: null,
+  },
+  {
+    id: 'COL-009', customerName: 'Constructora Montes', customerId: 'CUS-078',
+    policyNumber: 'POL-3945', insurer: 'INS', lob: 'General Risk',
+    daysOverdue: 52, overdueAmount: 22400, totalPremium: 68000, grade: 'C',
+    assignedAgent: 'A. Morales', status: 'payment_plan', lastContactDate: '2026-03-30',
+    notes: [
+      { date: '2026-03-30', agent: 'A. Morales', note: 'Negotiated 4-payment plan. CFO signed agreement.' },
+    ],
+    paymentPlan: { totalAmount: 22400, installments: 4, nextDue: '2026-04-15', amountPer: 5600 }, economicGroup: 'Grupo Pacífico',
+  },
+  {
+    id: 'COL-010', customerName: 'Jorge Luis Herrera', customerId: 'CUS-299',
+    policyNumber: 'POL-4333', insurer: 'Qualitas', lob: 'Auto',
+    daysOverdue: 40, overdueAmount: 1100, totalPremium: 3200, grade: 'B',
+    assignedAgent: 'K. Solano', status: 'contacted', lastContactDate: '2026-03-26',
+    notes: [
+      { date: '2026-03-26', agent: 'K. Solano', note: 'Left voicemail. Client has not returned call.' },
+    ],
+    paymentPlan: null, economicGroup: null,
+  },
+  {
+    id: 'COL-011', customerName: 'Seguros y Más Ltda.', customerId: 'CUS-190',
+    policyNumber: 'POL-4200', insurer: 'Blue Cross', lob: 'Health',
+    daysOverdue: 92, overdueAmount: 28000, totalPremium: 120000, grade: 'D',
+    assignedAgent: 'A. Morales', status: 'escalated', lastContactDate: '2026-03-19',
+    notes: [
+      { date: '2026-03-19', agent: 'A. Morales', note: 'Referred to external collections agency. Internal efforts exhausted.' },
+    ],
+    paymentPlan: null, economicGroup: 'Grupo Clínica Santa María',
+  },
+  {
+    id: 'COL-012', customerName: 'Patricia Solís Chen', customerId: 'CUS-445',
+    policyNumber: 'POL-4650', insurer: 'Pan-American Life', lob: 'Life',
+    daysOverdue: 45, overdueAmount: 2800, totalPremium: 9600, grade: 'B',
+    assignedAgent: 'L. Castro', status: 'payment_plan', lastContactDate: '2026-03-29',
+    notes: [
+      { date: '2026-03-29', agent: 'L. Castro', note: 'Agreed to 2-payment plan. First half received.' },
+    ],
+    paymentPlan: { totalAmount: 2800, installments: 2, nextDue: '2026-04-12', amountPer: 1400 }, economicGroup: null,
+  },
+  {
+    id: 'COL-013', customerName: 'Inversiones Tropicales', customerId: 'CUS-034',
+    policyNumber: 'POL-3810', insurer: 'ASSA', lob: 'General Risk',
+    daysOverdue: 67, overdueAmount: 9500, totalPremium: 36000, grade: 'C',
+    assignedAgent: 'M. Jimenez', status: 'contacted', lastContactDate: '2026-03-21',
+    notes: [
+      { date: '2026-03-21', agent: 'M. Jimenez', note: 'Meeting scheduled with company director for Apr 3.' },
+    ],
+    paymentPlan: null, economicGroup: 'Grupo Transportes Norte',
+  },
+  {
+    id: 'COL-014', customerName: 'Diego Alonso Quesada', customerId: 'CUS-520',
+    policyNumber: 'POL-4880', insurer: 'INS', lob: 'Auto',
+    daysOverdue: 22, overdueAmount: 750, totalPremium: 2100, grade: 'A',
+    assignedAgent: null, status: 'pending', lastContactDate: null,
+    notes: [],
+    paymentPlan: null, economicGroup: null,
+  },
+  {
+    id: 'COL-015', customerName: 'Restaurante El Fogón', customerId: 'CUS-178',
+    policyNumber: 'POL-4150', insurer: 'Qualitas', lob: 'Auto',
+    daysOverdue: 58, overdueAmount: 3400, totalPremium: 12000, grade: 'C',
+    assignedAgent: 'K. Solano', status: 'contacted', lastContactDate: '2026-03-24',
+    notes: [
+      { date: '2026-03-24', agent: 'K. Solano', note: 'Owner promises partial payment by month end. Will follow up.' },
+    ],
+    paymentPlan: null, economicGroup: 'Colectivo Farmacias Nacionales',
+  },
+  {
+    id: 'COL-016', customerName: 'Laura Gabriela Monge', customerId: 'CUS-610',
+    policyNumber: 'POL-4920', insurer: 'Blue Cross', lob: 'Health',
+    daysOverdue: 31, overdueAmount: 1900, totalPremium: 7200, grade: 'B',
+    assignedAgent: 'R. Vega', status: 'contacted', lastContactDate: '2026-04-02',
+    notes: [
+      { date: '2026-04-02', agent: 'R. Vega', note: 'Client aware of overdue status. Waiting for employer reimbursement.' },
+    ],
+    paymentPlan: null, economicGroup: null,
+  },
+  {
+    id: 'COL-017', customerName: 'Distribuidora Tica S.A.', customerId: 'CUS-090',
+    policyNumber: 'POL-3970', insurer: 'Pan-American Life', lob: 'Life',
+    daysOverdue: 110, overdueAmount: 14200, totalPremium: 48000, grade: 'D',
+    assignedAgent: 'A. Morales', status: 'escalated', lastContactDate: '2026-03-12',
+    notes: [
+      { date: '2026-03-12', agent: 'A. Morales', note: 'Company appears to have ceased operations. Investigating.' },
+    ],
+    paymentPlan: null, economicGroup: null,
+  },
+])
+
+// ── Role ──
+const isManager = ref(true) // mock — in production from auth
+
+// ── Current user (mock) ──
+const currentUser = 'R. Vega'
+
+// ── Grade Logic ──
+function computeGrade(daysOverdue: number): AccountGrade {
+  if (daysOverdue >= 90) return 'D'
+  if (daysOverdue >= 60) return 'C'
+  if (daysOverdue >= 30) return 'B'
+  return 'A'
+}
+
+// ── Tabs ──
+type MainTab = 'accounts' | 'assigned_to_me' | 'my_lists' | 'unassigned' | 'assignment_rules'
+const activeTab = ref<MainTab>('accounts')
+
+// ── Search & Filters ──
+const searchQuery = ref('')
+const sortBy = ref('amount_desc')
+const filterInsurer = ref('')
+const filterLob = ref('')
+const filterDaysRange = ref('')
+const filterAgent = ref('')
+
+const sortOptions = [
+  { label: 'Amount (High to Low)', value: 'amount_desc' },
+  { label: 'Amount (Low to High)', value: 'amount_asc' },
+  { label: 'Days Overdue', value: 'days_desc' },
+  { label: 'Alphabetical', value: 'alpha' },
+  { label: 'Insurer', value: 'insurer' },
+  { label: 'Grade', value: 'grade' },
+]
+
+const insurers = ['ASSA', 'INS', 'Blue Cross', 'Pan-American Life', 'Qualitas']
+const lobOptions: LOB[] = ['Auto', 'Health', 'Life', 'General Risk']
+const daysRangeOptions = [
+  { label: '30+ days', value: '30' },
+  { label: '60+ days', value: '60' },
+  { label: '90+ days', value: '90' },
+]
+
+const filteredAccounts = computed(() => {
+  let result = [...accounts.value]
+
+  // Search
+  if (searchQuery.value) {
+    const q = searchQuery.value.toLowerCase()
+    result = result.filter(a =>
+      a.customerName.toLowerCase().includes(q) ||
+      a.policyNumber.toLowerCase().includes(q) ||
+      a.insurer.toLowerCase().includes(q) ||
+      a.id.toLowerCase().includes(q)
+    )
+  }
+
+  // Filter insurer
+  if (filterInsurer.value) {
+    result = result.filter(a => a.insurer === filterInsurer.value)
+  }
+
+  // Filter LOB
+  if (filterLob.value) {
+    result = result.filter(a => a.lob === filterLob.value)
+  }
+
+  // Filter days range
+  if (filterDaysRange.value) {
+    const min = parseInt(filterDaysRange.value)
+    result = result.filter(a => a.daysOverdue >= min)
+  }
+
+  // Filter agent
+  if (filterAgent.value) {
+    if (filterAgent.value === 'Unassigned') {
+      result = result.filter(a => !a.assignedAgent)
+    } else {
+      result = result.filter(a => a.assignedAgent === filterAgent.value)
+    }
+  }
+
+  // Sort
+  switch (sortBy.value) {
+    case 'amount_desc': result.sort((a, b) => b.overdueAmount - a.overdueAmount); break
+    case 'amount_asc': result.sort((a, b) => a.overdueAmount - b.overdueAmount); break
+    case 'days_desc': result.sort((a, b) => b.daysOverdue - a.daysOverdue); break
+    case 'alpha': result.sort((a, b) => a.customerName.localeCompare(b.customerName)); break
+    case 'insurer': result.sort((a, b) => a.insurer.localeCompare(b.insurer)); break
+    case 'grade': result.sort((a, b) => a.grade.localeCompare(b.grade)); break
+  }
+
+  return result
+})
+
+// ── KPIs ──
+const kpis = computed(() => {
+  const all = accounts.value
+  const overdue = all.filter(a => a.status !== 'resolved')
+  const totalOverdue = overdue.reduce((s, a) => s + a.overdueAmount, 0)
+  const thirtyDay = overdue.filter(a => a.daysOverdue >= 30 && a.daysOverdue < 60).length
+  const sixtyDay = overdue.filter(a => a.daysOverdue >= 60 && a.daysOverdue < 90).length
+  const ninetyPlus = overdue.filter(a => a.daysOverdue >= 90).length
+  const resolved = all.filter(a => a.status === 'resolved').length
+  const collectionRate = all.length > 0 ? Math.round((resolved / all.length) * 100) : 0
+  return {
+    totalAccounts: overdue.length,
+    totalOverdue,
+    thirtyDay,
+    sixtyDay,
+    ninetyPlus,
+    collectionRate,
+  }
+})
+
+// ── Expanded Rows ──
+const expandedRows = ref<Set<string>>(new Set())
+function toggleRow(id: string) {
+  if (expandedRows.value.has(id)) {
+    expandedRows.value.delete(id)
+  } else {
+    expandedRows.value.add(id)
+  }
+}
+
+// ── Status Management ──
+const statusMeta: Record<AccountStatus, { label: string; class: string }> = {
+  pending: { label: 'Pending', class: 'col-st-pending' },
+  contacted: { label: 'Contacted', class: 'col-st-contacted' },
+  payment_plan: { label: 'Payment Plan', class: 'col-st-plan' },
+  escalated: { label: 'Escalated', class: 'col-st-escalated' },
+  resolved: { label: 'Resolved', class: 'col-st-resolved' },
+}
+
+const allStatuses: AccountStatus[] = ['pending', 'contacted', 'payment_plan', 'escalated', 'resolved']
+
+function updateAccountStatus(id: string, newStatus: AccountStatus) {
+  const account = accounts.value.find(a => a.id === id)
+  if (account) account.status = newStatus
+}
+
+// ── Grade styling ──
+const gradeMeta: Record<AccountGrade, { class: string; tooltip: string }> = {
+  A: { class: 'col-grade-a', tooltip: 'Grade A — under 30 days overdue' },
+  B: { class: 'col-grade-b', tooltip: 'Grade B — 30-59 days overdue' },
+  C: { class: 'col-grade-c', tooltip: 'Grade C — 60-89 days overdue' },
+  D: { class: 'col-grade-d', tooltip: 'Grade D — 90+ days overdue' },
+}
+
+// ── Add Note ──
+const noteModal = ref<{ open: boolean; accountId: string; text: string }>({ open: false, accountId: '', text: '' })
+
+function openNoteModal(accountId: string) {
+  noteModal.value = { open: true, accountId, text: '' }
+}
+
+function saveNote() {
+  const account = accounts.value.find(a => a.id === noteModal.value.accountId)
+  if (account && noteModal.value.text.trim()) {
+    account.notes.unshift({
+      date: new Date().toISOString().split('T')[0],
+      agent: 'Current User',
+      note: noteModal.value.text.trim(),
+    })
+    account.lastContactDate = new Date().toISOString().split('T')[0]
+  }
+  noteModal.value = { open: false, accountId: '', text: '' }
+}
+
+// ── Configurations Tab ──
+type ConfigSection = 'upload' | 'rules' | 'settings'
+const activeConfigSection = ref<ConfigSection>('upload')
+
+// Upload state
+const isDragOver = ref(false)
+const uploadComplete = ref(false)
+const uploadSummary = ref({ policiesPaid: 12, newOverdue: 3 })
+
+const uploadHistory = ref<UploadRecord[]>([
+  { id: 'UP-003', filename: 'ASSA_payments_march_2026.xlsx', date: '2026-03-28', policiesPaid: 18, newOverdue: 5 },
+  { id: 'UP-002', filename: 'INS_cobros_feb_2026.csv', date: '2026-02-27', policiesPaid: 9, newOverdue: 2 },
+  { id: 'UP-001', filename: 'BlueCross_Q1_report.xlsx', date: '2026-01-31', policiesPaid: 24, newOverdue: 7 },
+])
+
+function handleDrop() {
+  isDragOver.value = false
+  uploadComplete.value = true
+  setTimeout(() => { uploadComplete.value = false }, 8000)
+}
+
+function handleFileSelect() {
+  uploadComplete.value = true
+  setTimeout(() => { uploadComplete.value = false }, 8000)
+}
+
+// Assignment rules
+const assignmentRules = ref<AssignmentRule[]>([
+  { id: 'R-001', insurer: 'ASSA', policyType: 'Auto', grade: null, specificAccount: null, assignedAgent: 'R. Vega', enabled: true },
+  { id: 'R-002', insurer: null, policyType: null, grade: 'D', specificAccount: null, assignedAgent: 'A. Morales', enabled: true },
+  { id: 'R-003', insurer: 'Blue Cross', policyType: 'Health', grade: null, specificAccount: null, assignedAgent: 'L. Castro', enabled: true },
+  { id: 'R-004', insurer: 'Qualitas', policyType: null, grade: null, specificAccount: null, assignedAgent: 'K. Solano', enabled: false },
+])
+
+const showAddRule = ref(false)
+const newRule = ref<AssignmentRule>({
+  id: '', insurer: null, policyType: null, grade: null, specificAccount: null, assignedAgent: '', enabled: true,
+})
+
+function addRule() {
+  if (!newRule.value.assignedAgent) return
+  assignmentRules.value.push({
+    ...newRule.value,
+    id: `R-${String(assignmentRules.value.length + 1).padStart(3, '0')}`,
+  })
+  newRule.value = { id: '', insurer: null, policyType: null, grade: null, specificAccount: null, assignedAgent: '', enabled: true }
+  showAddRule.value = false
+}
+
+function removeRule(id: string) {
+  assignmentRules.value = assignmentRules.value.filter(r => r.id !== id)
+}
+
+function describeRule(rule: AssignmentRule): string {
+  const parts: string[] = []
+  if (rule.insurer) parts.push(rule.insurer)
+  else parts.push('All Insurers')
+  if (rule.policyType) parts.push(rule.policyType)
+  if (rule.grade) parts.push(`Grade ${rule.grade}`)
+  if (rule.specificAccount) parts.push(rule.specificAccount)
+  return parts.join(' + ')
+}
+
+// Collection settings
+const settingsAutoEscalate = ref(true)
+const settingsSendReminders = ref(true)
+const settingsNotifyAgent = ref(false)
+const settingsEscalationThreshold = ref('90')
+
+// ── Formatting Helpers ──
+function formatCurrency(n: number): string {
+  return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 0 })
+}
+
+function formatDate(d: string | null): string {
+  if (!d) return '—'
+  const date = new Date(d + 'T00:00:00')
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+function agingColor(days: number): string {
+  if (days >= 90) return 'col-aging-critical'
+  if (days >= 60) return 'col-aging-high'
+  if (days >= 30) return 'col-aging-medium'
+  return 'col-aging-low'
+}
+
+// ═══════════════════════════════════════
+// MY LISTS
+// ═══════════════════════════════════════
+interface CollectionList {
+  id: string
+  name: string
+  createdAt: string
+  accountIds: string[]
+}
+
+const myLists = ref<CollectionList[]>([
+  {
+    id: 'CL-001', name: 'Downtown route – Apr 7', createdAt: '2026-04-07',
+    accountIds: ['COL-004', 'COL-008', 'COL-010'],
+  },
+  {
+    id: 'CL-002', name: 'High-value escalated', createdAt: '2026-04-03',
+    accountIds: ['COL-001', 'COL-003', 'COL-007'],
+  },
+])
+
+const selectedForList = ref<Set<string>>(new Set())
+const showCreateList = ref(false)
+const newListName = ref('')
+
+// Which accounts the current agent can pick from (assigned to them + unassigned)
+const myAvailableAccounts = computed(() =>
+  accounts.value.filter(a => a.assignedAgent === currentUser || !a.assignedAgent)
+)
+
+function toggleListSelect(id: string) {
+  if (selectedForList.value.has(id)) {
+    selectedForList.value.delete(id)
+  } else {
+    selectedForList.value.add(id)
+  }
+}
+
+function selectAllAvailable() {
+  if (selectedForList.value.size === myAvailableAccounts.value.length) {
+    selectedForList.value.clear()
+  } else {
+    myAvailableAccounts.value.forEach(a => selectedForList.value.add(a.id))
+  }
+}
+
+function createList() {
+  if (!newListName.value.trim() || selectedForList.value.size === 0) return
+  myLists.value.unshift({
+    id: `CL-${String(myLists.value.length + 1).padStart(3, '0')}`,
+    name: newListName.value.trim(),
+    createdAt: new Date().toISOString().split('T')[0],
+    accountIds: [...selectedForList.value],
+  })
+  selectedForList.value.clear()
+  newListName.value = ''
+  showCreateList.value = false
+}
+
+function deleteList(id: string) {
+  myLists.value = myLists.value.filter(l => l.id !== id)
+}
+
+const expandedList = ref<string | null>(null)
+function toggleListExpand(id: string) {
+  expandedList.value = expandedList.value === id ? null : id
+}
+
+function getAccountById(id: string) {
+  return accounts.value.find(a => a.id === id)
+}
+
+// ═══════════════════════════════════════
+// ASSIGNED TO ME
+// ═══════════════════════════════════════
+const myAccounts = computed(() =>
+  accounts.value.filter(a => a.assignedAgent === currentUser)
+)
+
+// ═══════════════════════════════════════
+// ASSIGN ACCOUNTS (manager only)
+// ═══════════════════════════════════════
+const assignSearch = ref('')
+const assignFilterStatus = ref('unassigned')
+
+// Smart assign criteria
+type SmartAssignMode = 'grade' | 'group' | 'insurer' | 'lob' | 'insurer_lob' | 'aging' | 'custom'
+const showSmartAssign = ref(false)
+const smartMode = ref<SmartAssignMode>('grade')
+const smartAgent = ref('')
+const smartGrade = ref<AccountGrade | ''>('')
+const smartGroup = ref('')
+const smartInsurer = ref('')
+const smartLob = ref<LOB | ''>('')
+const smartAging = ref('')
+const smartCustomIds = ref<Set<string>>(new Set())
+
+const economicGroups = computed(() => {
+  const groups = new Set<string>()
+  accounts.value.forEach(a => { if (a.economicGroup) groups.add(a.economicGroup) })
+  return [...groups].sort()
+})
+
+const agingOptions = [
+  { label: '15+ days', value: '15' },
+  { label: '30+ days', value: '30' },
+  { label: '60+ days', value: '60' },
+  { label: '90+ days', value: '90' },
+]
+
+const smartMatchCount = computed(() => {
+  return smartMatchingAccounts.value.length
+})
+
+const smartMatchingAccounts = computed(() => {
+  switch (smartMode.value) {
+    case 'grade':
+      return smartGrade.value ? accounts.value.filter(a => a.grade === smartGrade.value) : []
+    case 'group':
+      return smartGroup.value ? accounts.value.filter(a => a.economicGroup === smartGroup.value) : []
+    case 'insurer':
+      return smartInsurer.value ? accounts.value.filter(a => a.insurer === smartInsurer.value) : []
+    case 'lob':
+      return smartLob.value ? accounts.value.filter(a => a.lob === smartLob.value) : []
+    case 'insurer_lob':
+      return (smartInsurer.value && smartLob.value)
+        ? accounts.value.filter(a => a.insurer === smartInsurer.value && a.lob === smartLob.value)
+        : []
+    case 'aging':
+      if (!smartAging.value) return []
+      const min = parseInt(smartAging.value)
+      return accounts.value.filter(a => a.daysOverdue >= min)
+    case 'custom':
+      return accounts.value.filter(a => smartCustomIds.value.has(a.id))
+    default:
+      return []
+  }
+})
+
+function applySmartAssign() {
+  if (!smartAgent.value || smartMatchingAccounts.value.length === 0) return
+  smartMatchingAccounts.value.forEach(a => { a.assignedAgent = smartAgent.value })
+  // reset
+  smartGrade.value = ''
+  smartGroup.value = ''
+  smartInsurer.value = ''
+  smartLob.value = ''
+  smartAging.value = ''
+  smartCustomIds.value.clear()
+  showSmartAssign.value = false
+}
+
+function toggleSmartCustom(id: string) {
+  if (smartCustomIds.value.has(id)) smartCustomIds.value.delete(id)
+  else smartCustomIds.value.add(id)
+}
+
+const assignableAccounts = computed(() => {
+  let result = [...accounts.value]
+  if (assignSearch.value) {
+    const q = assignSearch.value.toLowerCase()
+    result = result.filter(a =>
+      a.customerName.toLowerCase().includes(q) ||
+      a.policyNumber.toLowerCase().includes(q) ||
+      a.id.toLowerCase().includes(q)
+    )
+  }
+  if (assignFilterStatus.value === 'unassigned') {
+    result = result.filter(a => !a.assignedAgent)
+  } else if (assignFilterStatus.value === 'assigned') {
+    result = result.filter(a => !!a.assignedAgent)
+  }
+  return result
+})
+
+function assignAgent(accountId: string, agent: string) {
+  const account = accounts.value.find(a => a.id === accountId)
+  if (account) {
+    account.assignedAgent = agent || null
+  }
+}
+
+const bulkSelected = ref<Set<string>>(new Set())
+const bulkAssignAgent = ref('')
+
+function toggleBulkSelect(id: string) {
+  if (bulkSelected.value.has(id)) {
+    bulkSelected.value.delete(id)
+  } else {
+    bulkSelected.value.add(id)
+  }
+}
+
+function toggleBulkAll() {
+  if (bulkSelected.value.size === assignableAccounts.value.length) {
+    bulkSelected.value.clear()
+  } else {
+    assignableAccounts.value.forEach(a => bulkSelected.value.add(a.id))
+  }
+}
+
+function applyBulkAssign() {
+  if (!bulkAssignAgent.value || bulkSelected.value.size === 0) return
+  bulkSelected.value.forEach(id => {
+    const account = accounts.value.find(a => a.id === id)
+    if (account) account.assignedAgent = bulkAssignAgent.value
+  })
+  bulkSelected.value.clear()
+  bulkAssignAgent.value = ''
+}
+</script>
+
+<template>
+  <div class="col-page">
+    <!-- Header -->
+    <div class="flex flex-wrap items-end justify-between gap-3">
+      <div class="max-w-xl">
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Collections</h1>
+        <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+          Premium collection tracking — overdue balances, payment follow-up, assignment rules, and reconciliation.
+        </p>
+      </div>
+    </div>
+
+    <!-- KPI strip -->
+    <div class="col-kpi-strip">
+      <div class="col-kpi">
+        <p class="col-kpi-label">Overdue Accounts</p>
+        <p class="col-kpi-value" style="color: #c13838;">{{ kpis.totalAccounts }}</p>
+      </div>
+      <div class="col-kpi">
+        <p class="col-kpi-label">Total Overdue</p>
+        <p class="col-kpi-value">{{ formatCurrency(kpis.totalOverdue) }}</p>
+      </div>
+      <div class="col-kpi">
+        <p class="col-kpi-label">30-Day Overdue</p>
+        <p class="col-kpi-value" style="color: #c27b1a;">{{ kpis.thirtyDay }}</p>
+      </div>
+      <div class="col-kpi">
+        <p class="col-kpi-label">60-Day Overdue</p>
+        <p class="col-kpi-value" style="color: #e05a00;">{{ kpis.sixtyDay }}</p>
+      </div>
+      <div class="col-kpi">
+        <p class="col-kpi-label">90+ Day Overdue</p>
+        <p class="col-kpi-value" style="color: #c13838;">{{ kpis.ninetyPlus }}</p>
+      </div>
+      <div class="col-kpi">
+        <p class="col-kpi-label">Collection Rate</p>
+        <p class="col-kpi-value" style="color: #01696f;">{{ kpis.collectionRate }}%</p>
+      </div>
+    </div>
+
+    <!-- Main Tabs -->
+    <div class="col-main-tabs">
+      <button
+        type="button"
+        class="col-main-tab"
+        :class="activeTab === 'accounts' ? 'col-main-tab-active' : 'col-main-tab-inactive'"
+        @click="activeTab = 'accounts'"
+      >
+        <UIcon name="i-heroicons-exclamation-triangle" style="width:14px;height:14px;" />
+        Overdue Accounts
+      </button>
+      <button
+        type="button"
+        class="col-main-tab"
+        :class="activeTab === 'assigned_to_me' ? 'col-main-tab-active' : 'col-main-tab-inactive'"
+        @click="activeTab = 'assigned_to_me'"
+      >
+        <UIcon name="i-heroicons-inbox-arrow-down" style="width:14px;height:14px;" />
+        Assigned to Me
+        <span v-if="myAccounts.length" class="col-tab-count">{{ myAccounts.length }}</span>
+      </button>
+      <button
+        type="button"
+        class="col-main-tab"
+        :class="activeTab === 'my_lists' ? 'col-main-tab-active' : 'col-main-tab-inactive'"
+        @click="activeTab = 'my_lists'"
+      >
+        <UIcon name="i-heroicons-clipboard-document-list" style="width:14px;height:14px;" />
+        My Lists
+      </button>
+      <button
+        v-if="isManager"
+        type="button"
+        class="col-main-tab"
+        :class="activeTab === 'unassigned' ? 'col-main-tab-active' : 'col-main-tab-inactive'"
+        @click="activeTab = 'unassigned'"
+      >
+        <UIcon name="i-heroicons-user-plus" style="width:14px;height:14px;" />
+        Unassigned Accounts
+      </button>
+      <button
+        type="button"
+        class="col-main-tab"
+        :class="activeTab === 'assignment_rules' ? 'col-main-tab-active' : 'col-main-tab-inactive'"
+        @click="activeTab = 'assignment_rules'"
+      >
+        <UIcon name="i-heroicons-cog-6-tooth" style="width:14px;height:14px;" />
+        Account Assignment Rules
+      </button>
+    </div>
+
+    <!-- ════════════════════════════════════════════ -->
+    <!-- OVERDUE ACCOUNTS TAB                        -->
+    <!-- ════════════════════════════════════════════ -->
+    <template v-if="activeTab === 'accounts'">
+      <!-- Toolbar -->
+      <div class="col-toolbar">
+        <div class="col-toolbar-row">
+          <div class="col-search-wrap">
+            <UIcon name="i-heroicons-magnifying-glass" class="col-search-icon" />
+            <input
+              v-model="searchQuery"
+              type="text"
+              placeholder="Search by name, policy, insurer..."
+              class="col-search-input"
+            />
+          </div>
+          <div class="col-toolbar-filters">
+            <select v-model="sortBy" class="col-select">
+              <option v-for="opt in sortOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+            </select>
+            <select v-model="filterInsurer" class="col-select">
+              <option value="">All Insurers</option>
+              <option v-for="ins in insurers" :key="ins" :value="ins">{{ ins }}</option>
+            </select>
+            <select v-model="filterLob" class="col-select">
+              <option value="">All LOBs</option>
+              <option v-for="lob in lobOptions" :key="lob" :value="lob">{{ lob }}</option>
+            </select>
+            <select v-model="filterDaysRange" class="col-select">
+              <option value="">All Days</option>
+              <option v-for="dr in daysRangeOptions" :key="dr.value" :value="dr.value">{{ dr.label }}</option>
+            </select>
+            <select v-model="filterAgent" class="col-select">
+              <option value="">All Agents</option>
+              <option value="Unassigned">Unassigned</option>
+              <option v-for="ag in agents" :key="ag" :value="ag">{{ ag }}</option>
+            </select>
+          </div>
+        </div>
+        <div class="col-toolbar-meta">
+          <span class="text-[11px] text-[var(--text-muted)]">{{ filteredAccounts.length }} account{{ filteredAccounts.length !== 1 ? 's' : '' }}</span>
+        </div>
+      </div>
+
+      <!-- Table -->
+      <div class="col-table-wrap">
+        <table class="col-table">
+          <thead>
+            <tr>
+              <th style="width:28px;"></th>
+              <th>Customer</th>
+              <th>Policy / LOB</th>
+              <th>Insurer</th>
+              <th class="text-right">Overdue</th>
+              <th class="text-right">Total Premium</th>
+              <th class="text-right">Days</th>
+              <th>Grade</th>
+              <th>Collector</th>
+              <th>Status</th>
+              <th>Last Contact</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="a in filteredAccounts" :key="a.id">
+              <!-- Main Row -->
+              <tr class="col-row" :class="{ 'col-row-expanded': expandedRows.has(a.id) }">
+                <td>
+                  <button type="button" class="col-expand-btn" @click="toggleRow(a.id)">
+                    <UIcon
+                      :name="expandedRows.has(a.id) ? 'i-heroicons-chevron-down' : 'i-heroicons-chevron-right'"
+                      style="width:14px;height:14px;"
+                    />
+                  </button>
+                </td>
+                <td>
+                  <NuxtLink :to="`/customers/${a.customerId}`" class="col-customer-link">{{ a.customerName || 'Unnamed customer' }}</NuxtLink>
+                </td>
+                <td>
+                  <NuxtLink :to="`/policies/${a.policyNumber}`" class="col-customer-link text-[12px] font-medium">{{ a.policyNumber }}</NuxtLink>
+                  <p class="text-[11px] text-[var(--text-muted)]">{{ a.lob }}</p>
+                </td>
+                <td class="text-[13px] text-[var(--text-muted)]">{{ a.insurer }}</td>
+                <td class="text-right text-[13px] font-semibold text-[var(--text-primary)]">{{ formatCurrency(a.overdueAmount) }}</td>
+                <td class="text-right text-[12px] text-[var(--text-muted)]">{{ formatCurrency(a.totalPremium) }}</td>
+                <td class="text-right">
+                  <span class="text-[13px] font-semibold" :class="agingColor(a.daysOverdue)">{{ a.daysOverdue }}d</span>
+                </td>
+                <td>
+                  <span :class="['col-grade-badge', gradeMeta[a.grade].class]" :title="gradeMeta[a.grade].tooltip">{{ a.grade }}</span>
+                </td>
+                <td>
+                  <span v-if="a.assignedAgent" class="text-[12px] text-[var(--text-primary)]">{{ a.assignedAgent }}</span>
+                  <span v-else class="col-unassigned-badge">Unassigned</span>
+                </td>
+                <td>
+                  <span :class="statusMeta[a.status].class">{{ statusMeta[a.status].label }}</span>
+                </td>
+                <td class="text-[12px] text-[var(--text-muted)]">{{ formatDate(a.lastContactDate) }}</td>
+                <td>
+                  <div class="col-actions">
+                    <select
+                      class="col-action-select"
+                      @change="updateAccountStatus(a.id, ($event.target as HTMLSelectElement).value as AccountStatus)"
+                    >
+                      <option v-for="s in allStatuses" :key="s" :value="s" :selected="s === a.status">{{ statusMeta[s].label }}</option>
+                    </select>
+                    <button type="button" class="col-icon-btn" title="Add note" @click="openNoteModal(a.id)">
+                      <UIcon name="i-heroicons-chat-bubble-left-ellipsis" style="width:14px;height:14px;" />
+                    </button>
+                  </div>
+                </td>
+              </tr>
+
+              <!-- Expanded Detail Row -->
+              <tr v-if="expandedRows.has(a.id)" :key="a.id + '-detail'" class="col-detail-row">
+                <td colspan="12">
+                  <div class="col-detail-content">
+                    <!-- Contact History -->
+                    <div class="col-detail-section">
+                      <h4 class="col-detail-title">Contact History & Notes</h4>
+                      <div v-if="a.notes.length === 0" class="col-detail-empty">No contact history recorded.</div>
+                      <div v-else class="col-notes-list">
+                        <div v-for="(note, ni) in a.notes" :key="ni" class="col-note-item">
+                          <div class="col-note-meta">
+                            <span class="col-note-date">{{ formatDate(note.date) }}</span>
+                            <span class="col-note-agent">{{ note.agent }}</span>
+                          </div>
+                          <p class="col-note-text">{{ note.note }}</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Payment Plan -->
+                    <div v-if="a.paymentPlan" class="col-detail-section">
+                      <h4 class="col-detail-title">Payment Plan</h4>
+                      <div class="col-plan-card">
+                        <div class="col-plan-row">
+                          <span class="col-plan-label">Total Amount</span>
+                          <span class="col-plan-value">{{ formatCurrency(a.paymentPlan.totalAmount) }}</span>
+                        </div>
+                        <div class="col-plan-row">
+                          <span class="col-plan-label">Installments</span>
+                          <span class="col-plan-value">{{ a.paymentPlan.installments }} payments of {{ formatCurrency(a.paymentPlan.amountPer) }}</span>
+                        </div>
+                        <div class="col-plan-row">
+                          <span class="col-plan-label">Next Due</span>
+                          <span class="col-plan-value">{{ formatDate(a.paymentPlan.nextDue) }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </template>
+
+    <!-- ════════════════════════════════════════════ -->
+    <!-- ASSIGNED TO ME TAB                          -->
+    <!-- ════════════════════════════════════════════ -->
+    <template v-if="activeTab === 'assigned_to_me'">
+      <div class="col-card" style="padding: 16px 20px;">
+        <h3 class="text-[14px] font-semibold text-[var(--text-primary)]">Assigned to Me</h3>
+        <p class="text-[12px] text-[var(--text-muted)] mt-0.5">
+          Accounts assigned to you ({{ currentUser }}) for collection. {{ myAccounts.length }} active case{{ myAccounts.length !== 1 ? 's' : '' }}.
+        </p>
+      </div>
+
+      <div v-if="myAccounts.length === 0" class="col-card" style="padding: 40px 20px; text-align: center;">
+        <UIcon name="i-heroicons-inbox" style="width:36px;height:36px;color:#b0b0ab;margin:0 auto 12px;" />
+        <p class="text-[14px] font-medium text-[var(--text-primary)]">No accounts assigned</p>
+        <p class="text-[12px] text-[var(--text-muted)] mt-1">You currently have no collection accounts. Check with your manager or browse available accounts in My Lists.</p>
+      </div>
+
+      <div v-else class="col-table-wrap">
+        <table class="col-table">
+          <thead>
+            <tr>
+              <th style="width:28px;"></th>
+              <th>Customer</th>
+              <th>Policy / LOB</th>
+              <th>Insurer</th>
+              <th class="text-right">Overdue</th>
+              <th class="text-right">Days</th>
+              <th>Grade</th>
+              <th>Status</th>
+              <th>Last Contact</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="a in myAccounts" :key="a.id">
+              <tr class="col-row" :class="{ 'col-row-expanded': expandedRows.has(a.id) }">
+                <td>
+                  <button type="button" class="col-expand-btn" @click="toggleRow(a.id)">
+                    <UIcon
+                      :name="expandedRows.has(a.id) ? 'i-heroicons-chevron-down' : 'i-heroicons-chevron-right'"
+                      style="width:14px;height:14px;"
+                    />
+                  </button>
+                </td>
+                <td>
+                  <NuxtLink :to="`/customers/${a.customerId}`" class="col-customer-link">{{ a.customerName || 'Unnamed customer' }}</NuxtLink>
+                  <p v-if="a.economicGroup" class="text-[10px] text-[var(--text-muted)] mt-0.5">{{ a.economicGroup }}</p>
+                </td>
+                <td>
+                  <NuxtLink :to="`/policies/${a.policyNumber}`" class="col-customer-link text-[12px] font-medium">{{ a.policyNumber }}</NuxtLink>
+                  <p class="text-[11px] text-[var(--text-muted)]">{{ a.lob }}</p>
+                </td>
+                <td class="text-[13px] text-[var(--text-muted)]">{{ a.insurer }}</td>
+                <td class="text-right text-[13px] font-semibold text-[var(--text-primary)]">{{ formatCurrency(a.overdueAmount) }}</td>
+                <td class="text-right">
+                  <span class="text-[13px] font-semibold" :class="agingColor(a.daysOverdue)">{{ a.daysOverdue }}d</span>
+                </td>
+                <td><span :class="['col-grade-badge', gradeMeta[a.grade].class]" :title="gradeMeta[a.grade].tooltip">{{ a.grade }}</span></td>
+                <td><span :class="statusMeta[a.status].class">{{ statusMeta[a.status].label }}</span></td>
+                <td class="text-[12px] text-[var(--text-muted)]">{{ formatDate(a.lastContactDate) }}</td>
+                <td>
+                  <div class="col-actions">
+                    <select
+                      class="col-action-select"
+                      @change="updateAccountStatus(a.id, ($event.target as HTMLSelectElement).value as AccountStatus)"
+                    >
+                      <option v-for="s in allStatuses" :key="s" :value="s" :selected="s === a.status">{{ statusMeta[s].label }}</option>
+                    </select>
+                    <button type="button" class="col-icon-btn" title="Add note" @click="openNoteModal(a.id)">
+                      <UIcon name="i-heroicons-chat-bubble-left-ellipsis" style="width:14px;height:14px;" />
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              <tr v-if="expandedRows.has(a.id)" :key="a.id + '-detail'" class="col-detail-row">
+                <td colspan="10">
+                  <div class="col-detail-content">
+                    <div class="col-detail-section">
+                      <h4 class="col-detail-title">Contact History & Notes</h4>
+                      <div v-if="a.notes.length === 0" class="col-detail-empty">No contact history recorded.</div>
+                      <div v-else class="col-notes-list">
+                        <div v-for="(note, ni) in a.notes" :key="ni" class="col-note-item">
+                          <div class="col-note-meta">
+                            <span class="col-note-date">{{ formatDate(note.date) }}</span>
+                            <span class="col-note-agent">{{ note.agent }}</span>
+                          </div>
+                          <p class="col-note-text">{{ note.note }}</p>
+                        </div>
+                      </div>
+                    </div>
+                    <div v-if="a.paymentPlan" class="col-detail-section">
+                      <h4 class="col-detail-title">Payment Plan</h4>
+                      <div class="col-plan-card">
+                        <div class="col-plan-row"><span class="col-plan-label">Total Amount</span><span class="col-plan-value">{{ formatCurrency(a.paymentPlan.totalAmount) }}</span></div>
+                        <div class="col-plan-row"><span class="col-plan-label">Installments</span><span class="col-plan-value">{{ a.paymentPlan.installments }} payments of {{ formatCurrency(a.paymentPlan.amountPer) }}</span></div>
+                        <div class="col-plan-row"><span class="col-plan-label">Next Due</span><span class="col-plan-value">{{ formatDate(a.paymentPlan.nextDue) }}</span></div>
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </template>
+
+    <!-- ════════════════════════════════════════════ -->
+    <!-- MY LISTS TAB                                -->
+    <!-- ════════════════════════════════════════════ -->
+    <template v-if="activeTab === 'my_lists'">
+      <!-- Create list bar -->
+      <div class="col-card" style="padding: 16px 20px;">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <h3 class="text-[14px] font-semibold text-[var(--text-primary)]">Collection Lists</h3>
+            <p class="text-[12px] text-[var(--text-muted)] mt-0.5">
+              Build your own collection routes — pick accounts and create a work list to take on the road.
+            </p>
+          </div>
+          <button v-if="!showCreateList" type="button" class="col-action-btn-primary" @click="showCreateList = true">
+            <UIcon name="i-heroicons-plus" style="width:14px;height:14px;" />
+            New List
+          </button>
+        </div>
+      </div>
+
+      <!-- Create list form -->
+      <div v-if="showCreateList" class="col-card" style="border-color: rgba(1,105,111,0.2); background: rgba(1,105,111,0.015);">
+        <h4 class="col-detail-title" style="margin-bottom:8px;">Create New List</h4>
+
+        <div class="flex flex-wrap items-end gap-3 mb-4">
+          <div class="col-form-group" style="flex:1;min-width:200px;">
+            <label class="col-form-label">List Name</label>
+            <input
+              v-model="newListName"
+              type="text"
+              class="col-search-input"
+              placeholder="e.g. Downtown route – Apr 8"
+            />
+          </div>
+        </div>
+
+        <!-- Available accounts to pick -->
+        <p class="col-form-label mb-2">Select accounts ({{ selectedForList.size }} selected)</p>
+        <div class="col-table-wrap" style="max-height: 360px; overflow-y: auto;">
+          <table class="col-table">
+            <thead>
+              <tr>
+                <th style="width:32px;">
+                  <input
+                    type="checkbox"
+                    :checked="selectedForList.size === myAvailableAccounts.length && myAvailableAccounts.length > 0"
+                    @change="selectAllAvailable"
+                    class="col-checkbox"
+                  />
+                </th>
+                <th>Customer</th>
+                <th>Policy</th>
+                <th>Insurer</th>
+                <th class="text-right">Overdue</th>
+                <th class="text-right">Days</th>
+                <th>Grade</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="a in myAvailableAccounts"
+                :key="a.id"
+                class="col-row"
+                :class="{ 'col-row-selected': selectedForList.has(a.id) }"
+                style="cursor:pointer;"
+                @click="toggleListSelect(a.id)"
+              >
+                <td>
+                  <input
+                    type="checkbox"
+                    :checked="selectedForList.has(a.id)"
+                    class="col-checkbox"
+                    @click.stop="toggleListSelect(a.id)"
+                  />
+                </td>
+                <td class="text-[13px] font-medium text-[var(--text-primary)]">{{ a.customerName }}</td>
+                <td>
+                  <NuxtLink :to="`/policies/${a.policyNumber}`" class="col-customer-link text-[12px]">{{ a.policyNumber }}</NuxtLink>
+                  <p class="text-[11px] text-[var(--text-muted)]">{{ a.lob }}</p>
+                </td>
+                <td class="text-[13px] text-[var(--text-muted)]">{{ a.insurer }}</td>
+                <td class="text-right text-[13px] font-semibold text-[var(--text-primary)]">{{ formatCurrency(a.overdueAmount) }}</td>
+                <td class="text-right">
+                  <span class="text-[13px] font-semibold" :class="agingColor(a.daysOverdue)">{{ a.daysOverdue }}d</span>
+                </td>
+                <td><span :class="['col-grade-badge', gradeMeta[a.grade].class]" :title="gradeMeta[a.grade].tooltip">{{ a.grade }}</span></td>
+                <td><span :class="statusMeta[a.status].class">{{ statusMeta[a.status].label }}</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="col-add-rule-actions" style="margin-top:12px;">
+          <button type="button" class="col-btn-secondary" @click="showCreateList = false; selectedForList.clear()">Cancel</button>
+          <button
+            type="button"
+            class="col-action-btn-primary"
+            :disabled="!newListName.trim() || selectedForList.size === 0"
+            @click="createList"
+          >
+            Create List ({{ selectedForList.size }} accounts)
+          </button>
+        </div>
+      </div>
+
+      <!-- Saved lists -->
+      <div v-if="myLists.length === 0 && !showCreateList" class="col-card" style="padding: 40px 20px; text-align: center;">
+        <UIcon name="i-heroicons-clipboard-document-list" style="width:36px;height:36px;color:#b0b0ab;margin:0 auto 12px;" />
+        <p class="text-[14px] font-medium text-[var(--text-primary)]">No lists yet</p>
+        <p class="text-[12px] text-[var(--text-muted)] mt-1">Create a collection list to organize your route and track which accounts to visit.</p>
+      </div>
+
+      <div v-for="list in myLists" :key="list.id" class="col-card" style="padding:0;overflow:hidden;">
+        <!-- List header -->
+        <div
+          class="col-list-header"
+          @click="toggleListExpand(list.id)"
+        >
+          <div class="flex items-center gap-3">
+            <button type="button" class="col-expand-btn">
+              <UIcon
+                :name="expandedList === list.id ? 'i-heroicons-chevron-down' : 'i-heroicons-chevron-right'"
+                style="width:14px;height:14px;"
+              />
+            </button>
+            <div>
+              <p class="text-[14px] font-semibold text-[var(--text-primary)]">{{ list.name }}</p>
+              <p class="text-[11px] text-[var(--text-muted)]">
+                {{ list.accountIds.length }} account{{ list.accountIds.length !== 1 ? 's' : '' }} · Created {{ formatDate(list.createdAt) }}
+              </p>
+            </div>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="col-list-total">{{ formatCurrency(list.accountIds.reduce((s, id) => s + (getAccountById(id)?.overdueAmount ?? 0), 0)) }}</span>
+            <button
+              type="button"
+              class="col-icon-btn col-icon-btn-danger"
+              title="Delete list"
+              @click.stop="deleteList(list.id)"
+            >
+              <UIcon name="i-heroicons-trash" style="width:14px;height:14px;" />
+            </button>
+          </div>
+        </div>
+
+        <!-- List accounts -->
+        <div v-if="expandedList === list.id" class="col-list-body">
+          <table class="col-table">
+            <thead>
+              <tr>
+                <th>Customer</th>
+                <th>Policy</th>
+                <th>Insurer</th>
+                <th class="text-right">Overdue</th>
+                <th class="text-right">Days</th>
+                <th>Grade</th>
+                <th>Status</th>
+                <th>Last Contact</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="aid in list.accountIds" :key="aid" class="col-row">
+                <template v-if="getAccountById(aid)">
+                  <td>
+                    <NuxtLink :to="`/customers/${getAccountById(aid)!.customerId}`" class="col-customer-link">
+                      {{ getAccountById(aid)!.customerName }}
+                    </NuxtLink>
+                  </td>
+                  <td>
+                    <NuxtLink :to="`/policies/${getAccountById(aid)!.policyNumber}`" class="col-customer-link text-[12px] font-medium">{{ getAccountById(aid)!.policyNumber }}</NuxtLink>
+                    <p class="text-[11px] text-[var(--text-muted)]">{{ getAccountById(aid)!.lob }}</p>
+                  </td>
+                  <td class="text-[13px] text-[var(--text-muted)]">{{ getAccountById(aid)!.insurer }}</td>
+                  <td class="text-right text-[13px] font-semibold text-[var(--text-primary)]">{{ formatCurrency(getAccountById(aid)!.overdueAmount) }}</td>
+                  <td class="text-right">
+                    <span class="text-[13px] font-semibold" :class="agingColor(getAccountById(aid)!.daysOverdue)">{{ getAccountById(aid)!.daysOverdue }}d</span>
+                  </td>
+                  <td><span :class="['col-grade-badge', gradeMeta[getAccountById(aid)!.grade].class]">{{ getAccountById(aid)!.grade }}</span></td>
+                  <td><span :class="statusMeta[getAccountById(aid)!.status].class">{{ statusMeta[getAccountById(aid)!.status].label }}</span></td>
+                  <td class="text-[12px] text-[var(--text-muted)]">{{ formatDate(getAccountById(aid)!.lastContactDate) }}</td>
+                </template>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </template>
+
+    <!-- ════════════════════════════════════════════ -->
+    <!-- UNASSIGNED ACCOUNTS TAB (manager only)       -->
+    <!-- ════════════════════════════════════════════ -->
+    <template v-if="activeTab === 'unassigned' && isManager">
+      <div class="col-card" style="padding: 16px 20px;">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <h3 class="text-[14px] font-semibold text-[var(--text-primary)]">Unassigned Accounts</h3>
+            <p class="text-[12px] text-[var(--text-muted)] mt-0.5">
+              Accounts awaiting assignment. Use Smart Assign to assign by criteria, or assign individually.
+            </p>
+          </div>
+          <button v-if="!showSmartAssign" type="button" class="col-action-btn-primary" @click="showSmartAssign = true">
+            <UIcon name="i-heroicons-bolt" style="width:14px;height:14px;" />
+            Smart Assign
+          </button>
+        </div>
+      </div>
+
+      <!-- Smart Assign Panel -->
+      <div v-if="showSmartAssign" class="col-card" style="border-color: rgba(1,105,111,0.2); background: rgba(1,105,111,0.015);">
+        <h4 class="col-detail-title" style="margin-bottom: 12px;">Smart Assign — Assign by Criteria</h4>
+
+        <!-- Mode pills -->
+        <div class="col-smart-modes">
+          <button
+            v-for="m in ([
+              { id: 'grade' as SmartAssignMode, label: 'Account Grade', icon: 'i-heroicons-chart-bar' },
+              { id: 'group' as SmartAssignMode, label: 'Economic Group', icon: 'i-heroicons-building-office' },
+              { id: 'insurer' as SmartAssignMode, label: 'Insurer', icon: 'i-heroicons-building-office-2' },
+              { id: 'lob' as SmartAssignMode, label: 'Policy Type', icon: 'i-heroicons-document-text' },
+              { id: 'insurer_lob' as SmartAssignMode, label: 'Insurer + LOB', icon: 'i-heroicons-squares-2x2' },
+              { id: 'aging' as SmartAssignMode, label: 'Days Overdue', icon: 'i-heroicons-clock' },
+              { id: 'custom' as SmartAssignMode, label: 'Custom Pick', icon: 'i-heroicons-cursor-arrow-rays' },
+            ])"
+            :key="m.id"
+            type="button"
+            class="col-smart-mode-pill"
+            :class="smartMode === m.id ? 'col-smart-mode-active' : ''"
+            @click="smartMode = m.id"
+          >
+            <UIcon :name="m.icon" style="width:13px;height:13px;" />
+            {{ m.label }}
+          </button>
+        </div>
+
+        <!-- Criteria selectors -->
+        <div class="col-smart-criteria">
+          <!-- Grade -->
+          <div v-if="smartMode === 'grade'" class="col-smart-row">
+            <div class="col-form-group" style="min-width:160px;">
+              <label class="col-form-label">Grade</label>
+              <select v-model="smartGrade" class="col-select col-select-full">
+                <option value="">Select grade...</option>
+                <option value="A">A — 0–29 days</option>
+                <option value="B">B — 30–59 days</option>
+                <option value="C">C — 60–89 days</option>
+                <option value="D">D — 90+ days</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Economic Group -->
+          <div v-if="smartMode === 'group'" class="col-smart-row">
+            <div class="col-form-group" style="min-width:200px;">
+              <label class="col-form-label">Economic Group / Colectivo</label>
+              <select v-model="smartGroup" class="col-select col-select-full">
+                <option value="">Select group...</option>
+                <option v-for="g in economicGroups" :key="g" :value="g">{{ g }}</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Insurer -->
+          <div v-if="smartMode === 'insurer'" class="col-smart-row">
+            <div class="col-form-group" style="min-width:160px;">
+              <label class="col-form-label">Insurer</label>
+              <select v-model="smartInsurer" class="col-select col-select-full">
+                <option value="">Select insurer...</option>
+                <option v-for="ins in insurers" :key="ins" :value="ins">{{ ins }}</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- LOB -->
+          <div v-if="smartMode === 'lob'" class="col-smart-row">
+            <div class="col-form-group" style="min-width:160px;">
+              <label class="col-form-label">Policy Type (LOB)</label>
+              <select v-model="smartLob" class="col-select col-select-full">
+                <option value="">Select type...</option>
+                <option v-for="lob in lobOptions" :key="lob" :value="lob">{{ lob }}</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Insurer + LOB -->
+          <div v-if="smartMode === 'insurer_lob'" class="col-smart-row">
+            <div class="col-form-group" style="min-width:160px;">
+              <label class="col-form-label">Insurer</label>
+              <select v-model="smartInsurer" class="col-select col-select-full">
+                <option value="">Select insurer...</option>
+                <option v-for="ins in insurers" :key="ins" :value="ins">{{ ins }}</option>
+              </select>
+            </div>
+            <div class="col-form-group" style="min-width:160px;">
+              <label class="col-form-label">Policy Type (LOB)</label>
+              <select v-model="smartLob" class="col-select col-select-full">
+                <option value="">Select type...</option>
+                <option v-for="lob in lobOptions" :key="lob" :value="lob">{{ lob }}</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Aging -->
+          <div v-if="smartMode === 'aging'" class="col-smart-row">
+            <div class="col-form-group" style="min-width:160px;">
+              <label class="col-form-label">Minimum Days Overdue</label>
+              <select v-model="smartAging" class="col-select col-select-full">
+                <option value="">Select range...</option>
+                <option v-for="opt in agingOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Custom Pick -->
+          <div v-if="smartMode === 'custom'">
+            <p class="text-[12px] text-[var(--text-muted)] mb-2">Click accounts to select them for assignment.</p>
+            <div class="col-table-wrap" style="max-height:240px;overflow-y:auto;">
+              <table class="col-table">
+                <thead>
+                  <tr>
+                    <th style="width:32px;"></th>
+                    <th>Customer</th>
+                    <th>Insurer</th>
+                    <th class="text-right">Overdue</th>
+                    <th class="text-right">Days</th>
+                    <th>Grade</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="a in accounts"
+                    :key="a.id"
+                    class="col-row"
+                    :class="{ 'col-row-selected': smartCustomIds.has(a.id) }"
+                    style="cursor:pointer;"
+                    @click="toggleSmartCustom(a.id)"
+                  >
+                    <td><input type="checkbox" :checked="smartCustomIds.has(a.id)" class="col-checkbox" @click.stop="toggleSmartCustom(a.id)" /></td>
+                    <td class="text-[13px] text-[var(--text-primary)]">{{ a.customerName }}</td>
+                    <td class="text-[12px] text-[var(--text-muted)]">{{ a.insurer }}</td>
+                    <td class="text-right text-[13px] font-semibold">{{ formatCurrency(a.overdueAmount) }}</td>
+                    <td class="text-right"><span class="text-[13px] font-semibold" :class="agingColor(a.daysOverdue)">{{ a.daysOverdue }}d</span></td>
+                    <td><span :class="['col-grade-badge', gradeMeta[a.grade].class]" :title="gradeMeta[a.grade].tooltip">{{ a.grade }}</span></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- Agent + preview + action -->
+          <div class="col-smart-action-row">
+            <div class="col-form-group" style="min-width:160px;">
+              <label class="col-form-label">Assign To</label>
+              <select v-model="smartAgent" class="col-select col-select-full">
+                <option value="">Select agent...</option>
+                <option v-for="ag in agents" :key="ag" :value="ag">{{ ag }}</option>
+              </select>
+            </div>
+            <div class="col-smart-preview">
+              <span v-if="smartMatchCount > 0" class="text-[13px] font-medium text-[#01696f]">
+                {{ smartMatchCount }} account{{ smartMatchCount !== 1 ? 's' : '' }} match
+              </span>
+              <span v-else class="text-[12px] text-[var(--text-muted)]">No accounts match criteria</span>
+            </div>
+            <div class="flex gap-2">
+              <button type="button" class="col-btn-secondary" @click="showSmartAssign = false">Cancel</button>
+              <button
+                type="button"
+                class="col-action-btn-primary"
+                :disabled="!smartAgent || smartMatchCount === 0"
+                @click="applySmartAssign"
+              >
+                Assign {{ smartMatchCount }} Account{{ smartMatchCount !== 1 ? 's' : '' }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bulk action bar -->
+      <div v-if="bulkSelected.size > 0" class="col-bulk-bar">
+        <span class="text-[13px] font-medium text-[var(--text-primary)]">{{ bulkSelected.size }} account{{ bulkSelected.size !== 1 ? 's' : '' }} selected</span>
+        <div class="flex items-center gap-2">
+          <select v-model="bulkAssignAgent" class="col-select">
+            <option value="">Assign to...</option>
+            <option v-for="ag in agents" :key="ag" :value="ag">{{ ag }}</option>
+          </select>
+          <button
+            type="button"
+            class="col-action-btn-primary"
+            :disabled="!bulkAssignAgent"
+            @click="applyBulkAssign"
+            style="padding: 6px 14px; font-size: 12px;"
+          >
+            Assign
+          </button>
+          <button type="button" class="col-btn-secondary" @click="bulkSelected.clear()" style="padding: 6px 14px; font-size: 12px;">
+            Clear
+          </button>
+        </div>
+      </div>
+
+      <!-- Toolbar -->
+      <div class="col-toolbar">
+        <div class="col-toolbar-row">
+          <div class="col-search-wrap">
+            <UIcon name="i-heroicons-magnifying-glass" class="col-search-icon" />
+            <input
+              v-model="assignSearch"
+              type="text"
+              placeholder="Search accounts..."
+              class="col-search-input"
+            />
+          </div>
+          <select v-model="assignFilterStatus" class="col-select">
+            <option value="">All Accounts</option>
+            <option value="unassigned">Unassigned Only</option>
+            <option value="assigned">Assigned Only</option>
+          </select>
+        </div>
+        <div class="col-toolbar-meta">
+          <span class="text-[11px] text-[var(--text-muted)]">{{ assignableAccounts.length }} account{{ assignableAccounts.length !== 1 ? 's' : '' }}</span>
+        </div>
+      </div>
+
+      <!-- Assign table -->
+      <div class="col-table-wrap">
+        <table class="col-table">
+          <thead>
+            <tr>
+              <th style="width:32px;">
+                <input
+                  type="checkbox"
+                  :checked="bulkSelected.size === assignableAccounts.length && assignableAccounts.length > 0"
+                  @change="toggleBulkAll"
+                  class="col-checkbox"
+                />
+              </th>
+              <th>Customer</th>
+              <th>Policy / LOB</th>
+              <th>Insurer</th>
+              <th class="text-right">Overdue</th>
+              <th class="text-right">Days</th>
+              <th>Grade</th>
+              <th>Status</th>
+              <th>Assigned To</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="a in assignableAccounts"
+              :key="a.id"
+              class="col-row"
+              :class="{ 'col-row-selected': bulkSelected.has(a.id) }"
+            >
+              <td>
+                <input
+                  type="checkbox"
+                  :checked="bulkSelected.has(a.id)"
+                  @change="toggleBulkSelect(a.id)"
+                  class="col-checkbox"
+                />
+              </td>
+              <td>
+                <NuxtLink :to="`/customers/${a.customerId}`" class="col-customer-link">{{ a.customerName || 'Unnamed customer' }}</NuxtLink>
+              </td>
+              <td>
+                <NuxtLink :to="`/policies/${a.policyNumber}`" class="col-customer-link text-[12px] font-medium">{{ a.policyNumber }}</NuxtLink>
+                <p class="text-[11px] text-[var(--text-muted)]">{{ a.lob }}</p>
+              </td>
+              <td class="text-[13px] text-[var(--text-muted)]">{{ a.insurer }}</td>
+              <td class="text-right text-[13px] font-semibold text-[var(--text-primary)]">{{ formatCurrency(a.overdueAmount) }}</td>
+              <td class="text-right">
+                <span class="text-[13px] font-semibold" :class="agingColor(a.daysOverdue)">{{ a.daysOverdue }}d</span>
+              </td>
+              <td><span :class="['col-grade-badge', gradeMeta[a.grade].class]" :title="gradeMeta[a.grade].tooltip">{{ a.grade }}</span></td>
+              <td><span :class="statusMeta[a.status].class">{{ statusMeta[a.status].label }}</span></td>
+              <td>
+                <div class="flex items-center gap-2">
+                  <select
+                    class="col-assign-select"
+                    @change="assignAgent(a.id, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="" :selected="!a.assignedAgent">Unassigned</option>
+                    <option v-for="ag in agents" :key="ag" :value="ag" :selected="ag === a.assignedAgent">{{ ag }}</option>
+                  </select>
+                  <button
+                    v-if="a.assignedAgent"
+                    type="button"
+                    class="col-icon-btn col-icon-btn-danger"
+                    title="Unassign"
+                    @click="assignAgent(a.id, '')"
+                  >
+                    <UIcon name="i-heroicons-x-mark" style="width:12px;height:12px;" />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+
+    <!-- ════════════════════════════════════════════ -->
+    <!-- ACCOUNT ASSIGNMENT RULES TAB                 -->
+    <!-- ════════════════════════════════════════════ -->
+    <template v-if="activeTab === 'assignment_rules'">
+      <!-- Config sub-tabs -->
+      <div class="col-config-tabs">
+        <button
+          v-for="sec in ([
+            { id: 'upload' as ConfigSection, label: 'Upload Payment Reports', icon: 'i-heroicons-arrow-up-tray' },
+            { id: 'rules' as ConfigSection, label: 'Assignment Rules', icon: 'i-heroicons-user-group' },
+            { id: 'settings' as ConfigSection, label: 'Collection Settings', icon: 'i-heroicons-adjustments-horizontal' },
+          ])"
+          :key="sec.id"
+          type="button"
+          class="col-config-tab"
+          :class="activeConfigSection === sec.id ? 'col-config-tab-active' : 'col-config-tab-inactive'"
+          @click="activeConfigSection = sec.id"
+        >
+          <UIcon :name="sec.icon" style="width:14px;height:14px;" />
+          {{ sec.label }}
+        </button>
+      </div>
+
+      <!-- ── Upload Payment Reports ── -->
+      <div v-if="activeConfigSection === 'upload'" class="col-config-content">
+        <div class="col-card">
+          <h3 class="col-card-title">Upload Insurer Payment Report</h3>
+          <p class="col-card-desc">
+            Upload insurer payment reports to reconcile accounts. Policies included in the report are marked as paid.
+            Policies NOT on the report that have outstanding balances remain overdue.
+          </p>
+
+          <!-- Drop zone -->
+          <div
+            class="col-dropzone"
+            :class="{ 'col-dropzone-active': isDragOver }"
+            @dragenter.prevent="isDragOver = true"
+            @dragover.prevent="isDragOver = true"
+            @dragleave.prevent="isDragOver = false"
+            @drop.prevent="handleDrop"
+          >
+            <UIcon name="i-heroicons-cloud-arrow-up" class="col-dropzone-icon" />
+            <p class="col-dropzone-text">Drag & drop your payment report here</p>
+            <p class="col-dropzone-hint">Accepts .xls, .xlsx, .csv files</p>
+            <button type="button" class="col-dropzone-btn" @click="handleFileSelect">
+              Or click to browse files
+            </button>
+          </div>
+
+          <!-- Upload success summary -->
+          <div v-if="uploadComplete" class="col-upload-result">
+            <UIcon name="i-heroicons-check-circle" style="width:20px;height:20px;color:#16a34a;" />
+            <div>
+              <p class="col-upload-result-title">Report processed successfully</p>
+              <p class="col-upload-result-detail">
+                {{ uploadSummary.policiesPaid }} policies marked as paid, {{ uploadSummary.newOverdue }} new overdue accounts detected.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Upload history -->
+        <div class="col-card">
+          <h3 class="col-card-title">Upload History</h3>
+          <div class="col-upload-history">
+            <div v-for="rec in uploadHistory" :key="rec.id" class="col-upload-history-item">
+              <div class="col-upload-history-left">
+                <UIcon name="i-heroicons-document-text" style="width:16px;height:16px;color:#8a8a86;" />
+                <div>
+                  <p class="col-upload-filename">{{ rec.filename }}</p>
+                  <p class="col-upload-date">{{ formatDate(rec.date) }}</p>
+                </div>
+              </div>
+              <div class="col-upload-history-right">
+                <span class="col-upload-stat col-upload-stat-paid">{{ rec.policiesPaid }} paid</span>
+                <span class="col-upload-stat col-upload-stat-new">{{ rec.newOverdue }} new overdue</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── Assignment Rules ── -->
+      <div v-if="activeConfigSection === 'rules'" class="col-config-content">
+        <div class="col-card">
+          <div class="flex items-center justify-between gap-3 mb-4">
+            <div>
+              <h3 class="col-card-title" style="margin-bottom:0;">Assignment Rules</h3>
+              <p class="col-card-desc" style="margin-top:4px;">
+                Define automatic collector assignment based on insurer, policy type, grade, or specific accounts.
+              </p>
+            </div>
+            <button type="button" class="col-action-btn-primary" @click="showAddRule = true">
+              <UIcon name="i-heroicons-plus" style="width:14px;height:14px;" />
+              Add Rule
+            </button>
+          </div>
+
+          <!-- Rules table -->
+          <div class="col-rules-table-wrap">
+            <table class="col-table col-rules-table">
+              <thead>
+                <tr>
+                  <th>Condition</th>
+                  <th>Assigned Agent</th>
+                  <th>Enabled</th>
+                  <th style="width:60px;">Remove</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="rule in assignmentRules" :key="rule.id" class="col-row">
+                  <td>
+                    <span class="text-[13px] text-[var(--text-primary)]">{{ describeRule(rule) }}</span>
+                  </td>
+                  <td>
+                    <span class="text-[13px] font-medium text-[var(--text-primary)]">{{ rule.assignedAgent }}</span>
+                  </td>
+                  <td>
+                    <USwitch v-model="rule.enabled" />
+                  </td>
+                  <td>
+                    <button type="button" class="col-icon-btn col-icon-btn-danger" @click="removeRule(rule.id)">
+                      <UIcon name="i-heroicons-trash" style="width:14px;height:14px;" />
+                    </button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- Add Rule Form -->
+          <div v-if="showAddRule" class="col-add-rule-form">
+            <h4 class="col-detail-title" style="margin-bottom:12px;">New Assignment Rule</h4>
+            <div class="col-add-rule-grid">
+              <div class="col-form-group">
+                <label class="col-form-label">Insurer (optional)</label>
+                <select v-model="newRule.insurer" class="col-select col-select-full">
+                  <option :value="null">All Insurers</option>
+                  <option v-for="ins in insurers" :key="ins" :value="ins">{{ ins }}</option>
+                </select>
+              </div>
+              <div class="col-form-group">
+                <label class="col-form-label">Policy Type (optional)</label>
+                <select v-model="newRule.policyType" class="col-select col-select-full">
+                  <option :value="null">All Types</option>
+                  <option v-for="lob in lobOptions" :key="lob" :value="lob">{{ lob }}</option>
+                </select>
+              </div>
+              <div class="col-form-group">
+                <label class="col-form-label">Grade (optional)</label>
+                <select v-model="newRule.grade" class="col-select col-select-full">
+                  <option :value="null">All Grades</option>
+                  <option value="A">A</option>
+                  <option value="B">B</option>
+                  <option value="C">C</option>
+                  <option value="D">D</option>
+                </select>
+              </div>
+              <div class="col-form-group">
+                <label class="col-form-label">Assigned Agent</label>
+                <select v-model="newRule.assignedAgent" class="col-select col-select-full">
+                  <option value="">Select agent...</option>
+                  <option v-for="ag in agents" :key="ag" :value="ag">{{ ag }}</option>
+                </select>
+              </div>
+            </div>
+            <div class="col-add-rule-actions">
+              <button type="button" class="col-btn-secondary" @click="showAddRule = false">Cancel</button>
+              <button type="button" class="col-action-btn-primary" :disabled="!newRule.assignedAgent" @click="addRule">Save Rule</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── Collection Settings ── -->
+      <div v-if="activeConfigSection === 'settings'" class="col-config-content">
+        <div class="col-card">
+          <h3 class="col-card-title">Collection Settings</h3>
+          <p class="col-card-desc">Configure automated collection behaviors and notifications.</p>
+
+          <div class="col-settings-list">
+            <div class="col-setting-item">
+              <div class="col-setting-info">
+                <p class="col-setting-name">Auto-escalate overdue accounts</p>
+                <p class="col-setting-desc">Automatically escalate accounts that exceed the escalation threshold.</p>
+              </div>
+              <USwitch v-model="settingsAutoEscalate" />
+            </div>
+
+            <div class="col-setting-item">
+              <div class="col-setting-info">
+                <p class="col-setting-name">Send reminder emails to customers</p>
+                <p class="col-setting-desc">Automatically send payment reminder emails to overdue customers.</p>
+              </div>
+              <USwitch v-model="settingsSendReminders" />
+            </div>
+
+            <div class="col-setting-item">
+              <div class="col-setting-info">
+                <p class="col-setting-name">Notify assigned agent on status change</p>
+                <p class="col-setting-desc">Send a notification to the assigned collector when an account status changes.</p>
+              </div>
+              <USwitch v-model="settingsNotifyAgent" />
+            </div>
+
+            <div class="col-setting-item">
+              <div class="col-setting-info">
+                <p class="col-setting-name">Default escalation threshold</p>
+                <p class="col-setting-desc">Number of days overdue before automatic escalation triggers.</p>
+              </div>
+              <select v-model="settingsEscalationThreshold" class="col-select">
+                <option value="30">30 days</option>
+                <option value="60">60 days</option>
+                <option value="90">90 days</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- ════════════════════════════════════════════ -->
+    <!-- ADD NOTE MODAL                              -->
+    <!-- ════════════════════════════════════════════ -->
+    <Teleport to="body">
+      <div v-if="noteModal.open" class="col-modal-overlay" @click.self="noteModal.open = false">
+        <div class="col-modal">
+          <div class="col-modal-header">
+            <h3 class="col-modal-title">Add Note</h3>
+            <button type="button" class="col-icon-btn" @click="noteModal.open = false">
+              <UIcon name="i-heroicons-x-mark" style="width:16px;height:16px;" />
+            </button>
+          </div>
+          <div class="col-modal-body">
+            <label class="col-form-label">Note</label>
+            <textarea
+              v-model="noteModal.text"
+              class="col-textarea"
+              rows="4"
+              placeholder="Enter contact note or update..."
+            ></textarea>
+          </div>
+          <div class="col-modal-footer">
+            <button type="button" class="col-btn-secondary" @click="noteModal.open = false">Cancel</button>
+            <button type="button" class="col-action-btn-primary" :disabled="!noteModal.text.trim()" @click="saveNote">Save Note</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+/* ── Page layout ── */
+.col-page {
+  max-width: 76rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-bottom: 3rem;
+}
+
+/* ── KPI strip ── */
+.col-kpi-strip {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 1px;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.06);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.col-kpi {
+  padding: 14px 18px;
+  background: #fff;
+}
+.col-kpi:first-child { border-radius: 12px 0 0 12px; }
+.col-kpi:last-child { border-radius: 0 12px 12px 0; }
+.col-kpi-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+}
+.col-kpi-value {
+  margin-top: 4px;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+@media (max-width: 900px) {
+  .col-kpi-strip { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 540px) {
+  .col-kpi-strip { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* ── Main tabs ── */
+.col-main-tabs {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0,0,0,0.04);
+}
+.col-main-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.col-main-tab-active {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+.col-main-tab-inactive {
+  background: transparent;
+  color: var(--text-muted);
+}
+.col-main-tab-inactive:hover {
+  color: var(--text-primary);
+}
+
+/* ── Toolbar ── */
+.col-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.col-toolbar-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+.col-toolbar-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.col-toolbar-meta {
+  display: flex;
+  align-items: center;
+}
+.col-search-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 200px;
+  max-width: 320px;
+}
+.col-search-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  color: #8a8a86;
+  pointer-events: none;
+}
+.col-search-input {
+  width: 100%;
+  padding: 7px 10px 7px 30px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 13px;
+  background: #fff;
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color 150ms ease;
+}
+.col-search-input:focus {
+  border-color: #01696f;
+}
+.col-search-input::placeholder {
+  color: #b0b0ab;
+}
+.col-select {
+  padding: 5px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.08);
+  font-size: 12px;
+  font-weight: 500;
+  background: #fff;
+  color: var(--text-primary);
+  cursor: pointer;
+  outline: none;
+  min-width: 100px;
+  appearance: auto;
+}
+.col-select:focus {
+  border-color: #01696f;
+}
+.col-select-full {
+  width: 100%;
+}
+
+/* ── Table ── */
+.col-table-wrap {
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow-x: auto;
+}
+.col-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.col-table thead th {
+  padding: 10px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+  white-space: nowrap;
+  text-align: left;
+}
+.col-table tbody td {
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+  vertical-align: middle;
+}
+.col-row {
+  transition: background 100ms ease;
+}
+.col-row:hover {
+  background: rgba(0,0,0,0.015);
+}
+.col-row:last-child td {
+  border-bottom: none;
+}
+.col-row-expanded {
+  background: rgba(1,105,111,0.02);
+}
+
+/* ── Expand button ── */
+.col-expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.col-expand-btn:hover {
+  background: rgba(0,0,0,0.06);
+  color: var(--text-primary);
+}
+
+/* ── Customer link ── */
+.col-customer-link {
+  font-size: 13px;
+  font-weight: 500;
+  color: #01696f;
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+.col-customer-link:hover {
+  color: #015458;
+  text-decoration: underline;
+}
+
+/* ── Aging colors ── */
+.col-aging-critical { color: #c13838; }
+.col-aging-high { color: #e05a00; }
+.col-aging-medium { color: #c27b1a; }
+.col-aging-low { color: var(--text-primary); }
+
+/* ── Grade badges ── */
+.col-grade-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 20px;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 6px;
+}
+.col-grade-a { background: rgba(22,163,74,0.08); color: #16a34a; }
+.col-grade-b { background: rgba(194,123,26,0.08); color: #c27b1a; }
+.col-grade-c { background: rgba(224,90,0,0.08); color: #e05a00; }
+.col-grade-d { background: rgba(193,56,56,0.08); color: #c13838; }
+
+/* ── Status badges ── */
+.col-st-pending {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(0,0,0,0.05); color: #8a8a86; white-space: nowrap;
+}
+.col-st-contacted {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(59,130,246,0.08); color: #3b82f6; white-space: nowrap;
+}
+.col-st-plan {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(1,105,111,0.08); color: #01696f; white-space: nowrap;
+}
+.col-st-escalated {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(193,56,56,0.08); color: #c13838; white-space: nowrap;
+}
+.col-st-resolved {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(22,163,74,0.08); color: #16a34a; white-space: nowrap;
+}
+
+/* ── Unassigned badge ── */
+.col-unassigned-badge {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap;
+}
+
+/* ── Actions ── */
+.col-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.col-action-select {
+  padding: 4px 6px;
+  border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 11px;
+  background: #fff;
+  color: var(--text-primary);
+  cursor: pointer;
+  outline: none;
+}
+.col-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.col-icon-btn:hover {
+  background: rgba(0,0,0,0.06);
+  color: var(--text-primary);
+}
+.col-icon-btn-danger:hover {
+  background: rgba(193,56,56,0.08);
+  color: #c13838;
+}
+
+/* ── Detail row ── */
+.col-detail-row td {
+  padding: 0 !important;
+  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
+}
+.col-detail-content {
+  padding: 16px 20px 20px 56px;
+  display: flex;
+  gap: 32px;
+  flex-wrap: wrap;
+  background: rgba(1,105,111,0.015);
+}
+.col-detail-section {
+  flex: 1;
+  min-width: 280px;
+}
+.col-detail-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  margin-bottom: 10px;
+}
+.col-detail-empty {
+  font-size: 12px;
+  color: #b0b0ab;
+  font-style: italic;
+}
+
+/* ── Notes list ── */
+.col-notes-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.col-note-item {
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.05);
+}
+.col-note-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.col-note-date {
+  font-size: 11px;
+  font-weight: 600;
+  color: #8a8a86;
+}
+.col-note-agent {
+  font-size: 11px;
+  font-weight: 500;
+  color: #01696f;
+}
+.col-note-text {
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-primary);
+}
+
+/* ── Payment Plan Card ── */
+.col-plan-card {
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.05);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.col-plan-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.col-plan-label {
+  font-size: 12px;
+  color: #8a8a86;
+}
+.col-plan-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+/* ── Config tabs ── */
+.col-config-tabs {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.col-config-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.col-config-tab-active {
+  background: #fff;
+  color: #01696f;
+  border-color: rgba(1,105,111,0.2);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+.col-config-tab-inactive {
+  background: transparent;
+  color: var(--text-muted);
+}
+.col-config-tab-inactive:hover {
+  background: rgba(0,0,0,0.03);
+  color: var(--text-primary);
+}
+.col-config-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ── Card ── */
+.col-card {
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  padding: 20px 24px;
+}
+.col-card-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+.col-card-desc {
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.5;
+  margin-bottom: 16px;
+}
+
+/* ── Drop zone ── */
+.col-dropzone {
+  border: 2px dashed rgba(0,0,0,0.12);
+  border-radius: 12px;
+  padding: 36px 24px;
+  text-align: center;
+  transition: all 200ms ease;
+  cursor: pointer;
+}
+.col-dropzone-active {
+  border-color: #01696f;
+  background: rgba(1,105,111,0.03);
+}
+.col-dropzone:hover {
+  border-color: rgba(0,0,0,0.2);
+}
+.col-dropzone-icon {
+  width: 36px;
+  height: 36px;
+  color: #b0b0ab;
+  margin: 0 auto 12px;
+}
+.col-dropzone-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+.col-dropzone-hint {
+  font-size: 12px;
+  color: #8a8a86;
+  margin-bottom: 12px;
+}
+.col-dropzone-btn {
+  padding: 6px 14px;
+  border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.12);
+  background: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  color: #01696f;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.col-dropzone-btn:hover {
+  background: rgba(1,105,111,0.04);
+  border-color: #01696f;
+}
+
+/* ── Upload result ── */
+.col-upload-result {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-top: 16px;
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: rgba(22,163,74,0.05);
+  border: 1px solid rgba(22,163,74,0.15);
+}
+.col-upload-result-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #16a34a;
+}
+.col-upload-result-detail {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+/* ── Upload history ── */
+.col-upload-history {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.col-upload-history-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.04);
+  transition: background 100ms ease;
+}
+.col-upload-history-item:hover {
+  background: rgba(0,0,0,0.015);
+}
+.col-upload-history-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.col-upload-filename {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.col-upload-date {
+  font-size: 11px;
+  color: #8a8a86;
+}
+.col-upload-history-right {
+  display: flex;
+  gap: 8px;
+}
+.col-upload-stat {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  white-space: nowrap;
+}
+.col-upload-stat-paid {
+  background: rgba(22,163,74,0.08);
+  color: #16a34a;
+}
+.col-upload-stat-new {
+  background: rgba(193,56,56,0.08);
+  color: #c13838;
+}
+
+/* ── Rules table ── */
+.col-rules-table-wrap {
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.06);
+  overflow: hidden;
+}
+.col-rules-table tbody td {
+  vertical-align: middle;
+}
+
+/* ── Add Rule Form ── */
+.col-add-rule-form {
+  margin-top: 16px;
+  padding: 16px 20px;
+  border-radius: 10px;
+  border: 1px solid rgba(1,105,111,0.15);
+  background: rgba(1,105,111,0.02);
+}
+.col-add-rule-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+@media (max-width: 640px) {
+  .col-add-rule-grid { grid-template-columns: 1fr; }
+}
+.col-add-rule-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+}
+.col-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.col-form-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+}
+
+/* ── Settings list ── */
+.col-settings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.col-setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 0;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+}
+.col-setting-item:last-child {
+  border-bottom: none;
+}
+.col-setting-info {
+  flex: 1;
+}
+.col-setting-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.col-setting-desc {
+  font-size: 12px;
+  color: #8a8a86;
+  margin-top: 2px;
+}
+
+/* ── Buttons ── */
+.col-action-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  background: #01696f;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.col-action-btn-primary:hover {
+  background: #015458;
+}
+.col-action-btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.col-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  background: #fff;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.12);
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.col-btn-secondary:hover {
+  background: rgba(0,0,0,0.03);
+}
+
+/* ── Modal ── */
+.col-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.3);
+  backdrop-filter: blur(2px);
+}
+.col-modal {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
+  width: 100%;
+  max-width: 480px;
+  margin: 16px;
+  overflow: hidden;
+}
+.col-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.col-modal-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.col-modal-body {
+  padding: 16px 20px;
+}
+.col-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+}
+.col-textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--text-primary);
+  background: #fff;
+  outline: none;
+  resize: vertical;
+  margin-top: 6px;
+  transition: border-color 150ms ease;
+}
+.col-textarea:focus {
+  border-color: #01696f;
+}
+.col-textarea::placeholder {
+  color: #b0b0ab;
+}
+
+/* ── Checkbox ── */
+.col-checkbox {
+  width: 15px;
+  height: 15px;
+  accent-color: #01696f;
+  cursor: pointer;
+}
+
+/* ── Selected row ── */
+.col-row-selected {
+  background: rgba(1,105,111,0.04) !important;
+}
+
+/* ── My Lists ── */
+.col-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  cursor: pointer;
+  transition: background 100ms ease;
+}
+.col-list-header:hover {
+  background: rgba(0,0,0,0.015);
+}
+.col-list-total {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+.col-list-body {
+  border-top: 1px solid rgba(0,0,0,0.06);
+}
+
+/* ── Bulk action bar ── */
+.col-bulk-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 16px;
+  border-radius: 10px;
+  background: rgba(1,105,111,0.04);
+  border: 1px solid rgba(1,105,111,0.15);
+}
+
+/* ── Assign select ── */
+.col-assign-select {
+  padding: 5px 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 12px;
+  background: #fff;
+  color: var(--text-primary);
+  cursor: pointer;
+  outline: none;
+  min-width: 130px;
+}
+.col-assign-select:focus {
+  border-color: #01696f;
+}
+
+/* ── Tab count badge ── */
+.col-tab-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  font-size: 10px;
+  font-weight: 700;
+  background: rgba(1,105,111,0.1);
+  color: #01696f;
+}
+
+/* ── Smart assign ── */
+.col-smart-modes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+.col-smart-mode-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.col-smart-mode-pill:hover {
+  border-color: rgba(0,0,0,0.15);
+  color: var(--text-primary);
+}
+.col-smart-mode-active {
+  background: #01696f;
+  color: #fff !important;
+  border-color: #01696f !important;
+}
+.col-smart-criteria {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.col-smart-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.col-smart-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+  margin-top: 4px;
+}
+.col-smart-preview {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-height: 34px;
+}
+</style>
diff --git a/app/pages/customers/[id].vue b/app/pages/customers/[id].vue
index 9da0e71..ff99b38 100644
--- a/app/pages/customers/[id].vue
+++ b/app/pages/customers/[id].vue
@@ -1,215 +1,2289 @@
 <script setup lang="ts">
+import { MOCK_CUSTOMERS, MOCK_CUSTOMERS_BY_ID, fmtMoney, type MockCustomer, type MockPolicy } from '~/data/mock-customers'
+import { customerTier } from '~/data/mock-customers'
+
+definePageMeta({ ssr: false })
+
 const route = useRoute()
-const id    = route.params.id as string
+const id = route.params.id as string
 
 const { data, error, pending, refresh } = useCustomer(`/customers/${id}`)
 const customer = computed(() => data.value?.data)
 
 const isIndividual = computed(() => customer.value?.customer_type !== 'corporate')
 
-const customerName = computed(() => {
-  if (!customer.value) return ''
-  return isIndividual.value
-    ? `${customer.value.first_name} ${customer.value.last_name}`
-    : (customer.value.commercial_name || customer.value.legal_name)
+const { isFavorite, toggleFavorite } = useClientFavorites()
+const { getTierForCustomer, getScoreForCustomer, config: attentionConfig } = useCustomerAttention()
+
+/* ── Resolve mock client by route id ── */
+const mock = computed<MockCustomer>(() => {
+  return MOCK_CUSTOMERS_BY_ID[id] ?? MOCK_CUSTOMERS[0]!
+})
+
+usePageTitle(computed(() => mock.value.name))
+
+const customerName = computed(() => {
+  if (!customer.value) return mock.value.name || 'Unnamed customer'
+  if (isIndividual.value) {
+    const full = [customer.value.first_name, customer.value.last_name].filter(Boolean).join(' ')
+    return full || 'Unnamed customer'
+  }
+  return customer.value.commercial_name || customer.value.legal_name || 'Unnamed company'
 })
 
-// policies — individual uses document_id, corporate uses ruc
 const policyFilterValue = computed(() =>
   isIndividual.value ? customer.value?.document_id : customer.value?.ruc
 )
-const policyFilterField = computed(() =>
-  isIndividual.value ? 'applicant_document' : 'applicant_document'
-)
-
-const { data: policiesData } = usePolicy('/car-policies', {
-  query: computed(() => policyFilterValue.value ? {
-    'filters[0][field]': policyFilterField.value,
-    'filters[0][op]':    '==',
-    'filters[0][value]': policyFilterValue.value
-  } : {})
+const { data: policiesData } = usePolicy('/policies', {
+  query: computed(() => policyFilterValue.value
+    ? {
+        'filters[0][field]': 'search',
+        'filters[0][op]': '==',
+        'filters[0][value]': policyFilterValue.value
+      }
+    : {})
 })
-
 const customerPolicies = computed(() => policiesData.value?.data ?? [])
 
+const activeTab = ref<'policies' | 'claims' | 'payments' | 'activity' | 'history' | 'relationships' | 'notes'>('policies')
+
+const totalPremium = computed(() => {
+  const sum = mock.value.policies.reduce((s, p) => s + p.premium, 0)
+  return fmtMoney(sum)
+})
+
 const formatDate = (date: string) => {
   if (!date) return '—'
-  return new Date(date).toLocaleDateString('es-PA', {
-    day: '2-digit', month: 'short', year: 'numeric'
-  })
+  return new Date(date).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' })
 }
 
-const statusColor = (status: string) => ({
-  quote_requested:   'yellow',
-  quotes_received:   'blue',
-  solicitation_sent: 'purple',
-  active:            'green'
-}[status] ?? 'gray')
+const activityDotColor: Record<string, string> = {
+  claim: '#c13838',
+  payment: '#0f7b5f',
+  renewal: '#7c3aed',
+  quote: '#01696f',
+  note: '#8a8a86',
+  policy: '#0d5c63',
+  onboarding: '#01696f',
+}
+
+const activityIcon: Record<string, string> = {
+  claim: 'i-heroicons-exclamation-triangle',
+  payment: 'i-heroicons-banknotes',
+  renewal: 'i-heroicons-arrow-path',
+  quote: 'i-heroicons-document-text',
+  note: 'i-heroicons-chat-bubble-left-ellipsis',
+  policy: 'i-heroicons-shield-check',
+  onboarding: 'i-heroicons-user-plus',
+}
+
+/* ── Tier ── */
+const tier = computed(() => customerTier(mock.value))
+
+const tierLabel: Record<string, string> = {
+  quick_lead: 'Quick Lead',
+  lead: 'Lead',
+  customer: 'Customer',
+  cancelled: 'Cancelled',
+}
+const tierClass: Record<string, string> = {
+  quick_lead: 'cp-tier-quick-lead',
+  lead: 'cp-tier-lead',
+  customer: 'cp-tier-customer',
+  cancelled: 'cp-tier-cancelled',
+}
+
+/* ── Service grade from attention config ── */
+const customerGradeInput = computed(() => ({
+  totalPremium: mock.value.policies.reduce((s, p) => s + p.premium, 0),
+  policyCount: mock.value.policies.length,
+  lineCount: [...new Set(mock.value.policies.filter(p => p.status === 'Active').map(p => p.line))].length,
+  tenureYears: Math.floor((Date.now() - new Date(mock.value.since).getTime()) / (365.25 * 24 * 60 * 60 * 1000)),
+  isCollectivoMember: false,
+  hasPrivatePolicies: mock.value.policies.some(p => p.status === 'Active'),
+  estimatedCommission: mock.value.policies.reduce((s, p) => s + p.premium, 0) * 0.15,
+}))
+const serviceGrade = computed(() => getTierForCustomer(customerGradeInput.value))
+const serviceScore = computed(() => getScoreForCustomer(customerGradeInput.value))
+
+/* ── Upcoming events ── */
+const upcomingEvents = computed(() => {
+  const events: { label: string; date: string; type: string; icon: string }[] = []
+  const now = new Date()
+  // Upcoming renewals
+  for (const pol of mock.value.policies.filter(p => p.status === 'Active')) {
+    const renewal = new Date(pol.renewal)
+    if (renewal > now) {
+      const days = Math.ceil((renewal.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+      events.push({
+        label: `${pol.line} renewal — ${pol.carrier}`,
+        date: days <= 30 ? `${days}d` : formatDate(pol.renewal),
+        type: days <= 30 ? 'urgent' : 'upcoming',
+        icon: 'i-heroicons-arrow-path',
+      })
+    }
+  }
+  // Open claims
+  for (const cl of openClaims.value) {
+    events.push({
+      label: `Claim ${cl.id} — ${cl.type}`,
+      date: cl.status,
+      type: 'action',
+      icon: 'i-heroicons-exclamation-triangle',
+    })
+  }
+  // Pending payments
+  for (const pay of mock.value.payments.filter(p => p.status === 'Pending' || p.status === 'Overdue')) {
+    events.push({
+      label: `Payment due — ${pay.policy}`,
+      date: pay.status,
+      type: pay.status === 'Overdue' ? 'urgent' : 'action',
+      icon: 'i-heroicons-banknotes',
+    })
+  }
+  return events.slice(0, 5)
+})
+
+/* ── Account Orientation ── */
+const ALL_LINES = ['Auto', 'Home', 'Life', 'Health', 'Umbrella', 'Renter'] as const
+
+const coveredLines = computed(() =>
+  [...new Set(mock.value.policies.filter(p => p.status === 'Active').map(p => p.line))]
+)
+
+const coverageGaps = computed(() =>
+  ALL_LINES.filter(l => !coveredLines.value.includes(l))
+)
+
+const riskProfile = computed(() => {
+  const openClaims = mock.value.claims.filter(c => c.status !== 'Resolved' && c.status !== 'Denied').length
+  if (openClaims >= 2) return 'High'
+  if (openClaims === 1) return 'Medium'
+  return 'Low'
+})
+
+const nextRenewal = computed(() => {
+  const now = new Date()
+  const upcoming = mock.value.policies
+    .filter(p => p.status === 'Active' && new Date(p.renewal) > now)
+    .sort((a, b) => new Date(a.renewal).getTime() - new Date(b.renewal).getTime())
+  return upcoming.length > 0 ? formatDate(upcoming[0]!.renewal) : '—'
+})
+
+/* ── KPI helpers ── */
+const activePolicies = computed(() => mock.value.policies.filter(p => p.status === 'Active'))
+const openClaims = computed(() => mock.value.claims.filter(c => c.status !== 'Resolved' && c.status !== 'Denied'))
+const yearsSince = computed(() => Math.floor((Date.now() - new Date(mock.value.since).getTime()) / (365.25 * 24 * 60 * 60 * 1000)))
+
+/* ── Service Actions ── */
+const lastThreeActivity = computed(() => mock.value.activity.slice(0, 3))
+
+const openActions = computed(() => {
+  const items: { icon: string; text: string; status: string; statusClass: string }[] = []
+  for (const claim of openClaims.value) {
+    items.push({
+      icon: 'i-heroicons-exclamation-triangle',
+      text: `${claim.id} — ${claim.type} ($${claim.amount.toLocaleString()})`,
+      status: claim.status,
+      statusClass: claim.status === 'In progress' ? 'cp-status-warn' : claim.status === 'Under review' ? 'cp-status-pending' : 'cp-status-ok',
+    })
+  }
+  for (const pay of mock.value.payments.filter(p => p.status === 'Pending' || p.status === 'Overdue' || p.status === 'Failed')) {
+    items.push({
+      icon: 'i-heroicons-banknotes',
+      text: `${pay.status} payment — ${pay.policy} ($${pay.amount.toLocaleString()})`,
+      status: pay.status,
+      statusClass: pay.status === 'Failed' ? 'cp-status-bad' : pay.status === 'Overdue' ? 'cp-status-warn' : 'cp-status-pending',
+    })
+  }
+  return items
+})
+
+const recentlyClosed = computed(() => {
+  const items: { icon: string; text: string; date: string }[] = []
+  for (const claim of mock.value.claims.filter(c => c.status === 'Resolved')) {
+    items.push({
+      icon: 'i-heroicons-check-circle',
+      text: `${claim.id} — ${claim.type} resolved ($${claim.amount.toLocaleString()})`,
+      date: formatDate(claim.date),
+    })
+  }
+  for (const pay of mock.value.payments.filter(p => p.status === 'Paid').slice(0, 3)) {
+    items.push({
+      icon: 'i-heroicons-check-circle',
+      text: `Payment — ${pay.policy} ($${pay.amount.toLocaleString()})`,
+      date: formatDate(pay.date),
+    })
+  }
+  return items.slice(0, 3)
+})
+
+/* ── Policies grouped by status ── */
+const activePoliciesGroup = computed(() => mock.value.policies.filter(p => p.status === 'Active'))
+const pendingPoliciesGroup = computed(() => mock.value.policies.filter(p => p.status === 'Pending'))
+const historicalPolicies = computed(() => mock.value.policies.filter(p => p.status === 'Lapsed' || p.status === 'Cancelled'))
+const showHistorical = ref(false)
+
+/* ── Relationships (mock for cust-002) ── */
+const hasRelationship = computed(() => id === 'cust-002')
+
+/* ── Sales agent assignment ── */
+const AGENTS = [
+  { id: 'AG-001', name: 'Ana Ramírez', role: 'Senior producer' },
+  { id: 'AG-002', name: 'Marco Villanueva', role: 'Producer' },
+  { id: 'AG-003', name: 'Lucía Fernández', role: 'Junior producer' },
+  { id: 'AG-004', name: 'Carlos Méndez', role: 'Producer (inactive)' },
+]
+const agentItems = AGENTS.map(a => ({ label: `${a.name} — ${a.role}`, value: a.id }))
+// Seed: map mock.agent display name to agent ID
+const defaultAgentId = computed(() => {
+  if (mock.value.agent === 'Ana R.') return 'AG-001'
+  if (mock.value.agent === 'Marco V.') return 'AG-002'
+  return null
+})
+const assignedAgentId = ref<string | null>(null)
+// Initialize on mount
+onMounted(() => { assignedAgentId.value = defaultAgentId.value })
+const assignedAgentName = computed(() => {
+  const a = AGENTS.find(ag => ag.id === assignedAgentId.value)
+  return a ? a.name : '—'
+})
+
+const toast = useToast()
+function onAgentChange(agentId: string | null) {
+  assignedAgentId.value = agentId
+  const a = AGENTS.find(ag => ag.id === agentId)
+  if (a) toast.add({ title: `Sales agent assigned: ${a.name}`, color: 'success' })
+}
+function onPolicyClick(pol: MockPolicy) {
+  navigateTo(`/policies/${pol.id}`)
+}
+function onClaimClick(claimId: string) {
+  navigateTo(`/claims/${claimId}`)
+}
+
+/* ── Full audit history ── */
+const auditHistory = computed(() => {
+  const entries: { date: string; sortDate: number; action: string; actor: string; detail: string; type: string }[] = []
+  // Activity events
+  for (const ev of mock.value.activity) {
+    entries.push({
+      date: ev.date,
+      sortDate: new Date(ev.date).getTime() || 0,
+      action: ev.text,
+      actor: mock.value.agent,
+      detail: '',
+      type: ev.type,
+    })
+  }
+  // Claims
+  for (const cl of mock.value.claims) {
+    entries.push({
+      date: formatDate(cl.date),
+      sortDate: new Date(cl.date).getTime(),
+      action: `Claim ${cl.id} filed — ${cl.type}`,
+      actor: mock.value.agent,
+      detail: `Policy ${cl.policy} · $${cl.amount.toLocaleString()} · Status: ${cl.status}`,
+      type: 'claim',
+    })
+  }
+  // Payments
+  for (const pay of mock.value.payments) {
+    entries.push({
+      date: formatDate(pay.date),
+      sortDate: new Date(pay.date).getTime(),
+      action: `Payment ${pay.status.toLowerCase()} — $${pay.amount.toLocaleString()}`,
+      actor: 'System',
+      detail: `Policy ${pay.policy} · ${pay.method}`,
+      type: 'payment',
+    })
+  }
+  // Policies
+  for (const pol of mock.value.policies) {
+    entries.push({
+      date: formatDate(pol.renewal),
+      sortDate: new Date(pol.renewal).getTime(),
+      action: `Policy ${pol.id} — ${pol.status === 'Active' ? 'Active' : pol.status}`,
+      actor: mock.value.agent,
+      detail: `${pol.carrier} · ${pol.product} · $${pol.premium.toLocaleString()}/yr`,
+      type: 'policy',
+    })
+  }
+  // System events
+  entries.push({
+    date: formatDate(mock.value.since),
+    sortDate: new Date(mock.value.since).getTime(),
+    action: 'Customer account created',
+    actor: 'System',
+    detail: `Type: ${mock.value.type} · Document: ${mock.value.documentId}`,
+    type: 'onboarding',
+  })
+  entries.push({
+    date: 'Today',
+    sortDate: Date.now(),
+    action: `Sales agent assigned: ${assignedAgentName.value}`,
+    actor: 'System',
+    detail: 'Agent of record for this customer',
+    type: 'note',
+  })
+  return entries.sort((a, b) => b.sortDate - a.sortDate)
+})
+
+const historyFilter = ref<'all' | 'claim' | 'payment' | 'policy' | 'note' | 'onboarding'>('all')
+const filteredHistory = computed(() => {
+  if (historyFilter.value === 'all') return auditHistory.value
+  return auditHistory.value.filter(e => e.type === historyFilter.value)
+})
+
+/* ── Notes mock data ── */
+const mockNotes = [
+  { id: 1, text: 'Client prefers phone calls over email for policy updates. Best time to reach: mornings before 11 AM.', author: mock.value.agent, date: 'Mar 15, 2025', pinned: true },
+  { id: 2, text: 'Discussed increasing umbrella coverage at next renewal. Client is interested in reviewing options.', author: mock.value.agent, date: 'Feb 20, 2025', pinned: true },
+  { id: 3, text: 'Annual review completed. All policies in good standing. Consider cross-sell opportunity for health insurance.', author: 'System', date: 'Jan 10, 2025', pinned: false },
+]
+const newNote = ref('')
+
+/* ── Documents mock ── */
+const documentCategories = [
+  { name: 'Policy Documents', count: 3, icon: 'i-heroicons-document-text' },
+  { name: 'ID & KYC', count: 2, icon: 'i-heroicons-identification' },
+  { name: 'Claims', count: mock.value.claims.length > 0 ? 1 : 0, icon: 'i-heroicons-clipboard-document-check' },
+  { name: 'Correspondence', count: 0, icon: 'i-heroicons-envelope' },
+]
 </script>
 
 <template>
-  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
-    <NuxtLink to="/customers">
-      <UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">Back to Customers</UButton>
+  <div class="cp-page mx-auto max-w-6xl pb-12">
+    <!-- ═══ BACK ═══ -->
+    <NuxtLink to="/customers" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Customers</UButton>
     </NuxtLink>
 
-    <UAlert v-if="error" color="red" variant="soft" title="Failed to load customer" :description="error.message" />
-
-    <div v-else-if="pending" class="space-y-4">
-      <UCard v-for="n in 2" :key="n">
-        <div class="h-32 animate-pulse bg-gray-200 rounded" />
-      </UCard>
+    <!-- ═══ HEADER ═══ -->
+    <div class="cp-header">
+      <div class="cp-header-left">
+        <div class="cp-avatar">{{ mock.initials }}</div>
+        <div class="cp-header-info">
+          <div class="cp-header-name-row">
+            <h1 class="cp-name">{{ customerName }}</h1>
+            <span class="cp-type-badge">{{ mock.type }}</span>
+            <span class="cp-tier-badge" :class="tierClass[tier]">{{ tierLabel[tier] }}</span>
+            <span v-for="tag in mock.tags" :key="tag" class="cp-tag">{{ tag }}</span>
+          </div>
+          <div class="cp-header-meta">
+            <span>{{ mock.documentId }}</span>
+            <span class="cp-sep" />
+            <span>{{ mock.email || '—' }}</span>
+            <span class="cp-sep" />
+            <span>{{ mock.phone }}</span>
+            <span class="cp-sep" />
+            <span>Agent: {{ mock.agent }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="cp-header-actions">
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          :icon="isFavorite(mock.id) ? 'i-heroicons-star-solid' : 'i-heroicons-star'"
+          :style="isFavorite(mock.id) ? 'color: #d4a017;' : ''"
+          @click="toggleFavorite(mock.id)"
+        />
+        <UButton size="sm" color="neutral" variant="outline" icon="i-heroicons-pencil-square">Edit</UButton>
+        <UButton size="sm" color="primary" icon="i-heroicons-document-text">New Quote</UButton>
+      </div>
     </div>
 
-    <template v-else-if="customer">
-      <!-- Header -->
-      <div class="flex justify-between items-start">
-        <div class="flex items-center gap-4">
-          <UAvatar :alt="customerName" size="xl" />
+    <!-- ═══ ACCOUNT ORIENTATION ═══ -->
+    <div class="cp-orient-card">
+      <!-- Left: Grade + Status summary -->
+      <div class="cp-orient-summary">
+        <div class="cp-grade-badge" :style="`background: ${serviceGrade.color}12; border-color: ${serviceGrade.color}30;`">
+          <UIcon :name="serviceGrade.icon" :style="`color: ${serviceGrade.color}; width: 20px; height: 20px;`" />
           <div>
-            <div class="flex items-center gap-2 mb-1">
-              <h1 class="text-2xl font-bold text-slate-900">{{ customerName }}</h1>
-              <UBadge :color="isIndividual ? 'blue' : 'purple'" variant="soft" size="sm">
-                {{ isIndividual ? 'Individual' : 'Corporate' }}
-              </UBadge>
-            </div>
-            <p class="text-gray-500">{{ customer.email }}</p>
+            <p class="cp-grade-name" :style="`color: ${serviceGrade.color}`">{{ serviceGrade.name }}</p>
+            <p class="cp-grade-score">{{ serviceScore }} pts</p>
           </div>
         </div>
-        <div class="flex gap-2">
-          <UButton icon="i-heroicons-arrow-path" color="gray" variant="soft" :loading="pending" @click="refresh()" />
-          <NuxtLink to="/policies/new">
-            <UButton icon="i-heroicons-plus" color="primary" size="sm">New Policy</UButton>
-          </NuxtLink>
+        <div class="cp-orient-facts">
+          <div class="cp-orient-fact">
+            <span class="cp-orient-fact-label">Status</span>
+            <span class="cp-orient-fact-value">
+              <span class="cp-orient-dot" :class="activePolicies.length > 0 ? 'cp-dot-green' : 'cp-dot-gray'" />
+              {{ activePolicies.length > 0 ? 'Active' : 'Inactive' }}
+            </span>
+          </div>
+          <div class="cp-orient-fact">
+            <span class="cp-orient-fact-label">Preferred Contact</span>
+            <span class="cp-orient-fact-value">Phone</span>
+          </div>
+          <div class="cp-orient-fact">
+            <span class="cp-orient-fact-label">Language</span>
+            <span class="cp-orient-fact-value">{{ mock.preferredLang }}</span>
+          </div>
+          <div class="cp-orient-fact">
+            <span class="cp-orient-fact-label">Coverage</span>
+            <span class="cp-orient-fact-value">
+              {{ coveredLines.length }} of {{ ALL_LINES.length }} lines
+              <template v-if="coverageGaps.length > 0 && coverageGaps.length < ALL_LINES.length">
+                <span v-for="gap in coverageGaps" :key="gap" class="cp-gap-chip">{{ gap }}</span>
+              </template>
+            </span>
+          </div>
         </div>
       </div>
 
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <!-- Right: Upcoming events -->
+      <div class="cp-orient-events">
+        <p class="cp-orient-events-title">
+          <UIcon name="i-heroicons-calendar-days" style="width: 14px; height: 14px; opacity: 0.5;" />
+          Upcoming
+        </p>
+        <div v-if="upcomingEvents.length > 0" class="cp-events-list">
+          <div
+            v-for="(ev, i) in upcomingEvents"
+            :key="i"
+            class="cp-event-item"
+            :class="[`cp-event-${ev.type}`, ev.icon === 'i-heroicons-arrow-path' ? 'cp-event-clickable' : '']"
+            @click="ev.icon === 'i-heroicons-arrow-path' ? navigateTo('/renewals') : ev.icon === 'i-heroicons-exclamation-triangle' ? navigateTo('/claims') : null"
+          >
+            <UIcon :name="ev.icon" style="width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px;" />
+            <span class="cp-event-label">{{ ev.label }}</span>
+            <span class="cp-event-date">{{ ev.date }}</span>
+          </div>
+        </div>
+        <p v-else class="cp-orient-quiet">Nothing upcoming — all clear</p>
+      </div>
+    </div>
 
-        <!-- Individual details -->
-        <UCard v-if="isIndividual" class="lg:col-span-1">
-          <template #header>
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
-              <UIcon name="i-heroicons-user" class="w-4 h-4" /> Customer Details
-            </p>
-          </template>
-          <div class="space-y-3 text-sm">
-            <div class="flex justify-between">
-              <span class="text-gray-500">ID</span>
-              <span class="font-mono text-xs">{{ customer.id?.slice(0, 8) }}...</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Email</span>
-              <span>{{ customer.email ?? '—' }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Phone</span>
-              <span>{{ customer.phone ?? '—' }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Document ID</span>
-              <span class="font-mono">{{ customer.document_id ?? '—' }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Birth Date</span>
-              <span>{{ formatDate(customer.birth_date) }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Gender</span>
-              <span class="capitalize">{{ customer.gender ?? '—' }}</span>
+    <!-- ═══ KPI STRIP ═══ -->
+    <div class="cp-kpi-strip">
+      <div class="cp-kpi">
+        <p class="cp-kpi-label">Total Premium</p>
+        <p class="cp-kpi-value">{{ totalPremium }}</p>
+        <p class="cp-kpi-sub">/year across {{ mock.policies.length }} {{ mock.policies.length === 1 ? 'policy' : 'policies' }}</p>
+      </div>
+      <div class="cp-kpi-div" />
+      <div class="cp-kpi">
+        <p class="cp-kpi-label">Active Policies</p>
+        <p class="cp-kpi-value">{{ activePolicies.length }}</p>
+        <p class="cp-kpi-sub">{{ coveredLines.join(', ') || 'None' }}</p>
+      </div>
+      <div class="cp-kpi-div" />
+      <div class="cp-kpi">
+        <p class="cp-kpi-label">Open Claims</p>
+        <p class="cp-kpi-value">{{ openClaims.length }}</p>
+        <p class="cp-kpi-sub">{{ openClaims.length > 0 ? openClaims.map(c => c.id).join(', ') : 'No open claims' }}</p>
+      </div>
+      <div class="cp-kpi-div" />
+      <div class="cp-kpi">
+        <p class="cp-kpi-label">Client Since</p>
+        <p class="cp-kpi-value">{{ mock.since.slice(0, 4) }}</p>
+        <p class="cp-kpi-sub">{{ yearsSince }}+ years{{ mock.tags.length ? ' \u00b7 ' + mock.tags[0] : '' }}</p>
+      </div>
+      <div class="cp-kpi-div" />
+      <div class="cp-kpi">
+        <p class="cp-kpi-label">Payment Status</p>
+        <p class="cp-kpi-value" :class="mock.paymentStatus === 'Current' ? 'cp-kpi-good' : mock.paymentStatus === 'Overdue' ? 'cp-kpi-bad' : mock.paymentStatus === 'N/A' ? '' : 'cp-kpi-warn'">{{ mock.paymentStatus }}</p>
+        <p class="cp-kpi-sub">{{ mock.paymentStatus === 'Current' ? 'All premiums up to date' : mock.paymentStatus === 'Overdue' ? 'Payment action required' : mock.paymentStatus === 'N/A' ? 'No active billing' : 'Payment pending' }}</p>
+      </div>
+      <div class="cp-kpi-div" />
+      <div class="cp-kpi">
+        <p class="cp-kpi-label">Coverage Lines</p>
+        <p class="cp-kpi-value">{{ coveredLines.length }} of {{ ALL_LINES.length }}</p>
+        <p class="cp-kpi-sub">{{ coveredLines.length === ALL_LINES.length ? 'Full coverage' : coverageGaps.length + ' gap' + (coverageGaps.length === 1 ? '' : 's') }}</p>
+      </div>
+    </div>
+
+    <!-- ═══ QUICK POLICY ACCESS ═══ -->
+    <div v-if="mock.policies.length > 0" class="cp-quick-policies">
+      <div class="cp-quick-pol-head">
+        <div class="cp-quick-pol-title">
+          <UIcon name="i-heroicons-document-arrow-down" style="width: 16px; height: 16px; color: #01696f;" />
+          <span>Policies</span>
+          <span class="cp-quick-pol-count">{{ mock.policies.filter(p => p.status === 'Active').length }} active</span>
+        </div>
+        <div class="cp-quick-pol-actions">
+          <UButton size="xs" color="neutral" variant="soft" icon="i-heroicons-printer">Print All</UButton>
+          <UButton size="xs" color="neutral" variant="soft" icon="i-heroicons-paper-airplane">Send to Client</UButton>
+          <UButton size="xs" color="primary" variant="soft" icon="i-heroicons-arrow-down-tray">Download All</UButton>
+        </div>
+      </div>
+      <div class="cp-quick-pol-grid">
+        <NuxtLink v-for="pol in mock.policies.filter(p => p.status === 'Active')" :key="pol.id" :to="`/policies/${pol.id}`" class="cp-quick-pol-chip" style="text-decoration: none; color: inherit;">
+          <div class="cp-quick-pol-icon" :style="`background: ${pol.line === 'Auto' ? 'rgba(1,105,111,0.08)' : pol.line === 'Home' ? 'rgba(194,123,26,0.08)' : pol.line === 'Life' ? 'rgba(124,58,237,0.08)' : pol.line === 'Health' ? 'rgba(15,123,95,0.08)' : 'rgba(0,0,0,0.04)'}`">
+            <UIcon :name="pol.icon" style="width: 16px; height: 16px;" />
+          </div>
+          <div class="cp-quick-pol-info">
+            <p class="cp-quick-pol-name">{{ pol.line }} — {{ pol.carrier }}</p>
+            <p class="cp-quick-pol-id">{{ pol.id }}</p>
+          </div>
+          <div class="cp-quick-pol-right">
+            <span class="cp-quick-pol-premium">${{ pol.premium.toLocaleString() }}/yr</span>
+            <button type="button" class="cp-quick-pol-dl" title="Download policy" @click.prevent>
+              <UIcon name="i-heroicons-bolt" style="width: 14px; height: 14px;" />
+            </button>
+          </div>
+        </NuxtLink>
+      </div>
+    </div>
+
+    <!-- ═══ SERVICE ACTIONS ═══ -->
+    <div class="cp-card">
+      <div class="cp-card-head">
+        <UIcon name="i-heroicons-clipboard-document-list" style="width: 16px; height: 16px; color: #01696f;" />
+        <span>Service Actions</span>
+      </div>
+      <div class="cp-service-grid">
+        <!-- Last 3 Service Actions -->
+        <div class="cp-service-section">
+          <p class="cp-service-title">Recent Activity</p>
+          <div v-if="lastThreeActivity.length > 0" class="cp-timeline">
+            <div v-for="(event, i) in lastThreeActivity" :key="i" class="cp-timeline-item">
+              <div class="cp-timeline-dot" :style="`background: ${activityDotColor[event.type] || '#8a8a86'}`" />
+              <div class="cp-timeline-content">
+                <p class="cp-timeline-text">{{ event.text }}</p>
+                <p class="cp-timeline-date">{{ event.date }}</p>
+              </div>
             </div>
           </div>
-        </UCard>
+          <p v-else class="cp-empty-msg">No recent activity</p>
+        </div>
 
-        <!-- Corporate details -->
-        <UCard v-else class="lg:col-span-1">
-          <template #header>
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
-              <UIcon name="i-heroicons-building-office" class="w-4 h-4" /> Company Details
-            </p>
-          </template>
-          <div class="space-y-3 text-sm">
-            <div class="flex justify-between">
-              <span class="text-gray-500">ID</span>
-              <span class="font-mono text-xs">{{ customer.id?.slice(0, 8) }}...</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Legal Name</span>
-              <span class="text-right max-w-44 truncate">{{ customer.legal_name ?? '—' }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Commercial Name</span>
-              <span>{{ customer.commercial_name ?? '—' }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">RUC</span>
-              <span class="font-mono">{{ customer.ruc ?? '—' }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Legal Rep</span>
-              <span>{{ customer.legal_rep_name ?? '—' }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Rep Document</span>
-              <span class="font-mono">{{ customer.legal_rep_document_id ?? '—' }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Email</span>
-              <span>{{ customer.email ?? '—' }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Phone</span>
-              <span>{{ customer.phone ?? '—' }}</span>
-            </div>
-            <div class="flex justify-between">
-              <span class="text-gray-500">Address</span>
-              <span class="text-right max-w-44 truncate">{{ customer.address ?? '—' }}</span>
+        <!-- Open Service Actions -->
+        <div class="cp-service-section">
+          <p class="cp-service-title">Open Actions</p>
+          <div v-if="openActions.length > 0" class="cp-action-list">
+            <div v-for="(action, i) in openActions" :key="i" class="cp-action-item">
+              <UIcon :name="action.icon" class="cp-action-icon" />
+              <span class="cp-action-text">{{ action.text }}</span>
+              <span class="cp-status" :class="action.statusClass">{{ action.status }}</span>
             </div>
           </div>
-        </UCard>
+          <p v-else class="cp-empty-msg">No open actions</p>
+        </div>
 
-        <!-- Policies -->
-        <UCard class="lg:col-span-2">
-          <template #header>
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
-              <UIcon name="i-heroicons-document-text" class="w-4 h-4" />
-              Policies
-              <UBadge color="gray" variant="soft" size="xs">{{ customerPolicies.length }}</UBadge>
-            </p>
-          </template>
+        <!-- Recently Closed -->
+        <div class="cp-service-section">
+          <p class="cp-service-title">Recently Closed</p>
+          <div v-if="recentlyClosed.length > 0" class="cp-action-list">
+            <div v-for="(item, i) in recentlyClosed" :key="i" class="cp-action-item">
+              <UIcon :name="item.icon" class="cp-action-icon cp-icon-green" />
+              <span class="cp-action-text">{{ item.text }}</span>
+              <span class="cp-action-date">{{ item.date }}</span>
+            </div>
+          </div>
+          <p v-else class="cp-empty-msg">No recently closed items</p>
+        </div>
+      </div>
+    </div>
 
-          <div class="space-y-3">
-            <NuxtLink
-              v-for="policy in customerPolicies"
-              :key="policy.application_id"
-              :to="`/policies/${policy.application_id}`"
-            >
-              <div class="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
-                <div class="flex items-center gap-3">
-                  <UIcon name="i-heroicons-truck" class="w-5 h-5 text-blue-400" />
-                  <div>
-                    <p class="font-medium text-sm text-slate-800">
-                      {{ policy.plate }} — {{ policy.year }} {{ policy.make }} {{ policy.model }}
-                    </p>
-                    <p class="text-xs text-gray-400 font-mono">{{ policy.application_id?.slice(0, 8) }}...</p>
-                  </div>
+    <!-- ═══ MAIN GRID ═══ -->
+    <div class="cp-main-grid">
+      <!-- LEFT: Personal Details -->
+      <div class="cp-card cp-details-col">
+        <div class="cp-card-head">
+          <UIcon name="i-heroicons-user" style="width: 16px; height: 16px; color: #01696f;" />
+          <span>Personal Details</span>
+        </div>
+        <div class="cp-detail-list">
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Full Name</span>
+            <span class="cp-detail-value">{{ mock.name }}</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Document ID</span>
+            <span class="cp-detail-value cp-mono">{{ mock.documentId }}</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Email</span>
+            <span class="cp-detail-value">{{ mock.email || '—' }}</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Phone</span>
+            <span class="cp-detail-value">{{ mock.phone }}</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Date of Birth</span>
+            <span class="cp-detail-value">{{ mock.birthDate ? formatDate(mock.birthDate) : '—' }}</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Gender</span>
+            <span class="cp-detail-value">{{ mock.gender || '—' }}</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Marital Status</span>
+            <span class="cp-detail-value">—</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Address</span>
+            <span class="cp-detail-value">{{ mock.address || '—' }}</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Occupation</span>
+            <span class="cp-detail-value">—</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Language</span>
+            <span class="cp-detail-value">{{ mock.preferredLang }}</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Assigned Agent</span>
+            <span class="cp-detail-value">{{ mock.agent }}</span>
+          </div>
+          <div class="cp-detail-row cp-detail-row-agent">
+            <span class="cp-detail-label">Sales Agent</span>
+            <div class="cp-agent-assign">
+              <USelect
+                :model-value="assignedAgentId"
+                :items="agentItems"
+                value-key="value"
+                label-key="label"
+                placeholder="Assign agent…"
+                class="cp-agent-select"
+                @update:model-value="onAgentChange"
+              />
+              <NuxtLink v-if="assignedAgentId" to="/settings/agents" class="cp-agent-link">
+                <UIcon name="i-heroicons-arrow-top-right-on-square" style="width: 12px; height: 12px;" />
+              </NuxtLink>
+            </div>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Client Since</span>
+            <span class="cp-detail-value">{{ formatDate(mock.since) }}</span>
+          </div>
+          <div class="cp-detail-row">
+            <span class="cp-detail-label">Referral Source</span>
+            <span class="cp-detail-value">
+              <span v-if="mock.tags.find(t => t.includes('eferral'))" class="cp-orient-tag">
+                {{ mock.tags.find(t => t.includes('eferral')) }}
+              </span>
+              <span v-else>Direct</span>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- RIGHT: Tabbed content -->
+      <div class="cp-tabbed-col">
+        <!-- Tabs -->
+        <div class="cp-tabs">
+          <button
+            v-for="tab in [
+              { id: 'policies' as const, label: 'Policies', count: mock.policies.length },
+              { id: 'claims' as const, label: 'Claims', count: mock.claims.length },
+              { id: 'payments' as const, label: 'Payments', count: mock.payments.length },
+              { id: 'activity' as const, label: 'Activity', count: null },
+              { id: 'history' as const, label: 'History', count: null },
+              { id: 'relationships' as const, label: 'Relationships', count: null },
+              { id: 'notes' as const, label: 'Notes', count: null },
+            ]"
+            :key="tab.id"
+            type="button"
+            class="cp-tab"
+            :class="activeTab === tab.id ? 'cp-tab-on' : 'cp-tab-off'"
+            @click="activeTab = tab.id"
+          >
+            {{ tab.label }}
+            <span v-if="tab.count !== null" class="cp-tab-count" :class="activeTab === tab.id ? 'cp-tab-count-on' : ''">{{ tab.count }}</span>
+          </button>
+        </div>
+
+        <!-- ── POLICIES TAB ── -->
+        <div v-if="activeTab === 'policies'" class="cp-tab-content">
+          <!-- Coverage summary bar -->
+          <div v-if="mock.policies.length > 0" class="cp-coverage-bar">
+            <span class="cp-coverage-label">Coverage:</span>
+            <span v-for="line in ALL_LINES" :key="line" class="cp-coverage-dot-wrap">
+              <span class="cp-coverage-dot" :class="coveredLines.includes(line) ? 'cp-coverage-active' : 'cp-coverage-inactive'" />
+              <span class="cp-coverage-line-label" :class="coveredLines.includes(line) ? '' : 'cp-coverage-line-missing'">{{ line }}</span>
+            </span>
+          </div>
+
+          <!-- Coverage gap CTA -->
+          <div v-if="coverageGaps.length > 0" class="cp-gap-cta">
+            <div class="flex items-center gap-2">
+              <UIcon name="i-heroicons-shield-exclamation" style="width: 14px; height: 14px; color: #d97706;" />
+              <span class="text-[12px] font-medium text-[var(--text-primary)]">{{ coverageGaps.length }} missing coverage {{ coverageGaps.length === 1 ? 'line' : 'lines' }}:</span>
+            </div>
+            <div class="flex flex-wrap items-center gap-2 mt-1.5 pl-5">
+              <NuxtLink
+                v-for="gap in coverageGaps"
+                :key="gap"
+                :to="`/quotes/new?line=${encodeURIComponent(gap)}&customer=${id}`"
+                class="cp-gap-quote-btn"
+              >
+                {{ gap }}
+                <UIcon name="i-heroicons-arrow-right" style="width: 11px; height: 11px;" />
+              </NuxtLink>
+            </div>
+          </div>
+
+          <!-- Active policies -->
+          <div v-if="activePoliciesGroup.length > 0" class="cp-policy-group">
+            <div v-for="pol in activePoliciesGroup" :key="pol.id" class="cp-card cp-card-hover" @click="onPolicyClick(pol)">
+              <div class="cp-policy-row">
+                <div class="cp-pol-icon">
+                  <UIcon :name="pol.icon" style="width: 18px; height: 18px;" />
                 </div>
-                <div class="flex items-center gap-2">
-                  <UBadge :color="statusColor(policy.status)" variant="soft" size="xs">
-                    {{ policy.status?.replace(/_/g, ' ') }}
-                  </UBadge>
-                  <UIcon name="i-heroicons-chevron-right" class="w-4 h-4 text-gray-400" />
+                <div class="cp-pol-info">
+                  <div class="cp-pol-name-row">
+                    <p class="cp-pol-product">{{ pol.product }}</p>
+                    <span class="cp-line-badge">{{ pol.line }}</span>
+                    <span class="cp-status-active">{{ pol.status }}</span>
+                  </div>
+                  <div class="cp-pol-meta">
+                    <span>{{ pol.id }}</span>
+                    <span class="cp-sep" />
+                    <span>{{ pol.carrier }}</span>
+                    <span class="cp-sep" />
+                    <span>Renewal {{ formatDate(pol.renewal) }}</span>
+                  </div>
+                  <p v-if="pol.details" class="cp-pol-details">{{ pol.details }}</p>
+                </div>
+                <div class="cp-pol-premium">
+                  <p class="cp-pol-amount">${{ pol.premium.toLocaleString() }}</p>
+                  <p class="cp-pol-period">/year</p>
                 </div>
               </div>
-            </NuxtLink>
-
-            <div v-if="customerPolicies.length === 0" class="text-center py-8 text-gray-400">
-              <UIcon name="i-heroicons-document-text" class="w-8 h-8 mx-auto mb-2" />
-              <p class="text-sm">No policies yet</p>
             </div>
           </div>
-        </UCard>
+
+          <!-- Pending policies -->
+          <div v-if="pendingPoliciesGroup.length > 0" class="cp-policy-group">
+            <p class="cp-group-label">Pending</p>
+            <div v-for="pol in pendingPoliciesGroup" :key="pol.id" class="cp-card cp-card-hover" @click="onPolicyClick(pol)">
+              <div class="cp-policy-row">
+                <div class="cp-pol-icon">
+                  <UIcon :name="pol.icon" style="width: 18px; height: 18px;" />
+                </div>
+                <div class="cp-pol-info">
+                  <div class="cp-pol-name-row">
+                    <p class="cp-pol-product">{{ pol.product }}</p>
+                    <span class="cp-line-badge">{{ pol.line }}</span>
+                    <span class="cp-status-pending-badge">{{ pol.status }}</span>
+                  </div>
+                  <div class="cp-pol-meta">
+                    <span>{{ pol.id }}</span>
+                    <span class="cp-sep" />
+                    <span>{{ pol.carrier }}</span>
+                  </div>
+                  <p v-if="pol.details" class="cp-pol-details">{{ pol.details }}</p>
+                </div>
+                <div class="cp-pol-premium">
+                  <p class="cp-pol-amount">${{ pol.premium.toLocaleString() }}</p>
+                  <p class="cp-pol-period">/year</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Historical (collapsed) -->
+          <div v-if="historicalPolicies.length > 0" class="cp-policy-group">
+            <button type="button" class="cp-historical-toggle" @click="showHistorical = !showHistorical">
+              <UIcon :name="showHistorical ? 'i-heroicons-chevron-down' : 'i-heroicons-chevron-right'" style="width: 14px; height: 14px;" />
+              <span>Historical ({{ historicalPolicies.length }})</span>
+            </button>
+            <template v-if="showHistorical">
+              <div v-for="pol in historicalPolicies" :key="pol.id" class="cp-card cp-card-historical" style="cursor: pointer;" @click="onPolicyClick(pol)">
+                <div class="cp-policy-row">
+                  <div class="cp-pol-icon cp-pol-icon-muted">
+                    <UIcon :name="pol.icon" style="width: 18px; height: 18px;" />
+                  </div>
+                  <div class="cp-pol-info">
+                    <div class="cp-pol-name-row">
+                      <p class="cp-pol-product">{{ pol.product }}</p>
+                      <span class="cp-line-badge">{{ pol.line }}</span>
+                      <span class="cp-status-cancelled">{{ pol.status }}</span>
+                    </div>
+                    <div class="cp-pol-meta">
+                      <span>{{ pol.id }}</span>
+                      <span class="cp-sep" />
+                      <span>{{ pol.carrier }}</span>
+                    </div>
+                    <p v-if="pol.details" class="cp-pol-details">{{ pol.details }}</p>
+                  </div>
+                  <div class="cp-pol-premium">
+                    <p class="cp-pol-amount cp-text-muted">${{ pol.premium.toLocaleString() }}</p>
+                    <p class="cp-pol-period">/year</p>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+
+          <p v-if="mock.policies.length === 0" class="cp-empty-msg">No policies on file</p>
+        </div>
+
+        <!-- ── CLAIMS TAB ── -->
+        <div v-if="activeTab === 'claims'" class="cp-tab-content">
+          <div v-if="mock.claims.length > 0" class="cp-card">
+            <div v-for="(claim, i) in mock.claims" :key="claim.id" class="cp-row" :class="i < mock.claims.length - 1 ? 'cp-row-border' : ''" style="cursor: pointer;" @click="onClaimClick(claim.id)">
+              <div class="cp-row-main">
+                <div class="cp-row-top">
+                  <p class="cp-row-title">{{ claim.id }} — {{ claim.type }}</p>
+                  <span class="cp-status" :class="claim.status === 'In progress' ? 'cp-status-warn' : claim.status === 'Under review' ? 'cp-status-pending' : claim.status === 'Denied' ? 'cp-status-bad' : 'cp-status-ok'">{{ claim.status }}</span>
+                </div>
+                <p class="cp-row-sub">Policy {{ claim.policy }} &middot; Filed {{ formatDate(claim.date) }}</p>
+              </div>
+              <p class="cp-row-amount">${{ claim.amount.toLocaleString() }}</p>
+            </div>
+          </div>
+          <p v-else class="cp-empty-msg">No claims on file</p>
+        </div>
+
+        <!-- ── PAYMENTS TAB ── -->
+        <div v-if="activeTab === 'payments'" class="cp-tab-content">
+          <div v-if="mock.payments.length > 0" class="cp-card">
+            <table class="cp-table">
+              <thead>
+                <tr>
+                  <th>Date</th>
+                  <th>Policy</th>
+                  <th>Method</th>
+                  <th>Status</th>
+                  <th class="cp-text-right">Amount</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="pay in mock.payments" :key="pay.date + pay.policy">
+                  <td class="cp-tabular">{{ formatDate(pay.date) }}</td>
+                  <td class="cp-mono cp-text-xs">{{ pay.policy }}</td>
+                  <td>{{ pay.method }}</td>
+                  <td>
+                    <span class="cp-status" :class="pay.status === 'Paid' ? 'cp-status-ok' : pay.status === 'Failed' ? 'cp-status-bad' : pay.status === 'Overdue' ? 'cp-status-warn' : 'cp-status-pending'">
+                      {{ pay.status }}
+                    </span>
+                  </td>
+                  <td class="cp-text-right cp-tabular cp-text-medium">${{ pay.amount.toLocaleString() }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p v-else class="cp-empty-msg">No payment history</p>
+        </div>
+
+        <!-- ── ACTIVITY TAB ── -->
+        <div v-if="activeTab === 'activity'" class="cp-tab-content">
+          <div v-if="mock.activity.length > 0" class="cp-card">
+            <div v-for="(event, i) in mock.activity" :key="i" class="cp-row" :class="i < mock.activity.length - 1 ? 'cp-row-border' : ''">
+              <div class="cp-activity-dot" :style="`background: ${activityDotColor[event.type] || '#8a8a86'}`" />
+              <UIcon :name="activityIcon[event.type] || 'i-heroicons-ellipsis-horizontal'" class="cp-activity-icon" :style="`color: ${activityDotColor[event.type] || '#8a8a86'}`" />
+              <div class="cp-row-main">
+                <p class="cp-row-text">{{ event.text }}</p>
+              </div>
+              <span class="cp-row-date">{{ event.date }}</span>
+            </div>
+          </div>
+          <p v-else class="cp-empty-msg">No activity recorded</p>
+        </div>
+
+        <!-- ── HISTORY TAB ── -->
+        <div v-if="activeTab === 'history'" class="cp-tab-content">
+          <!-- Filter bar -->
+          <div class="cp-history-filters">
+            <button
+              v-for="f in [
+                { id: 'all' as const, label: 'All' },
+                { id: 'claim' as const, label: 'Claims' },
+                { id: 'payment' as const, label: 'Payments' },
+                { id: 'policy' as const, label: 'Policies' },
+                { id: 'note' as const, label: 'Notes' },
+                { id: 'onboarding' as const, label: 'System' },
+              ]"
+              :key="f.id"
+              type="button"
+              class="cp-history-filter"
+              :class="historyFilter === f.id ? 'cp-history-filter-on' : 'cp-history-filter-off'"
+              @click="historyFilter = f.id"
+            >
+              {{ f.label }}
+            </button>
+          </div>
+
+          <div class="cp-card">
+            <div class="cp-card-head">
+              <UIcon name="i-heroicons-clock" style="width: 16px; height: 16px; color: #01696f;" />
+              <span>Audit Log</span>
+              <span class="cp-history-count">{{ filteredHistory.length }} entries</span>
+            </div>
+            <div v-if="filteredHistory.length > 0">
+              <div
+                v-for="(entry, i) in filteredHistory"
+                :key="i"
+                class="cp-history-row"
+                :class="i < filteredHistory.length - 1 ? 'cp-row-border' : ''"
+              >
+                <div class="cp-history-dot-col">
+                  <div class="cp-history-dot" :style="`background: ${activityDotColor[entry.type] || '#8a8a86'}`" />
+                  <div v-if="i < filteredHistory.length - 1" class="cp-history-line" />
+                </div>
+                <div class="cp-history-content">
+                  <div class="cp-history-top">
+                    <span class="cp-history-action">{{ entry.action }}</span>
+                    <span class="cp-history-type-badge" :style="`background: ${activityDotColor[entry.type] || '#8a8a86'}18; color: ${activityDotColor[entry.type] || '#8a8a86'}`">
+                      {{ entry.type }}
+                    </span>
+                  </div>
+                  <p v-if="entry.detail" class="cp-history-detail">{{ entry.detail }}</p>
+                  <div class="cp-history-meta">
+                    <UIcon name="i-heroicons-user-circle" style="width: 12px; height: 12px; opacity: 0.5;" />
+                    <span>{{ entry.actor }}</span>
+                    <span class="cp-sep" />
+                    <span>{{ entry.date }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p v-else class="cp-empty-msg" style="padding: 20px;">No entries match this filter</p>
+          </div>
+        </div>
+
+        <!-- ── RELATIONSHIPS TAB ── -->
+        <div v-if="activeTab === 'relationships'" class="cp-tab-content">
+          <!-- Household Members -->
+          <div class="cp-card">
+            <div class="cp-card-head cp-card-head-compact">
+              <span>Household Members</span>
+              <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-plus">Add</UButton>
+            </div>
+            <div class="cp-rel-empty">
+              <UIcon name="i-heroicons-users" class="cp-rel-empty-icon" />
+              <p>No linked household members</p>
+            </div>
+          </div>
+
+          <!-- Business Affiliations -->
+          <div class="cp-card">
+            <div class="cp-card-head cp-card-head-compact">
+              <span>Business Affiliations</span>
+              <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-plus">Add</UButton>
+            </div>
+            <template v-if="hasRelationship">
+              <div class="cp-row">
+                <UIcon name="i-heroicons-building-office-2" class="cp-rel-icon" />
+                <div class="cp-row-main">
+                  <p class="cp-row-title">Corporaci&oacute;n Tecnol&oacute;gica del Valle</p>
+                  <p class="cp-row-sub">Employee &middot; Linked to cust-009</p>
+                </div>
+                <NuxtLink to="/customers/cust-009">
+                  <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-arrow-top-right-on-square">View</UButton>
+                </NuxtLink>
+              </div>
+            </template>
+            <template v-else>
+              <div class="cp-rel-empty">
+                <UIcon name="i-heroicons-building-office-2" class="cp-rel-empty-icon" />
+                <p>No business affiliations</p>
+              </div>
+            </template>
+          </div>
+
+          <!-- Professional Contacts -->
+          <div class="cp-card">
+            <div class="cp-card-head cp-card-head-compact">
+              <span>Professional Contacts</span>
+              <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-plus">Add</UButton>
+            </div>
+            <div class="cp-rel-empty">
+              <UIcon name="i-heroicons-briefcase" class="cp-rel-empty-icon" />
+              <p>No professional contacts</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- ── NOTES TAB ── -->
+        <div v-if="activeTab === 'notes'" class="cp-tab-content">
+          <!-- New note -->
+          <div class="cp-card">
+            <div class="cp-card-head">
+              <UIcon name="i-heroicons-pencil-square" style="width: 14px; height: 14px; color: #01696f;" />
+              <span>New Note</span>
+            </div>
+            <div class="cp-note-input">
+              <textarea v-model="newNote" class="cp-textarea" placeholder="Add a note about this customer..." rows="3" />
+              <div class="cp-note-actions">
+                <UButton size="xs" color="primary" :disabled="!newNote.trim()">Save Note</UButton>
+              </div>
+            </div>
+          </div>
+
+          <!-- Existing notes -->
+          <div class="cp-card">
+            <div class="cp-card-head">
+              <UIcon name="i-heroicons-bookmark" style="width: 14px; height: 14px; color: #01696f;" />
+              <span>Pinned Notes</span>
+            </div>
+            <div v-for="(note, i) in mockNotes" :key="note.id" class="cp-note-item" :class="i < mockNotes.length - 1 ? 'cp-row-border' : ''">
+              <div class="cp-note-header">
+                <span class="cp-note-author">{{ note.author }}</span>
+                <span class="cp-note-date">{{ note.date }}</span>
+                <UIcon v-if="note.pinned" name="i-heroicons-bookmark-solid" style="width: 12px; height: 12px; color: #d4a017;" />
+              </div>
+              <p class="cp-note-text">{{ note.text }}</p>
+            </div>
+          </div>
+        </div>
       </div>
-    </template>
+    </div>
+
+    <!-- ═══ DOCUMENTS ═══ -->
+    <div class="cp-card">
+      <div class="cp-card-head">
+        <UIcon name="i-heroicons-folder-open" style="width: 16px; height: 16px; color: #01696f;" />
+        <span>Documents</span>
+      </div>
+      <div v-for="(cat, i) in documentCategories" :key="cat.name" class="cp-doc-row" :class="i < documentCategories.length - 1 ? 'cp-row-border' : ''">
+        <UIcon :name="cat.icon" class="cp-doc-icon" />
+        <span class="cp-doc-name">{{ cat.name }}</span>
+        <span class="cp-doc-count">{{ cat.count }}</span>
+        <UButton size="xs" color="neutral" variant="ghost" :disabled="cat.count === 0">View</UButton>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+/* ═══ Page layout ═══ */
+.cp-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-top: 8px;
+}
+
+/* ═══ Header ═══ */
+.cp-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.cp-header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.cp-header-info {
+  min-width: 0;
+}
+.cp-avatar {
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  background: rgba(1, 105, 111, 0.08);
+  color: #01696f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 17px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.cp-header-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.cp-name {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+}
+.cp-type-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: rgba(1, 105, 111, 0.06);
+  color: #01696f;
+}
+.cp-tier-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 9999px;
+}
+.cp-tier-customer {
+  background: rgba(15, 123, 95, 0.08);
+  color: #0f7b5f;
+}
+.cp-tier-lead {
+  background: rgba(1, 105, 111, 0.08);
+  color: #01696f;
+}
+.cp-tier-quick-lead {
+  background: rgba(0, 0, 0, 0.04);
+  color: #8a8a86;
+}
+.cp-tier-cancelled {
+  background: rgba(193, 56, 56, 0.08);
+  color: #c13838;
+}
+.cp-tag {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.04);
+  color: var(--text-muted);
+}
+.cp-header-meta {
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.cp-sep {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.15);
+  flex-shrink: 0;
+}
+.cp-header-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+/* ═══ Card ═══ */
+.cp-card {
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+.cp-card-hover {
+  transition: all 150ms ease;
+  cursor: pointer;
+}
+.cp-card-hover:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border-color: rgba(1, 105, 111, 0.15);
+}
+.cp-card-historical {
+  opacity: 0.65;
+}
+.cp-card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.cp-card-head-compact {
+  justify-content: space-between;
+}
+
+/* ═══ Account Orientation ═══ */
+.cp-orient-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.cp-dot-green {
+  background: #0f7b5f;
+}
+.cp-dot-gray {
+  background: #8a8a86;
+}
+.cp-orient-good {
+  color: #0f7b5f;
+}
+.cp-orient-warn {
+  color: #c27b1a;
+}
+.cp-orient-bad {
+  color: #c13838;
+}
+.cp-orient-muted {
+  color: var(--text-muted);
+}
+.cp-orient-tag {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(1, 105, 111, 0.06);
+  color: #01696f;
+}
+.cp-gap-chip {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(193, 56, 56, 0.06);
+  color: #964219;
+}
+/* ═══ KPI Strip ═══ */
+.cp-kpi-strip {
+  display: flex;
+  align-items: stretch;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+.cp-kpi {
+  flex: 1;
+  padding: 16px 20px;
+  min-width: 0;
+}
+.cp-kpi-div {
+  width: 1px;
+  background: rgba(0, 0, 0, 0.06);
+  margin: 12px 0;
+}
+.cp-kpi-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+}
+.cp-kpi-value {
+  margin-top: 4px;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+.cp-kpi-good {
+  color: #0f7b5f;
+}
+.cp-kpi-bad {
+  color: #c13838;
+}
+.cp-kpi-warn {
+  color: #c27b1a;
+}
+.cp-kpi-sub {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+@media (max-width: 1023px) {
+  .cp-kpi-strip {
+    flex-wrap: wrap;
+  }
+  .cp-kpi {
+    min-width: 45%;
+  }
+  .cp-kpi-div {
+    display: none;
+  }
+}
+
+/* ═══ Service Actions ═══ */
+.cp-service-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0;
+}
+.cp-service-section {
+  padding: 16px 20px;
+  border-right: 1px solid rgba(0, 0, 0, 0.06);
+}
+.cp-service-section:last-child {
+  border-right: none;
+}
+.cp-service-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  margin-bottom: 12px;
+}
+.cp-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.cp-timeline-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+.cp-timeline-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 5px;
+}
+.cp-timeline-content {
+  min-width: 0;
+}
+.cp-timeline-text {
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+.cp-timeline-date {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 1px;
+}
+.cp-action-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.cp-action-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.cp-action-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: #8a8a86;
+}
+.cp-icon-green {
+  color: #0f7b5f;
+}
+.cp-action-text {
+  font-size: 12px;
+  color: var(--text-primary);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.cp-action-date {
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+.cp-empty-msg {
+  font-size: 12px;
+  color: var(--text-muted);
+  padding: 8px 0;
+}
+@media (max-width: 767px) {
+  .cp-service-grid {
+    grid-template-columns: 1fr;
+  }
+  .cp-service-section {
+    border-right: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  }
+  .cp-service-section:last-child {
+    border-bottom: none;
+  }
+}
+
+/* ═══ Main Grid ═══ */
+.cp-main-grid {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 1024px) {
+  .cp-main-grid {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+.cp-details-col {
+  align-self: start;
+}
+.cp-tabbed-col {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ═══ Details ═══ */
+.cp-detail-list {
+  padding: 4px 0;
+}
+.cp-detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+  padding: 8px 20px;
+}
+.cp-detail-row:hover {
+  background: rgba(0, 0, 0, 0.015);
+}
+.cp-detail-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+.cp-detail-value {
+  font-size: 13px;
+  color: var(--text-primary);
+  text-align: right;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cp-mono {
+  font-family: monospace;
+  font-size: 12px;
+}
+
+/* ═══ Tabs ═══ */
+.cp-tabs {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  flex-wrap: wrap;
+}
+.cp-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.cp-tab-on {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+.cp-tab-off {
+  background: transparent;
+  color: var(--text-muted);
+}
+.cp-tab-off:hover {
+  color: var(--text-primary);
+}
+.cp-tab-count {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 9999px;
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--text-muted);
+}
+.cp-tab-count-on {
+  background: rgba(1, 105, 111, 0.1);
+  color: #01696f;
+}
+.cp-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* ═══ Coverage bar ═══ */
+.cp-coverage-bar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.02);
+  flex-wrap: wrap;
+}
+.cp-coverage-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+}
+.cp-coverage-dot-wrap {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.cp-coverage-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.cp-coverage-active {
+  background: #01696f;
+}
+.cp-coverage-inactive {
+  background: rgba(0, 0, 0, 0.1);
+}
+.cp-coverage-line-label {
+  font-size: 11px;
+  color: var(--text-primary);
+}
+.cp-coverage-line-missing {
+  color: var(--text-muted);
+  text-decoration: line-through;
+}
+
+/* ═══ Coverage gap CTA ═══ */
+.cp-gap-cta {
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: rgba(217,119,6,0.04);
+  border: 1px solid rgba(217,119,6,0.12);
+}
+.cp-gap-quote-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #01696f;
+  background: rgba(1,105,111,0.06);
+  border-radius: 6px;
+  text-decoration: none;
+  transition: background 150ms ease;
+}
+.cp-gap-quote-btn:hover {
+  background: rgba(1,105,111,0.12);
+}
+
+/* ═══ Policy cards ═══ */
+.cp-policy-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.cp-group-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  padding: 4px 0;
+}
+.cp-policy-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+}
+.cp-pol-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: rgba(1, 105, 111, 0.06);
+  color: #01696f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.cp-pol-icon-muted {
+  background: rgba(0, 0, 0, 0.04);
+  color: #8a8a86;
+}
+.cp-pol-info {
+  min-width: 0;
+  flex: 1;
+}
+.cp-pol-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.cp-pol-product {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.cp-line-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(1, 105, 111, 0.06);
+  color: #01696f;
+}
+.cp-status-active {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background: rgba(15, 123, 95, 0.08);
+  color: #0f7b5f;
+}
+.cp-status-pending-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background: rgba(194, 123, 26, 0.08);
+  color: #964219;
+}
+.cp-status-cancelled {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background: rgba(193, 56, 56, 0.06);
+  color: #c13838;
+}
+.cp-pol-meta {
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.cp-pol-details {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.cp-pol-premium {
+  text-align: right;
+  flex-shrink: 0;
+}
+.cp-pol-amount {
+  font-size: 15px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+}
+.cp-pol-period {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.cp-historical-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 0;
+}
+.cp-historical-toggle:hover {
+  color: var(--text-primary);
+}
+
+/* ═══ Rows / Claims / Activity ═══ */
+.cp-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+}
+.cp-row-border {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+.cp-row:hover {
+  background: rgba(0, 0, 0, 0.015);
+}
+.cp-row-main {
+  min-width: 0;
+  flex: 1;
+}
+.cp-row-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.cp-row-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.cp-row-sub {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.cp-row-text {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+.cp-row-date {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.cp-row-amount {
+  font-size: 14px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-primary);
+  flex-shrink: 0;
+}
+.cp-status {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  white-space: nowrap;
+}
+.cp-status-ok {
+  background: rgba(15, 123, 95, 0.08);
+  color: #0f7b5f;
+}
+.cp-status-warn {
+  background: rgba(194, 123, 26, 0.08);
+  color: #964219;
+}
+.cp-status-bad {
+  background: rgba(193, 56, 56, 0.08);
+  color: #c13838;
+}
+.cp-status-pending {
+  background: rgba(0, 0, 0, 0.04);
+  color: #8a8a86;
+}
+.cp-activity-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.cp-activity-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* ═══ Table ═══ */
+.cp-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.cp-table th {
+  text-align: left;
+  padding: 10px 16px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+.cp-table td {
+  padding: 10px 16px;
+  color: var(--text-primary);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+.cp-table tr:last-child td {
+  border-bottom: none;
+}
+.cp-table tr:hover td {
+  background: rgba(0, 0, 0, 0.015);
+}
+
+/* ═══ Relationships ═══ */
+.cp-rel-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 28px 20px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+.cp-rel-empty-icon {
+  width: 24px;
+  height: 24px;
+  color: rgba(0, 0, 0, 0.12);
+}
+.cp-rel-icon {
+  width: 20px;
+  height: 20px;
+  color: #01696f;
+  flex-shrink: 0;
+}
+
+/* ═══ Notes ═══ */
+.cp-note-input {
+  padding: 16px 20px;
+}
+.cp-textarea {
+  width: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: #ffffff;
+  resize: vertical;
+  outline: none;
+  font-family: inherit;
+  transition: border-color 150ms ease;
+}
+.cp-textarea:focus {
+  border-color: #01696f;
+}
+.cp-textarea::placeholder {
+  color: var(--text-muted);
+}
+.cp-note-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+.cp-note-item {
+  padding: 14px 20px;
+}
+.cp-note-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.cp-note-author {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.cp-note-date {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.cp-note-text {
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+/* ═══ Documents ═══ */
+.cp-doc-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+}
+.cp-doc-row:hover {
+  background: rgba(0, 0, 0, 0.015);
+}
+.cp-doc-icon {
+  width: 18px;
+  height: 18px;
+  color: #01696f;
+  flex-shrink: 0;
+}
+.cp-doc-name {
+  font-size: 13px;
+  color: var(--text-primary);
+  flex: 1;
+}
+.cp-doc-count {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background: rgba(0, 0, 0, 0.04);
+  color: var(--text-muted);
+}
+
+/* ═══ Utility ═══ */
+.cp-text-right {
+  text-align: right;
+}
+.cp-text-muted {
+  color: var(--text-muted);
+}
+.cp-text-xs {
+  font-size: 11px;
+}
+.cp-text-medium {
+  font-weight: 500;
+}
+.cp-tabular {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ═══ Sales Agent Assignment ═══ */
+.cp-detail-row-agent {
+  align-items: center;
+  padding: 6px 20px;
+}
+.cp-agent-assign {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.cp-agent-select {
+  width: 220px;
+  font-size: 12px;
+}
+.cp-agent-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  color: #01696f;
+  transition: background 150ms ease;
+}
+.cp-agent-link:hover {
+  background: rgba(1, 105, 111, 0.06);
+}
+
+/* ═══ History / Audit Log ═══ */
+.cp-history-filters {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  margin-bottom: 8px;
+}
+.cp-history-filter {
+  padding: 5px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.cp-history-filter-on {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+.cp-history-filter-off {
+  background: transparent;
+  color: var(--text-muted);
+}
+.cp-history-filter-off:hover {
+  color: var(--text-primary);
+}
+.cp-history-count {
+  margin-left: auto;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+.cp-history-row {
+  display: flex;
+  gap: 0;
+  padding: 0;
+}
+.cp-history-dot-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 40px;
+  flex-shrink: 0;
+  padding-top: 18px;
+}
+.cp-history-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  z-index: 1;
+}
+.cp-history-line {
+  width: 2px;
+  flex: 1;
+  background: rgba(0, 0, 0, 0.06);
+  margin-top: 4px;
+}
+.cp-history-content {
+  flex: 1;
+  min-width: 0;
+  padding: 14px 16px 14px 0;
+}
+.cp-history-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.cp-history-action {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.cp-history-type-badge {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+.cp-history-detail {
+  margin-top: 3px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.cp-history-meta {
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* ═══ Account Orientation (warm redesign) ═══ */
+.cp-orient-card {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+.cp-orient-summary {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.cp-grade-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  border-radius: 10px;
+  border: 1.5px solid;
+  align-self: flex-start;
+}
+.cp-grade-name {
+  font-size: 14px;
+  font-weight: 700;
+}
+.cp-grade-score {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 1px;
+}
+.cp-orient-facts {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.cp-orient-fact {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.cp-orient-fact-label {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.cp-orient-fact-value {
+  font-size: 13px;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.cp-orient-events {
+  padding: 20px;
+  border-left: 1px solid rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.cp-orient-events-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.cp-events-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.cp-event-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  font-size: 12px;
+}
+.cp-event-clickable {
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.cp-event-clickable:hover {
+  background: rgba(1, 105, 111, 0.06);
+}
+.cp-event-upcoming {
+  background: rgba(0, 0, 0, 0.02);
+  color: var(--text-primary);
+}
+.cp-event-urgent {
+  background: rgba(193, 56, 56, 0.05);
+  color: #964219;
+}
+.cp-event-action {
+  background: rgba(194, 123, 26, 0.05);
+  color: #964219;
+}
+.cp-event-label {
+  flex: 1;
+  min-width: 0;
+}
+.cp-event-date {
+  font-weight: 600;
+  flex-shrink: 0;
+  font-size: 11px;
+}
+.cp-orient-quiet {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-style: italic;
+}
+@media (max-width: 767px) {
+  .cp-orient-card {
+    grid-template-columns: 1fr;
+  }
+  .cp-orient-events {
+    border-left: none;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+  }
+}
+
+/* ═══ Quick Policy Access ═══ */
+.cp-quick-policies {
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+.cp-quick-pol-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  flex-wrap: wrap;
+}
+.cp-quick-pol-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.cp-quick-pol-count {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  padding: 1px 8px;
+  border-radius: 9999px;
+  background: rgba(1, 105, 111, 0.06);
+  color: #01696f;
+}
+.cp-quick-pol-actions {
+  display: flex;
+  gap: 6px;
+}
+.cp-quick-pol-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 0;
+}
+.cp-quick-pol-chip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+  border-right: 1px solid rgba(0, 0, 0, 0.04);
+  transition: background 150ms ease;
+  cursor: pointer;
+}
+.cp-quick-pol-chip:hover {
+  background: rgba(0, 0, 0, 0.015);
+}
+.cp-quick-pol-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #01696f;
+}
+.cp-quick-pol-info {
+  flex: 1;
+  min-width: 0;
+}
+.cp-quick-pol-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.cp-quick-pol-id {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: monospace;
+}
+.cp-quick-pol-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.cp-quick-pol-premium {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+.cp-quick-pol-dl {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: none;
+  background: rgba(1, 105, 111, 0.06);
+  color: #01696f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.cp-quick-pol-dl:hover {
+  background: rgba(1, 105, 111, 0.12);
+}
+</style>
diff --git a/app/pages/customers/index.vue b/app/pages/customers/index.vue
index 7da2dcb..7c09484 100644
--- a/app/pages/customers/index.vue
+++ b/app/pages/customers/index.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { refDebounced } from '@vueuse/core'
+import { MOCK_CUSTOMERS, fmtMoney } from '~/data/mock-customers'
+const { isFavorite, toggleFavorite } = useClientFavorites()
 
 const page = ref(1)
 const search = ref('')
 const customerTypeFilter = ref<string | null>(null)
+const agentFilter = ref<string | null>(null)
+const paymentFilter = ref<string | null>(null)
+const sortBy = ref<string>('name_asc')
+const viewMode = ref<'card' | 'list'>('card')
 const debouncedSearch = refDebounced(search, 300)
 
 const customerTypeItems = [
@@ -12,7 +18,26 @@ const customerTypeItems = [
   { label: 'Corporate',   value: 'corporate'  }
 ]
 
-watch([debouncedSearch, customerTypeFilter], () => { page.value = 1 })
+const agentItems = [
+  { label: 'All Agents', value: null },
+  ...([...new Set(MOCK_CUSTOMERS.map(c => c.agent))].sort().map(a => ({ label: a, value: a })))
+]
+
+const paymentItems = [
+  { label: 'All Payments', value: null },
+  { label: 'Current', value: 'Current' },
+  { label: 'Overdue', value: 'Overdue' },
+  { label: 'Grace period', value: 'Grace period' },
+  { label: 'N/A', value: 'N/A' },
+]
+
+const sortItems = [
+  { label: 'Name (A–Z)', value: 'name_asc' },
+  { label: 'Premium (high–low)', value: 'premium_desc' },
+  { label: 'Policies (most)', value: 'policies_desc' },
+]
+
+watch([debouncedSearch, customerTypeFilter, agentFilter, paymentFilter], () => { page.value = 1 })
 
 const { data, pending, refresh } = useCustomer('/customers', {
   query: computed(() => {
@@ -34,80 +59,151 @@ const { data, pending, refresh } = useCustomer('/customers', {
     }
 
     return {
-    page_size: 20,
-    page: page.value,
+      'page[number]': page.value,
+      'page[size]': 20,
       ...filters
     }
   })
 })
 
-const customers = computed(() => data.value?.data ?? [])
+/* ── Mock fallback rows (shown when API returns nothing) ── */
+const allMockRows = MOCK_CUSTOMERS.map((m) => ({
+  id: m.id,
+  customer_type: m.type.toLowerCase(),
+  first_name: m.name.split(' ')[0],
+  last_name: m.name.split(' ').slice(1).join(' '),
+  commercial_name: null,
+  legal_name: null,
+  ruc: null,
+  email: m.email,
+  phone: m.phone,
+  birth_date: m.birthDate,
+  gender: m.gender.toLowerCase(),
+  legal_rep_name: null,
+  document_id: m.documentId,
+  _mock: m
+}))
+
+const mockRows = computed(() => {
+  let rows = allMockRows
+  // Filter by search
+  const q = debouncedSearch.value.toLowerCase().trim()
+  if (q) {
+    rows = rows.filter(r => {
+      const name = `${r.first_name} ${r.last_name}`.toLowerCase()
+      return name.includes(q)
+        || (r.email ?? '').toLowerCase().includes(q)
+        || (r.phone ?? '').includes(q)
+        || (r.document_id ?? '').toLowerCase().includes(q)
+        || (r._mock.agent ?? '').toLowerCase().includes(q)
+        || r._mock.tags.some(t => t.toLowerCase().includes(q))
+    })
+  }
+  // Filter by type
+  if (customerTypeFilter.value) {
+    rows = rows.filter(r => r.customer_type === customerTypeFilter.value)
+  }
+  // Filter by agent
+  if (agentFilter.value) {
+    rows = rows.filter(r => r._mock.agent === agentFilter.value)
+  }
+  // Filter by payment status
+  if (paymentFilter.value) {
+    rows = rows.filter(r => r._mock.paymentStatus === paymentFilter.value)
+  }
+  // Sort
+  const sorted = [...rows]
+  switch (sortBy.value) {
+    case 'name_asc':
+      sorted.sort((a, b) => `${a.first_name} ${a.last_name}`.localeCompare(`${b.first_name} ${b.last_name}`))
+      break
+    case 'premium_desc':
+      sorted.sort((a, b) => b._mock.policies.reduce((s: number, p: any) => s + p.premium, 0) - a._mock.policies.reduce((s: number, p: any) => s + p.premium, 0))
+      break
+    case 'policies_desc':
+      sorted.sort((a, b) => b._mock.policies.length - a._mock.policies.length)
+      break
+  }
+  return sorted
+})
+
+const apiCustomers = computed(() => data.value?.data ?? [])
+const customers = computed(() => apiCustomers.value.length > 0 ? apiCustomers.value : mockRows.value)
 const meta      = computed(() => data.value?.meta)
 
-// display helpers
-const customerName = (c: any) =>
-  c.customer_type === 'corporate'
-    ? (c.commercial_name || c.legal_name)
-    : `${c.first_name} ${c.last_name}`
+const usingMock = computed(() => apiCustomers.value.length === 0 && mockRows.value.length > 0)
 
-const customerSubtitle = (c: any) =>
-  c.customer_type === 'corporate' ? c.ruc : c.email
+// display helpers
+const customerName = (c: any) => {
+  if (c.customer_type === 'corporate') return c.commercial_name || c.legal_name || 'Unnamed company'
+  const full = [c.first_name, c.last_name].filter(Boolean).join(' ')
+  return full || 'Unnamed customer'
+}
+
+const customerSubtitle = (c: any) => {
+  if (c._mock) {
+    const m = c._mock
+    const total = m.policies.reduce((s: number, p: any) => s + p.premium, 0)
+    return `${m.policies.length} ${m.policies.length === 1 ? 'policy' : 'policies'} · ${fmtMoney(total)}/yr`
+  }
+  return c.customer_type === 'corporate' ? c.ruc : c.email
+}
 
 const customerTypeColor = (type: string) =>
   type === 'corporate' ? 'purple' : 'blue'
 </script>
 
 <template>
-  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
+  <div class="ci-root mx-auto max-w-7xl pb-12">
     <!-- Header -->
-    <div class="flex justify-between items-center">
-      <div>
-        <h1 class="text-3xl text-slate-900 font-bold">Customers</h1>
-        <p class="text-gray-500 text-sm">Customer Relationship Management</p>
+    <div class="ci-header">
+      <div class="ci-header-left">
+        <h1 class="ci-title">Customers</h1>
+        <span class="ci-count-badge">{{ usingMock ? customers.length : (meta?.total_count ?? 0) }}</span>
       </div>
-      <div class="flex items-center gap-3">
-        <UBadge color="gray" variant="soft" size="lg">
-          {{ meta?.total_count ?? 0 }} customers
-        </UBadge>
+      <div class="ci-header-right">
         <NuxtLink to="/customers/new">
-        <UButton icon="i-heroicons-plus" color="primary">New Customer</UButton>
+          <button class="ci-btn-primary">
+            <UIcon name="i-heroicons-plus" class="w-3.5 h-3.5" />
+            New Customer
+          </button>
         </NuxtLink>
       </div>
     </div>
 
-    <!-- Search + Filters -->
-    <div class="flex gap-4 items-center flex-wrap">
+    <!-- Filter bar -->
+    <div class="ci-filter-bar">
       <UInput
         v-model="search"
         icon="i-heroicons-magnifying-glass"
-        placeholder="Search by name, email, RUC..."
-        class="w-80"
+        placeholder="Search by name, email, RUC, agent..."
+        class="ci-filter-search"
       />
-      <USelect
-        v-model="customerTypeFilter"
-        :items="customerTypeItems"
-        class="w-44"
-      />
-      <UButton
-        icon="i-heroicons-arrow-path"
-        color="gray"
-        variant="soft"
-        :loading="pending"
-        @click="refresh()"
-      >
-        Refresh
-      </UButton>
+      <USelect v-model="customerTypeFilter" :items="customerTypeItems" class="ci-filter-select" />
+      <USelect v-model="agentFilter" :items="agentItems" class="ci-filter-select" />
+      <USelect v-model="paymentFilter" :items="paymentItems" class="ci-filter-select" />
+      <USelect v-model="sortBy" :items="sortItems" class="ci-filter-select" />
+      <UButton icon="i-heroicons-arrow-path" color="neutral" variant="ghost" size="sm" :loading="pending" @click="refresh()">Refresh</UButton>
+      <div class="ci-view-toggle">
+        <button type="button" :class="['ci-view-toggle-btn', viewMode === 'card' && 'ci-view-toggle-btn--active']" title="Card view" @click="viewMode = 'card'">
+          <UIcon name="i-heroicons-squares-2x2" style="width: 16px; height: 16px;" />
+        </button>
+        <button type="button" :class="['ci-view-toggle-btn', viewMode === 'list' && 'ci-view-toggle-btn--active']" title="List view" @click="viewMode = 'list'">
+          <UIcon name="i-heroicons-bars-3" style="width: 16px; height: 16px;" />
+        </button>
+      </div>
     </div>
 
     <!-- Loading -->
-    <div v-if="pending" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+    <div v-if="pending && !usingMock" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
       <UCard v-for="n in 6" :key="n">
         <div class="h-32 animate-pulse bg-gray-200 rounded" />
       </UCard>
     </div>
 
     <template v-else>
-      <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+      <!-- ═══ Card View ═══ -->
+      <div v-if="viewMode === 'card'" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
         <NuxtLink v-for="c in customers" :key="c.id" :to="`/customers/${c.id}`">
           <UCard class="hover:shadow-md transition-shadow cursor-pointer h-full">
             <div class="space-y-3">
@@ -115,16 +211,52 @@ const customerTypeColor = (type: string) =>
                 <div class="flex items-center gap-3 min-w-0">
                   <UAvatar :alt="customerName(c)" size="md" />
                   <div class="min-w-0">
-                    <p class="font-semibold text-slate-900 truncate">{{ customerName(c) }}</p>
+                    <p class="font-semibold text-[var(--text-primary)] truncate">{{ customerName(c) }}</p>
                     <p class="text-sm text-gray-400 truncate">{{ customerSubtitle(c) }}</p>
                   </div>
                 </div>
-                <UBadge :color="customerTypeColor(c.customer_type)" variant="soft" size="xs" class="flex-shrink-0">
-                  {{ c.customer_type === 'corporate' ? 'Corporate' : 'Individual' }}
-                </UBadge>
+                <div class="flex items-center gap-1.5 flex-shrink-0">
+                  <button
+                    type="button"
+                    class="w-6 h-6 rounded flex items-center justify-center transition-all"
+                    :class="isFavorite(c.id) ? 'text-amber-400 hover:text-amber-500' : 'text-gray-300 hover:text-amber-400'"
+                    title="Toggle favorite"
+                    @click.prevent.stop="toggleFavorite(c.id)"
+                  >
+                    <UIcon :name="isFavorite(c.id) ? 'i-heroicons-star-solid' : 'i-heroicons-star'" style="width: 16px; height: 16px;" />
+                  </button>
+                  <UBadge :color="customerTypeColor(c.customer_type)" variant="soft" size="xs">
+                    {{ c.customer_type === 'corporate' ? 'Corporate' : 'Individual' }}
+                  </UBadge>
+                </div>
               </div>
 
-              <!-- Individual fields -->
+              <!-- Mock client details -->
+              <template v-if="c._mock">
+                <div class="space-y-1 text-sm pt-2 border-t">
+                  <div class="flex justify-between">
+                    <span class="text-gray-500">Phone</span>
+                    <span>{{ c._mock.phone }}</span>
+                  </div>
+                  <div class="flex justify-between">
+                    <span class="text-gray-500">Agent</span>
+                    <span>{{ c._mock.agent }}</span>
+                  </div>
+                  <div class="flex justify-between items-center">
+                    <span class="text-gray-500">Payment</span>
+                    <span
+                      class="text-xs font-medium px-1.5 py-0.5 rounded-full"
+                      :class="c._mock.paymentStatus === 'Current' ? 'bg-emerald-50 text-emerald-700' : c._mock.paymentStatus === 'Overdue' ? 'bg-rose-50 text-rose-700' : 'bg-amber-50 text-amber-700'"
+                    >{{ c._mock.paymentStatus }}</span>
+                  </div>
+                </div>
+                <div v-if="c._mock.tags.length" class="flex gap-1 flex-wrap pt-1">
+                  <span v-for="tag in c._mock.tags" :key="tag" class="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">{{ tag }}</span>
+                </div>
+              </template>
+
+              <!-- Individual fields (API) -->
+              <template v-else>
               <div v-if="c.customer_type !== 'corporate'" class="space-y-1 text-sm pt-2 border-t">
                 <div class="flex justify-between">
                   <span class="text-gray-500">Phone</span>
@@ -140,7 +272,7 @@ const customerTypeColor = (type: string) =>
                 </div>
               </div>
 
-              <!-- Corporate fields -->
+              <!-- Corporate fields (API) -->
               <div v-else class="space-y-1 text-sm pt-2 border-t">
                 <div class="flex justify-between">
                   <span class="text-gray-500">Legal Name</span>
@@ -155,6 +287,7 @@ const customerTypeColor = (type: string) =>
                   <span>{{ c.legal_rep_name ?? '—' }}</span>
                 </div>
               </div>
+              </template>
             </div>
           </UCard>
         </NuxtLink>
@@ -166,6 +299,83 @@ const customerTypeColor = (type: string) =>
         </div>
       </div>
 
+      <!-- ═══ List View ═══ -->
+      <div v-else class="ci-list-card">
+        <table class="ci-list-table">
+          <thead>
+            <tr>
+              <th class="ci-list-th" style="width: 280px;">Customer</th>
+              <th class="ci-list-th">Type</th>
+              <th class="ci-list-th">Email</th>
+              <th class="ci-list-th">Phone</th>
+              <th class="ci-list-th">Agent</th>
+              <th class="ci-list-th" style="text-align: right;">Policies</th>
+              <th class="ci-list-th" style="text-align: right;">Premium</th>
+              <th class="ci-list-th">Payment</th>
+              <th class="ci-list-th" style="width: 40px;" />
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="customers.length === 0">
+              <td colspan="9" class="ci-list-empty">
+                <UIcon name="i-heroicons-users" class="w-10 h-10 mx-auto mb-3" />
+                <p class="text-base font-medium">No customers found</p>
+                <p class="text-sm">Try adjusting your search or create a new customer</p>
+              </td>
+            </tr>
+            <NuxtLink
+              v-for="c in customers"
+              :key="c.id"
+              :to="`/customers/${c.id}`"
+              custom
+              v-slot="{ navigate }"
+            >
+              <tr class="ci-list-row" @click="navigate" style="cursor: pointer;">
+                <td class="ci-list-td">
+                  <div class="flex items-center gap-2.5">
+                    <UAvatar :alt="customerName(c)" size="xs" />
+                    <span class="font-medium text-[var(--text-primary)] truncate">{{ customerName(c) }}</span>
+                  </div>
+                </td>
+                <td class="ci-list-td">
+                  <UBadge :color="customerTypeColor(c.customer_type)" variant="soft" size="xs">
+                    {{ c.customer_type === 'corporate' ? 'Corp' : 'Indiv' }}
+                  </UBadge>
+                </td>
+                <td class="ci-list-td ci-list-td--secondary">{{ c.email ?? '—' }}</td>
+                <td class="ci-list-td ci-list-td--secondary">{{ c.phone ?? '—' }}</td>
+                <td class="ci-list-td ci-list-td--secondary">{{ c._mock ? c._mock.agent : '—' }}</td>
+                <td class="ci-list-td" style="text-align: right;">
+                  {{ c._mock ? c._mock.policies.length : '—' }}
+                </td>
+                <td class="ci-list-td" style="text-align: right; font-variant-numeric: tabular-nums;">
+                  {{ c._mock ? fmtMoney(c._mock.policies.reduce((s: number, p: any) => s + p.premium, 0)) + '/yr' : '—' }}
+                </td>
+                <td class="ci-list-td">
+                  <span
+                    v-if="c._mock"
+                    class="text-xs font-medium px-1.5 py-0.5 rounded-full"
+                    :class="c._mock.paymentStatus === 'Current' ? 'bg-emerald-50 text-emerald-700' : c._mock.paymentStatus === 'Overdue' ? 'bg-rose-50 text-rose-700' : 'bg-amber-50 text-amber-700'"
+                  >{{ c._mock.paymentStatus }}</span>
+                  <span v-else class="ci-list-td--secondary">—</span>
+                </td>
+                <td class="ci-list-td" style="text-align: center;">
+                  <button
+                    type="button"
+                    class="w-6 h-6 rounded flex items-center justify-center transition-all"
+                    :class="isFavorite(c.id) ? 'text-amber-400 hover:text-amber-500' : 'text-gray-300 hover:text-amber-400'"
+                    title="Toggle favorite"
+                    @click.prevent.stop="toggleFavorite(c.id)"
+                  >
+                    <UIcon :name="isFavorite(c.id) ? 'i-heroicons-star-solid' : 'i-heroicons-star'" style="width: 14px; height: 14px;" />
+                  </button>
+                </td>
+              </tr>
+            </NuxtLink>
+          </tbody>
+        </table>
+      </div>
+
       <div v-if="meta && meta.total_pages > 1" class="flex justify-center">
         <UPagination
           v-model="page"
@@ -176,3 +386,99 @@ const customerTypeColor = (type: string) =>
     </template>
   </div>
 </template>
+
+<style scoped>
+/* ── Header ── */
+.ci-root { display: flex; flex-direction: column; gap: 16px; }
+.ci-header { display: flex; align-items: center; justify-content: space-between; }
+.ci-header-left { display: flex; align-items: center; gap: 10px; }
+.ci-title { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1; }
+.ci-count-badge { font-size: 11px; font-weight: 700; color: #01696f; background: rgba(1,105,111,0.08); padding: 2px 9px; border-radius: 10px; }
+.ci-header-right { display: flex; align-items: center; gap: 8px; }
+.ci-btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 12px; font-weight: 600; color: #fff; background: #01696f; border: none; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
+.ci-btn-primary:hover { background: #015258; }
+
+/* ── Filter bar ── */
+.ci-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.ci-filter-search { width: 260px; }
+.ci-filter-select { width: auto; min-width: 130px; }
+
+/* ── View toggle ── */
+.ci-view-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+}
+.ci-view-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 28px;
+  border-radius: 7px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.ci-view-toggle-btn:hover {
+  color: var(--text-primary);
+}
+.ci-view-toggle-btn--active {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* ── List view card ── */
+.ci-list-card {
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+.ci-list-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.ci-list-th {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  padding: 10px 14px;
+  text-align: left;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  white-space: nowrap;
+}
+.ci-list-row {
+  transition: background 0.1s ease;
+}
+.ci-list-row:hover {
+  background: rgba(0, 0, 0, 0.015);
+}
+.ci-list-row:not(:last-child) .ci-list-td {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+.ci-list-td {
+  font-size: 13px;
+  color: var(--text-primary);
+  padding: 10px 14px;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.ci-list-td--secondary {
+  color: #8a8a86;
+}
+.ci-list-empty {
+  text-align: center;
+  padding: 48px 16px;
+  color: #9ca3af;
+}
+</style>
diff --git a/app/pages/customers/new.vue b/app/pages/customers/new.vue
index d38e944..613145f 100644
--- a/app/pages/customers/new.vue
+++ b/app/pages/customers/new.vue
@@ -1,285 +1,8 @@
 <script setup lang="ts">
-import type { SelectItem } from '@nuxt/ui'
-
-const router     = useRouter()
-const submitting = ref(false)
-const toast      = useToast()
-const { $customer } = useNuxtApp()
-
-const customerType = ref<'individual' | 'corporate'>('individual')
-
-// individual form
-const individualForm = ref({
-  first_name:  '',
-  last_name:   '',
-  email:       '',
-  phone:       '',
-  birth_date:  '',
-  gender:      '',
-  document_id: ''
-})
-
-// corporate form
-const corporateForm = ref({
-  legal_name:            '',
-  commercial_name:       '',
-  ruc:                   '',
-  legal_rep_name:        '',
-  legal_rep_document_id: '',
-  email:                 '',
-  phone:                 '',
-  address:               ''
-})
-
-const genderItems = ref<SelectItem[]>([
-  { label: 'Male',   value: 'male'   },
-  { label: 'Female', value: 'female' }
-])
-
-const isValid = computed(() => {
-  if (customerType.value === 'individual') {
-    return individualForm.value.first_name &&
-           individualForm.value.last_name &&
-           individualForm.value.email &&
-           individualForm.value.document_id
-  }
-  return corporateForm.value.legal_name && corporateForm.value.ruc
-})
-
-async function submit() {
-  submitting.value = true
-  try {
-    const isIndividual = customerType.value === 'individual'
-    const data = await $customer(isIndividual ? '/customers' : '/customers/corporate', {
-      method: 'POST',
-      body:   isIndividual ? individualForm.value : corporateForm.value
-    }) as any
-    toast.add({ title: 'Customer created successfully', color: 'green' })
-    router.push(`/customers/${data.data.id}`)
-  } catch (e: any) {
-    toast.add({
-      title:       'Failed to create customer',
-      description: e?.data?.errors ? JSON.stringify(e.data.errors) : e.message,
-      color:       'red'
-    })
-  } finally {
-    submitting.value = false
-  }
-}
+const route = useRoute()
+await navigateTo({ path: '/registration/client', query: route.query }, { replace: true })
 </script>
 
 <template>
-  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
-    <div class="flex items-center gap-4">
-      <NuxtLink to="/customers">
-        <UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">
-          Back to Customers
-        </UButton>
-      </NuxtLink>
-      <div>
-        <h1 class="text-3xl text-slate-900 font-bold">New Customer</h1>
-        <p class="text-gray-500 text-sm">Create a new customer record</p>
-      </div>
-    </div>
-
-    <!-- Type selector -->
-    <div class="flex gap-4 max-w-2xl">
-      <div
-        v-for="type in ['individual', 'corporate']"
-        :key="type"
-        class="flex-1 border-2 rounded-xl p-4 text-center transition-all cursor-pointer"
-        :class="customerType === type
-          ? 'border-primary-500 bg-primary-50'
-          : 'border-gray-200 bg-white hover:border-gray-300'"
-        @click="customerType = type as any"
-      >
-        <UIcon
-          :name="type === 'individual' ? 'i-heroicons-user' : 'i-heroicons-building-office'"
-          class="w-8 h-8 mx-auto mb-2"
-          :class="customerType === type ? 'text-primary-500' : 'text-gray-400'"
-        />
-        <p
-          class="font-medium text-sm"
-          :class="customerType === type ? 'text-primary-700' : 'text-gray-600'"
-        >
-          {{ type === 'individual' ? 'Individual' : 'Corporate' }}
-        </p>
-      </div>
-    </div>
-
-    <!-- Individual form -->
-    <UCard v-if="customerType === 'individual'" class="max-w-2xl">
-      <template #header>
-        <p class="font-semibold text-slate-700 flex items-center gap-2">
-          <UIcon name="i-heroicons-user-plus" class="w-4 h-4" />
-          Individual Customer
-        </p>
-      </template>
-
-      <div class="space-y-4">
-        <div class="grid grid-cols-2 gap-4">
-          <UFormField label="First Name" required>
-            <UInput v-model="individualForm.first_name" placeholder="Juan" class="w-full" />
-          </UFormField>
-          <UFormField label="Last Name" required>
-            <UInput v-model="individualForm.last_name" placeholder="Pérez" class="w-full" />
-          </UFormField>
-        </div>
-
-        <UFormField label="Document ID" required>
-          <UInput
-            v-model="individualForm.document_id"
-            placeholder="V-12345678"
-            icon="i-heroicons-identification"
-            class="w-full"
-          />
-        </UFormField>
-
-        <UFormField label="Email" required>
-          <UInput
-            v-model="individualForm.email"
-            type="email"
-            placeholder="juan@example.com"
-            icon="i-heroicons-envelope"
-            class="w-full"
-          />
-        </UFormField>
-
-        <UFormField label="Phone">
-          <UInput
-            v-model="individualForm.phone"
-            placeholder="+507 6000-0000"
-            icon="i-heroicons-phone"
-            class="w-full"
-          />
-        </UFormField>
-
-        <div class="grid grid-cols-2 gap-4">
-          <UFormField label="Birth Date">
-            <UInput v-model="individualForm.birth_date" type="date" class="w-full" />
-          </UFormField>
-          <UFormField label="Gender">
-            <USelect v-model="individualForm.gender" :items="genderItems" class="w-full" />
-          </UFormField>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <NuxtLink to="/customers">
-            <UButton color="gray" variant="soft">Cancel</UButton>
-          </NuxtLink>
-          <UButton
-            color="primary"
-            icon="i-heroicons-check"
-            :loading="submitting"
-            :disabled="!isValid"
-            @click="submit"
-          >
-            Create Customer
-          </UButton>
-        </div>
-      </template>
-    </UCard>
-
-    <!-- Corporate form -->
-    <UCard v-else class="max-w-2xl">
-      <template #header>
-        <p class="font-semibold text-slate-700 flex items-center gap-2">
-          <UIcon name="i-heroicons-building-office" class="w-4 h-4" />
-          Corporate Customer
-        </p>
-      </template>
-
-      <div class="space-y-4">
-        <UFormField label="Legal Name" required>
-          <UInput
-            v-model="corporateForm.legal_name"
-            placeholder="Empresa S.A."
-            icon="i-heroicons-building-office"
-            class="w-full"
-          />
-        </UFormField>
-
-        <UFormField label="Commercial Name">
-          <UInput
-            v-model="corporateForm.commercial_name"
-            placeholder="Empresa"
-            class="w-full"
-          />
-        </UFormField>
-
-        <UFormField label="RUC" required>
-          <UInput
-            v-model="corporateForm.ruc"
-            placeholder="1234567-1-123456"
-            icon="i-heroicons-identification"
-            class="w-full"
-          />
-        </UFormField>
-
-        <div class="grid grid-cols-2 gap-4">
-          <UFormField label="Legal Representative">
-            <UInput
-              v-model="corporateForm.legal_rep_name"
-              placeholder="Juan Pérez"
-              class="w-full"
-            />
-          </UFormField>
-          <UFormField label="Legal Rep Document ID">
-            <UInput
-              v-model="corporateForm.legal_rep_document_id"
-              placeholder="V-12345678"
-              class="w-full"
-            />
-          </UFormField>
-        </div>
-
-        <UFormField label="Email">
-          <UInput
-            v-model="corporateForm.email"
-            type="email"
-            placeholder="contacto@empresa.com"
-            icon="i-heroicons-envelope"
-            class="w-full"
-          />
-        </UFormField>
-
-        <UFormField label="Phone">
-          <UInput
-            v-model="corporateForm.phone"
-            placeholder="+507 300-0000"
-            icon="i-heroicons-phone"
-            class="w-full"
-          />
-        </UFormField>
-
-        <UFormField label="Address">
-          <UInput
-            v-model="corporateForm.address"
-            placeholder="Av. Balboa, Panama City"
-            icon="i-heroicons-map-pin"
-            class="w-full"
-          />
-        </UFormField>
-      </div>
-
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <NuxtLink to="/customers">
-            <UButton color="gray" variant="soft">Cancel</UButton>
-          </NuxtLink>
-          <UButton
-            color="primary"
-            icon="i-heroicons-check"
-            :loading="submitting"
-            :disabled="!isValid"
-            @click="submit"
-          >
-            Create Corporate Customer
-          </UButton>
-        </div>
-      </template>
-    </UCard>
-  </div>
+  <div class="p-8 text-sm text-[var(--text-muted)]">Redirecting...</div>
 </template>
diff --git a/app/pages/home2.vue b/app/pages/home2.vue
new file mode 100644
index 0000000..8193d07
--- /dev/null
+++ b/app/pages/home2.vue
@@ -0,0 +1,777 @@
+<script setup lang="ts">
+import type { WelcomeDashboardKpi } from '~/types/welcome-dashboard'
+import {
+  DASHBOARD_PRESET_ORDER,
+  DASHBOARD_ROLE_PRESETS,
+  DASHBOARD_WIDGETS,
+  type DashboardRolePresetId,
+  type DashboardWidgetId
+} from '~/composables/useDashboardHomeWidgets'
+
+const { saved: homeBranding } = useBrokerageBranding()
+const welcome = useWelcomeDashboard()
+
+const {
+  widgets,
+  widgetOrder,
+  layoutUnlocked,
+  activePreset,
+  isPresetDirty,
+  applyPreset,
+  setWidget,
+  reapplySelectedPreset,
+  reorderWidgets
+} = useDashboardHomeWidgets()
+
+const dashConfigOpen = ref(false)
+const draggingWidget = ref<DashboardWidgetId | null>(null)
+
+function onDragStart(wid: DashboardWidgetId, e: DragEvent) {
+  if (!layoutUnlocked.value) { e.preventDefault(); return }
+  draggingWidget.value = wid
+  try { e.dataTransfer?.setData('text/plain', wid); if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move' } catch { /* */ }
+}
+function onDragEnd() { draggingWidget.value = null }
+function onDropSection(target: DashboardWidgetId, e: DragEvent) {
+  e.preventDefault()
+  if (!layoutUnlocked.value) return
+  const raw = draggingWidget.value ?? e.dataTransfer?.getData('text/plain')
+  const from = raw as DashboardWidgetId | undefined
+  if (!from || from === target) return
+  reorderWidgets(from, target)
+  draggingWidget.value = null
+}
+function toggleLayoutUnlock() { layoutUnlocked.value = !layoutUnlocked.value }
+
+const presetSelectItems = computed(() =>
+  DASHBOARD_PRESET_ORDER.map((id) => ({ label: DASHBOARD_ROLE_PRESETS[id].label, value: id }))
+)
+const activePresetHint = computed(() => DASHBOARD_ROLE_PRESETS[activePreset.value]?.hint ?? '')
+
+watch(() => welcome.value.productName, (name) => {
+  if (typeof document !== 'undefined') document.title = name ? `Home \u00b7 ${name}` : 'Home'
+}, { immediate: true })
+
+/* ---- sparkline helpers ---- */
+const kpiSparkSeries: Record<string, number[]> = {
+  ms: [42, 44, 41, 46, 48, 45, 49, 52, 50, 54, 53, 56],
+  mr: [58, 59, 57, 61, 62, 60, 63, 65, 64, 67, 66, 68],
+  ren: [72, 70, 74, 73, 75, 76, 74, 77, 78, 76, 79, 80],
+  late: [55, 52, 54, 50, 48, 47, 45, 44, 43, 42, 40, 38]
+}
+
+function smoothSparklinePath(points: number[], w = 112, h = 32, pad = 2) {
+  const max = Math.max(...points); const min = Math.min(...points); const r = max - min || 1
+  const pts = points.map((p, i, arr) => ({
+    x: pad + (i / Math.max(1, arr.length - 1)) * (w - pad * 2),
+    y: pad + (1 - (p - min) / r) * (h - pad * 2)
+  }))
+  if (pts.length < 2) return ''
+  let d = `M ${pts[0]!.x},${pts[0]!.y}`
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i]!; const p1 = pts[i + 1]!; const cx = (p0.x + p1.x) / 2
+    d += ` C ${cx},${p0.y} ${cx},${p1.y} ${p1.x},${p1.y}`
+  }
+  return d
+}
+function smoothSparklineArea(points: number[], w = 112, h = 32, pad = 2) {
+  const path = smoothSparklinePath(points, w, h, pad)
+  if (!path) return ''
+  const pts = points.map((p, i, arr) => ({
+    x: pad + (i / Math.max(1, arr.length - 1)) * (w - pad * 2),
+    y: pad + (1 - (p - Math.min(...points)) / (Math.max(...points) - Math.min(...points) || 1)) * (h - pad * 2)
+  }))
+  return `${path} L ${pts[pts.length - 1]!.x},${h} L ${pts[0]!.x},${h} Z`
+}
+
+/* ---- GWP chart ---- */
+const gwpTrend = [
+  { m: 'Oct', v: 72, display: '$4.52M' }, { m: 'Nov', v: 68, display: '$4.28M' },
+  { m: 'Dec', v: 76, display: '$4.71M' }, { m: 'Jan', v: 74, display: '$4.61M' },
+  { m: 'Feb', v: 81, display: '$4.98M' }, { m: 'Mar', v: 88, display: '$5.41M' }
+] as const
+const gwpChartLayout = { viewW: 400, viewH: 152, padX: 8, padY: 14 } as const
+const gwpChartModel = computed(() => {
+  const pts = gwpTrend.map((b) => b.v)
+  const { viewW, viewH, padX, padY } = gwpChartLayout
+  const innerW = viewW - padX * 2; const innerH = viewH - padY * 2
+  const maxV = Math.max(...pts, 1); const span = maxV || 1
+  const points = pts.map((p, i) => ({
+    x: padX + (i / Math.max(1, pts.length - 1)) * innerW,
+    y: padY + (1 - p / span) * innerH, v: p
+  }))
+  const bottomY = padY + innerH; const first = points[0]!; const last = points[points.length - 1]!
+  let areaD = `M ${first.x},${bottomY} L ${first.x},${first.y}`
+  let lineD = `M ${first.x},${first.y}`
+  for (let i = 1; i < points.length; i++) { areaD += ` L ${points[i]!.x},${points[i]!.y}`; lineD += ` L ${points[i]!.x},${points[i]!.y}` }
+  areaD += ` L ${last.x},${bottomY} Z`
+  const gridYs = [0, 0.5, 1].map((t) => padY + t * innerH)
+  return { areaPath: areaD, linePath: lineD, points, gridYs, viewW, viewH, padX, innerW }
+})
+const gwpLatest = computed(() => gwpTrend[gwpTrend.length - 1]!)
+
+/* ---- Pipeline data ---- */
+const QUOTED_PIPELINE_PREMIUM_M = 6.2
+const quotedPipelineSummaryCards = [
+  { label: 'Total book', value: '$42.8M', hint: 'In force' },
+  { label: 'Quoted pipeline', value: '$6.2M', hint: 'Open quotes' },
+  { label: 'YTD new sales', value: '$18.4M', hint: 'Bound new biz' }
+] as const
+const pipelineMixSegments = [
+  { label: 'Commercial', pct: 38 }, { label: 'Personal', pct: 29 },
+  { label: 'Benefits', pct: 22 }, { label: 'Other', pct: 11 }
+] as const
+const pipelineMixRows = computed(() =>
+  pipelineMixSegments.map((row) => ({ ...row, premiumM: (QUOTED_PIPELINE_PREMIUM_M * row.pct) / 100 }))
+)
+function formatPremiumM(n: number) { return `$${n.toFixed(2)}M` }
+
+/* ---- Tone helpers ---- */
+function changeToneClass(tone: WelcomeDashboardKpi['changeTone']) {
+  switch (tone) {
+    case 'positive': return 'h2-tone-pos'
+    case 'negative': return 'h2-tone-neg'
+    default: return 'h2-tone-neutral'
+  }
+}
+
+type AlertToneMeta = { icon: string; label: string; railStyle: string; iconColor: string; bg: string }
+function alertToneMeta(tone: string): AlertToneMeta {
+  switch (tone) {
+    case 'error': return { icon: 'i-heroicons-exclamation-circle', label: 'Critical', railStyle: 'background:#c13838', iconColor: 'text-rose-600', bg: 'bg-rose-50/60' }
+    case 'warning': return { icon: 'i-heroicons-exclamation-triangle', label: 'Attention', railStyle: 'background:#c27b1a', iconColor: 'text-amber-600', bg: 'bg-amber-50/60' }
+    case 'success': return { icon: 'i-heroicons-check-circle', label: 'Update', railStyle: 'background:#0f7b5f', iconColor: 'text-emerald-700', bg: 'bg-emerald-50/60' }
+    default: return { icon: 'i-heroicons-information-circle', label: 'Notice', railStyle: 'background:#8c857d', iconColor: 'text-stone-500', bg: 'bg-stone-100/60' }
+  }
+}
+const alertsWithMeta = computed(() => welcome.value.alerts.map((a) => ({ ...a, meta: alertToneMeta(a.tone) })))
+
+/* ---- Operations command bar data ---- */
+const opsMetrics = [
+  { id: 'prod', label: 'Production MTD', value: '$1.24M', target: '$1.18M', status: 'on-track' as const, icon: 'i-heroicons-banknotes' },
+  { id: 'ren', label: 'Renewals due', value: '23', target: 'next 30d', status: 'attention' as const, icon: 'i-heroicons-arrow-path' },
+  { id: 'coll', label: 'Collections at risk', value: '$184K', target: '3 accounts', status: 'warning' as const, icon: 'i-heroicons-exclamation-triangle' },
+  { id: 'claims', label: 'Claims pending', value: '7', target: 'avg 4.2d open', status: 'neutral' as const, icon: 'i-heroicons-shield-exclamation' },
+  { id: 'svc', label: 'Service backlog', value: '12', target: 'SLA: 94%', status: 'on-track' as const, icon: 'i-heroicons-inbox-stack' }
+]
+
+function opsStatusClass(status: 'on-track' | 'attention' | 'warning' | 'neutral') {
+  switch (status) {
+    case 'on-track': return 'h2-ops-on-track'
+    case 'attention': return 'h2-ops-attention'
+    case 'warning': return 'h2-ops-warning'
+    default: return 'h2-ops-neutral'
+  }
+}
+
+function opsStatusDotStyle(status: 'on-track' | 'attention' | 'warning' | 'neutral') {
+  switch (status) {
+    case 'on-track': return 'background:#0f7b5f'
+    case 'attention': return 'background:#0d5c63'
+    case 'warning': return 'background:#c27b1a'
+    default: return 'background:#8c857d'
+  }
+}
+
+/* ---- Quote lines ---- */
+const quoteLines = [
+  { to: '/quotes/auto', label: 'Auto', hint: 'Motor, fleet & bind', icon: 'i-heroicons-truck' },
+  { to: '/quotes/health', label: 'Health', hint: 'Collective & individual', icon: 'i-heroicons-heart' },
+  { to: '/quotes/life', label: 'Life', hint: 'Individual & corporate', icon: 'i-heroicons-user-group' },
+  { to: '/quotes/general-risk', label: 'General risk', hint: 'Liability & specialty', icon: 'i-heroicons-building-office-2' },
+  { to: '/quotes/custom', label: 'Custom', hint: 'Ad hoc products', icon: 'i-heroicons-puzzle-piece' }
+] as const
+
+/* ---- Time ---- */
+const timeGreeting = computed(() => {
+  const h = new Date().getHours()
+  if (h < 12) return 'Good morning'
+  if (h < 17) return 'Good afternoon'
+  return 'Good evening'
+})
+const currentDate = computed(() =>
+  new Intl.DateTimeFormat('en-US', { weekday: 'long', month: 'long', day: 'numeric' }).format(new Date())
+)
+
+/* ---- Segment colors (petroleum palette) ---- */
+/* Segment colors as inline styles (Tailwind v4 doesn't resolve teal) */
+const segColorStyles = ['background:#0d5c63', 'background:#1a8a8a', 'background:#2dd4bf', 'background:#a8a29e']
+const segDotStyles = ['background:#0d5c63;outline:2px solid rgba(13,92,99,0.2);outline-offset:1px', 'background:#1a8a8a;outline:2px solid rgba(26,138,138,0.2);outline-offset:1px', 'background:#2dd4bf;outline:2px solid rgba(45,212,191,0.2);outline-offset:1px', 'background:#a8a29e;outline:2px solid rgba(168,162,158,0.2);outline-offset:1px']
+</script>
+
+<template>
+  <div class="h2 relative min-h-full pb-12">
+
+    <HomeDashboardWidgetBlocks
+      :widget-order="widgetOrder"
+      :widgets="widgets"
+      :layout-unlocked="layoutUnlocked"
+      :dragging-widget="draggingWidget"
+      @drag-start="onDragStart"
+      @drag-end="onDragEnd"
+      @drop="onDropSection"
+    >
+      <!-- ==================== HERO: Operations Command Bar ==================== -->
+      <template #hero>
+        <div class="space-y-4">
+          <!-- Slim greeting strip -->
+          <div class="flex flex-wrap items-center justify-between gap-3 px-1">
+            <div class="flex items-baseline gap-3">
+              <h1 class="text-xl font-semibold tracking-tight text-[var(--h2-fg)]">
+                {{ timeGreeting }}, {{ welcome.greetingName }}
+              </h1>
+              <span class="text-xs text-[var(--h2-muted)]">{{ currentDate }}</span>
+            </div>
+            <div class="flex gap-2">
+              <NuxtLink to="/onboarding">
+                <UButton size="sm" color="neutral" variant="outline" class="h2-btn-outline" icon="i-heroicons-arrow-trending-up">
+                  Pipeline
+                </UButton>
+              </NuxtLink>
+              <NuxtLink to="/quotes">
+                <UButton size="sm" color="primary" class="h2-btn-primary" icon="i-heroicons-document-text">
+                  New quote
+                </UButton>
+              </NuxtLink>
+            </div>
+          </div>
+
+          <!-- Operations rail: 5-cell command strip -->
+          <div class="h2-card h2-card-flush grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5">
+            <div
+              v-for="(op, i) in opsMetrics"
+              :key="op.id"
+              class="relative flex items-start gap-3 p-4"
+              :class="[
+                i < opsMetrics.length - 1 ? 'h2-cell-border' : '',
+                opsStatusClass(op.status)
+              ]"
+            >
+              <!-- Status rail (left edge accent) -->
+              <div class="absolute inset-y-2 left-0 rounded-full" :style="opsStatusDotStyle(op.status) + ';width:3px'" />
+
+              <div class="pl-2.5">
+                <div class="flex items-center gap-1.5">
+                  <UIcon :name="op.icon" class="h-3.5 w-3.5 text-[var(--h2-muted)]" />
+                  <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">{{ op.label }}</p>
+                </div>
+                <p class="mt-1 font-mono text-xl font-bold tabular-nums tracking-tight text-[var(--h2-fg)]">{{ op.value }}</p>
+                <p class="mt-0.5 text-[11px] text-[var(--h2-muted)]">{{ op.target }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- ==================== MILESTONE ==================== -->
+      <template #milestone>
+        <div class="h2-card h2-rail-success flex flex-wrap items-center gap-4 px-5 py-3.5">
+          <div class="flex items-center gap-2">
+            <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-[var(--h2-success)]/10">
+              <UIcon name="i-heroicons-check-badge" class="h-4 w-4 text-[var(--h2-success)]" />
+            </div>
+            <span class="text-sm font-semibold text-[var(--h2-success)]">On track</span>
+          </div>
+          <div class="h-4 w-px bg-[var(--h2-border)]" />
+          <span class="text-sm text-[var(--h2-fg)]">
+            Premium <strong class="font-semibold">$1.24M</strong> vs $1.18M
+          </span>
+          <div class="h-4 w-px bg-[var(--h2-border)] hidden sm:block" />
+          <span class="text-sm text-[var(--h2-fg)] hidden sm:inline">
+            Policies <strong class="font-semibold">42</strong> / 40
+          </span>
+          <span class="ml-auto text-[11px] font-medium uppercase tracking-wider text-[var(--h2-muted)]">MTD plan</span>
+        </div>
+      </template>
+
+      <!-- ==================== PERFORMANCE KPIs ==================== -->
+      <template #performance>
+        <section class="space-y-4" aria-labelledby="perf-h2">
+          <div class="h2-section-header">
+            <h2 id="perf-h2" class="h2-section-title">Today at a glance</h2>
+            <p class="h2-section-sub">Headline operational metrics</p>
+          </div>
+
+          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            <div
+              v-for="k in welcome.performanceKpis"
+              :key="k.id"
+              class="h2-card group h2-rail-accent overflow-hidden p-4 transition-all duration-200 hover:shadow-md"
+            >
+              <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">{{ k.label }}</p>
+              <div class="mt-1.5 flex items-end gap-2.5">
+                <p class="font-mono text-2xl font-bold tabular-nums tracking-tight text-[var(--h2-fg)]">
+                  {{ k.value }}
+                </p>
+                <p v-if="k.change" class="mb-0.5 text-xs font-semibold" :class="changeToneClass(k.changeTone)">
+                  {{ k.change }}
+                </p>
+              </div>
+              <p v-if="k.hint" class="mt-1 text-[11px] leading-snug text-[var(--h2-muted)]">{{ k.hint }}</p>
+
+              <div class="mt-2.5 h-7 w-full">
+                <svg class="h-full w-full" viewBox="0 0 112 32" fill="none" aria-hidden="true">
+                  <defs>
+                    <linearGradient :id="`sg2-${k.id}`" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stop-color="var(--h2-accent)" stop-opacity="0.16" />
+                      <stop offset="100%" stop-color="var(--h2-accent)" stop-opacity="0" />
+                    </linearGradient>
+                  </defs>
+                  <path v-if="kpiSparkSeries[k.id]" :d="smoothSparklineArea(kpiSparkSeries[k.id]!)" :fill="`url(#sg2-${k.id})`" />
+                  <path
+                    v-if="kpiSparkSeries[k.id]" :d="smoothSparklinePath(kpiSparkSeries[k.id]!)"
+                    fill="none" stroke="var(--h2-accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
+                    class="opacity-60 transition-opacity group-hover:opacity-100"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== TASKS & ALERTS ==================== -->
+      <template #tasks_alerts>
+        <div class="grid gap-4 lg:grid-cols-2 lg:items-start">
+          <!-- Tasks -->
+          <div class="h2-card overflow-hidden">
+            <div class="h2-card-header">
+              <div class="h2-icon-box"><UIcon name="i-heroicons-clipboard-document-check" class="h-4 w-4" /></div>
+              <div>
+                <p class="text-sm font-semibold text-[var(--h2-fg)]">Today's tasks</p>
+                <p class="text-[11px] text-[var(--h2-muted)]">{{ welcome.dailyTasks.length }} items prioritized</p>
+              </div>
+            </div>
+            <ul class="h2-list">
+              <li
+                v-for="task in welcome.dailyTasks"
+                :key="task.id"
+                class="h2-list-item"
+              >
+                <div
+                  class="mt-1 h-2 w-2 shrink-0 rounded-full"
+                  :class="task.emphasis ? 'bg-[var(--h2-warning)]' : 'bg-[var(--h2-border)]'"
+                />
+                <span
+                  class="text-[13px] leading-snug"
+                  :class="task.emphasis ? 'font-medium text-[var(--h2-fg)]' : 'text-[var(--h2-fg-secondary)]'"
+                >{{ task.title }}</span>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Alerts -->
+          <div class="h2-card overflow-hidden">
+            <div class="h2-card-header">
+              <div class="h2-icon-box h2-icon-box-error"><UIcon name="i-heroicons-bell-alert" class="h-4 w-4" /></div>
+              <div>
+                <p class="text-sm font-semibold text-[var(--h2-fg)]">Alerts</p>
+                <p class="text-[11px] text-[var(--h2-muted)]">Exceptions needing attention</p>
+              </div>
+            </div>
+            <div class="space-y-px px-3 pb-3">
+              <div
+                v-for="alert in alertsWithMeta"
+                :key="alert.id"
+                class="h2-alert-row"
+                :class="alert.meta.bg"
+              >
+                <!-- Status rail -->
+                <div class="absolute inset-y-1.5 left-0 rounded-full" :style="alert.meta.railStyle + ';width:3px'" />
+                <UIcon :name="alert.meta.icon" class="mt-0.5 h-4 w-4 shrink-0 pl-2" :class="alert.meta.iconColor" />
+                <div class="min-w-0 flex-1">
+                  <p class="text-[10px] font-bold uppercase tracking-wider" :class="alert.meta.iconColor">{{ alert.meta.label }}</p>
+                  <p class="mt-0.5 text-[13px] leading-snug text-[var(--h2-fg)]">{{ alert.message }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- ==================== CHARTS ==================== -->
+      <template #charts>
+        <section class="grid gap-4 lg:grid-cols-5" aria-labelledby="ch-h2">
+          <!-- GWP -->
+          <div class="lg:col-span-3 h2-card overflow-hidden">
+            <div class="flex flex-wrap items-start justify-between gap-3 px-5 pt-5">
+              <div>
+                <h2 id="ch-h2" class="text-sm font-semibold text-[var(--h2-fg)]">GWP written</h2>
+                <p class="mt-0.5 text-[11px] text-[var(--h2-muted)]">Trailing 6 months</p>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="h2-badge-success">+6.2%</span>
+                <span class="font-mono text-lg font-bold tabular-nums text-[var(--h2-fg)]">{{ gwpLatest.display }}</span>
+              </div>
+            </div>
+            <div class="px-2 pb-2 pt-3">
+              <div class="overflow-hidden rounded-lg bg-[var(--h2-surface-inset)] ring-1 ring-[var(--h2-border-strong)]">
+                <svg class="h-auto w-full" :viewBox="`0 0 ${gwpChartModel.viewW} ${gwpChartModel.viewH}`" role="img">
+                  <title>Gross written premium trend</title>
+                  <defs>
+                    <linearGradient id="gwp2" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stop-color="var(--h2-accent)" stop-opacity="0.2" />
+                      <stop offset="60%" stop-color="var(--h2-accent)" stop-opacity="0.04" />
+                      <stop offset="100%" stop-color="var(--h2-accent)" stop-opacity="0" />
+                    </linearGradient>
+                  </defs>
+                  <line v-for="(gy, i) in gwpChartModel.gridYs" :key="i" class="stroke-[var(--h2-border)]" stroke-width="1"
+                    :x1="gwpChartModel.padX" :y1="gy" :x2="gwpChartModel.padX + gwpChartModel.innerW" :y2="gy" />
+                  <path :d="gwpChartModel.areaPath" fill="url(#gwp2)" />
+                  <path :d="gwpChartModel.linePath" fill="none" stroke="var(--h2-accent)" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" />
+                  <g v-for="(pt, i) in gwpChartModel.points" :key="i">
+                    <circle :cx="pt.x" :cy="pt.y" r="4.5" fill="var(--h2-surface)" stroke="var(--h2-accent)" stroke-width="2" />
+                  </g>
+                </svg>
+                <div class="flex justify-between border-t border-[var(--h2-border)] px-3 pb-2 pt-1.5">
+                  <div v-for="row in gwpTrend" :key="row.m" class="flex-1 text-center">
+                    <p class="font-mono text-[10px] font-semibold tabular-nums text-[var(--h2-fg)]">{{ row.display }}</p>
+                    <p class="text-[10px] text-[var(--h2-muted)]">{{ row.m }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Pipeline -->
+          <div class="lg:col-span-2 h2-card flex flex-col overflow-hidden">
+            <div class="px-5 pt-5">
+              <h2 class="text-sm font-semibold text-[var(--h2-fg)]">Pipeline</h2>
+              <p class="mt-0.5 text-[11px] text-[var(--h2-muted)]">Book, open quotes & YTD</p>
+            </div>
+            <!-- Summary trio -->
+            <div class="mx-4 mt-4 grid grid-cols-3 overflow-hidden rounded-lg ring-1 ring-[var(--h2-border-strong)]">
+              <div v-for="item in quotedPipelineSummaryCards" :key="item.label" class="bg-[var(--h2-surface-inset)] px-3 py-3 text-center ring-1 ring-[var(--h2-border)]">
+                <p class="font-mono text-base font-bold tabular-nums text-[var(--h2-fg)]">{{ item.value }}</p>
+                <p class="mt-0.5 text-[10px] font-medium uppercase tracking-wider text-[var(--h2-muted)]">{{ item.label }}</p>
+              </div>
+            </div>
+            <!-- Segment mix -->
+            <div class="mt-4 flex-1 px-5 pb-5">
+              <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">Segment mix</p>
+              <div class="mt-2.5 flex h-2.5 w-full overflow-hidden rounded-md" style="outline:1px solid var(--h2-border)">
+                <div v-for="(row, i) in pipelineMixRows" :key="row.label" class="h-full" :style="segColorStyles[i] + ';width:' + row.pct + '%'" />
+              </div>
+              <div class="mt-3.5 space-y-2">
+                <div v-for="(row, i) in pipelineMixRows" :key="row.label" class="flex items-center gap-2">
+                  <div class="h-2 w-2 shrink-0 rounded-sm" :style="segDotStyles[i]" />
+                  <span class="flex-1 truncate text-[12px] font-medium text-[var(--h2-fg)]">{{ row.label }}</span>
+                  <span class="font-mono text-[12px] tabular-nums text-[var(--h2-muted)]">{{ formatPremiumM(row.premiumM) }}</span>
+                  <span class="w-8 text-right text-[11px] tabular-nums text-[var(--h2-muted)]">{{ row.pct }}%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== BROKERAGE HEALTH ==================== -->
+      <template #brokerage_health>
+        <section v-if="welcome.ceoKpis?.length" class="space-y-4">
+          <div class="h2-section-header">
+            <h2 class="h2-section-title">Brokerage health</h2>
+            <p class="h2-section-sub">YTD and trailing measures</p>
+          </div>
+          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            <div v-for="k in welcome.ceoKpis" :key="k.id" class="h2-card h2-rail-accent p-4 transition-all hover:shadow-md">
+              <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">{{ k.label }}</p>
+              <p class="mt-1.5 font-mono text-xl font-bold tabular-nums tracking-tight text-[var(--h2-fg)]">{{ k.value }}</p>
+              <p v-if="k.change" class="mt-1 text-xs font-semibold" :class="changeToneClass(k.changeTone)">{{ k.change }}</p>
+              <p v-if="k.hint" class="mt-1 text-[11px] text-[var(--h2-muted)]">{{ k.hint }}</p>
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== QUOTES LINE ==================== -->
+      <template #quotes_line>
+        <section class="space-y-4" aria-labelledby="h2q">
+          <div class="flex flex-wrap items-end justify-between gap-3">
+            <div class="h2-section-header">
+              <h2 id="h2q" class="h2-section-title">Quotes</h2>
+              <p class="h2-section-sub">Start a new quote by line of business</p>
+            </div>
+            <NuxtLink to="/quotes" class="text-sm font-semibold h2-text-accent transition hover:h2-text-accent-hover">
+              View all &rarr;
+            </NuxtLink>
+          </div>
+          <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+            <NuxtLink v-for="line in quoteLines" :key="line.to" :to="line.to" class="group">
+              <div class="h2-card h2-card-hover flex h-full flex-col items-center justify-center px-4 py-5 text-center transition-all duration-200">
+                <div class="flex h-11 w-11 items-center justify-center rounded-xl h2-accent-icon transition-transform duration-200 group-hover:scale-105">
+                  <UIcon :name="line.icon" class="h-5 w-5" />
+                </div>
+                <p class="mt-3 text-sm font-semibold text-[var(--h2-fg)]">{{ line.label }}</p>
+                <p class="mt-0.5 text-[11px] leading-snug text-[var(--h2-muted)]">{{ line.hint }}</p>
+              </div>
+            </NuxtLink>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== QUICK LINKS ==================== -->
+      <template #quick_links>
+        <section class="space-y-4">
+          <div class="h2-section-header">
+            <h2 class="h2-section-title">Quick links</h2>
+            <p class="h2-section-sub">Jump to operational areas</p>
+          </div>
+          <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            <NuxtLink
+              v-for="link in welcome.quickLinks" :key="link.to" :to="link.to"
+              class="group h2-card h2-card-hover flex gap-3.5 p-4 transition-all duration-200"
+            >
+              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl h2-accent-icon transition-transform duration-200 group-hover:scale-105">
+                <UIcon :name="link.icon" class="h-5 w-5" />
+              </div>
+              <div class="min-w-0">
+                <p class="font-semibold text-[var(--h2-fg)] transition-colors group-hover:h2-text-accent">{{ link.label }}</p>
+                <p class="mt-0.5 text-[12px] leading-snug text-[var(--h2-fg-secondary)]">{{ link.description }}</p>
+              </div>
+            </NuxtLink>
+          </div>
+        </section>
+      </template>
+    </HomeDashboardWidgetBlocks>
+
+    <!-- Layout controls -->
+    <div class="mx-auto mt-12 flex max-w-6xl flex-col gap-3 border-t border-[var(--h2-border)] pt-6 sm:flex-row sm:items-center sm:justify-between">
+      <div class="flex flex-wrap items-center gap-2">
+        <UButton
+          :icon="layoutUnlocked ? 'i-heroicons-arrows-up-down' : 'i-heroicons-lock-closed'"
+          :color="layoutUnlocked ? 'primary' : 'neutral'" variant="soft" class="h2-btn-outline"
+          @click="toggleLayoutUnlock"
+        >{{ layoutUnlocked ? 'Reorder on' : 'Reorder off' }}</UButton>
+        <p class="max-w-md text-xs text-[var(--h2-muted)]">Drag blocks by the grip when reorder is on.</p>
+      </div>
+      <UButton icon="i-heroicons-squares-2x2" color="primary" class="h2-btn-primary shrink-0" @click="dashConfigOpen = true">
+        Layout &amp; widgets
+      </UButton>
+    </div>
+
+    <!-- Slideover -->
+    <USlideover v-model:open="dashConfigOpen" side="right">
+      <template #content>
+        <div class="flex h-full max-w-md flex-col bg-[var(--h2-surface)] sm:max-w-lg">
+          <div class="flex shrink-0 items-start justify-between gap-3 border-b border-[var(--h2-border)] p-6">
+            <div class="min-w-0">
+              <h2 class="text-lg font-semibold text-[var(--h2-fg)]">Dashboard layout</h2>
+              <p class="mt-1 text-sm text-[var(--h2-fg-secondary)]">Choose a role preset or toggle sections.</p>
+            </div>
+            <UButton icon="i-heroicons-x-mark" color="neutral" variant="ghost" class="shrink-0" aria-label="Close" @click="dashConfigOpen = false" />
+          </div>
+          <div class="min-h-0 flex-1 overflow-y-auto p-6">
+            <div class="space-y-6">
+              <div>
+                <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">Role preset</p>
+                <USelect :model-value="activePreset" :items="presetSelectItems" value-key="value" label-key="label" class="mt-2 w-full"
+                  @update:model-value="applyPreset($event as DashboardRolePresetId)" />
+                <p class="mt-2 text-xs text-[var(--h2-muted)]">{{ activePresetHint }}</p>
+                <UButton v-if="isPresetDirty" size="xs" color="neutral" variant="soft" class="mt-2" @click="reapplySelectedPreset">Reset to preset</UButton>
+              </div>
+              <div class="border-t border-[var(--h2-border)] pt-4">
+                <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">Sections</p>
+                <ul class="mt-3 space-y-4">
+                  <li v-for="w in DASHBOARD_WIDGETS" :key="w.id" class="flex items-start justify-between gap-3">
+                    <div class="min-w-0">
+                      <p class="text-sm font-medium text-[var(--h2-fg)]">{{ w.label }}</p>
+                      <p class="text-xs text-[var(--h2-muted)]">{{ w.description }}</p>
+                    </div>
+                    <USwitch :model-value="widgets[w.id]" @update:model-value="setWidget(w.id, $event)" />
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </USlideover>
+  </div>
+</template>
+
+<style scoped>
+/* =====================================================================
+   HOME 2 — PETROLEUM / STONE DESIGN SYSTEM (scoped)
+   ===================================================================== */
+
+/* ---- Palette ---- */
+.h2 {
+  /* Petroleum accent scale */
+  --h2-accent:        #0d5c63;
+  --h2-accent-hover:  #0a4a50;
+  --h2-accent-muted:  #1a8a8a;
+  --h2-accent-soft:   #0d5c63 / 0.08;
+
+  /* Surfaces — stone/warm-gray with real depth */
+  --h2-page-bg:       var(--page-bg, #f4f2ef);
+  --h2-surface:       #faf9f7;
+  --h2-surface-raised:#ffffff;
+  --h2-surface-inset: #f0eeeb;
+
+  /* Foregrounds */
+  --h2-fg:            #1a1a1a;
+  --h2-fg-secondary:  #5c5650;
+  --h2-muted:         #8c857d;
+
+  /* Borders — two tiers for depth */
+  --h2-border:        #e5e0da;
+  --h2-border-strong: #d5cfc8;
+
+  /* Semantic — assertive */
+  --h2-success:       #0f7b5f;
+  --h2-warning:       #c27b1a;
+  --h2-error:         #c13838;
+  --h2-info:          #0d5c63;
+
+  background: var(--h2-page-bg);
+}
+
+/* ---- Card system ---- */
+.h2-card {
+  background: var(--h2-surface-raised);
+  border-radius: 12px;
+  border: 1px solid var(--h2-border);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
+}
+.h2-card-flush {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* ---- Status rail motif (left-edge accent strip) ---- */
+.h2-rail-accent { border-left: 3px solid var(--h2-accent); }
+.h2-rail-success { border-left: 3px solid var(--h2-success); }
+.h2-rail-warning { border-left: 3px solid var(--h2-warning); }
+.h2-rail-error   { border-left: 3px solid var(--h2-error); }
+
+/* ---- Section headers ---- */
+.h2-section-header { }
+.h2-section-title {
+  font-size: 0.9375rem; /* 15px */
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--h2-fg);
+}
+.h2-section-sub {
+  margin-top: 2px;
+  font-size: 0.75rem;
+  color: var(--h2-muted);
+}
+
+/* ---- Card headers (icon + title) ---- */
+.h2-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--h2-border);
+}
+.h2-icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--h2-accent) 10%, transparent);
+  color: var(--h2-accent);
+}
+.h2-icon-box-error {
+  background: color-mix(in srgb, var(--h2-error) 10%, transparent);
+  color: var(--h2-error);
+}
+
+/* ---- Lists ---- */
+.h2-list {
+  padding: 0 1.25rem;
+}
+.h2-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  padding: 0.625rem 0;
+  border-bottom: 1px solid var(--h2-border);
+}
+.h2-list-item:last-child { border-bottom: 0; padding-bottom: 1rem; }
+.h2-list-item:first-child { padding-top: 0.75rem; }
+
+/* ---- Alert rows ---- */
+.h2-alert-row {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem 0.75rem 0.75rem 1rem;
+  border-radius: 8px;
+  transition: background 0.15s;
+}
+
+/* ---- Ops cell borders ---- */
+.h2-cell-border {
+  border-right: 1px solid var(--h2-border);
+}
+@media (max-width: 639px) {
+  .h2-cell-border:nth-child(2n) { border-right: none; }
+  .h2-cell-border { border-bottom: 1px solid var(--h2-border); }
+}
+
+/* ---- Ops status background tints ---- */
+.h2-ops-on-track  { background: color-mix(in srgb, var(--h2-success) 3%, transparent); }
+.h2-ops-attention { background: color-mix(in srgb, var(--h2-accent)  3%, transparent); }
+.h2-ops-warning   { background: color-mix(in srgb, var(--h2-warning) 3%, transparent); }
+.h2-ops-neutral   { background: transparent; }
+
+/* ---- Tone classes ---- */
+.h2-tone-pos     { color: var(--h2-success); }
+.h2-tone-neg     { color: var(--h2-error); }
+.h2-tone-neutral { color: var(--h2-muted); }
+
+/* ---- Badges ---- */
+.h2-badge-success {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0.125rem 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  background: color-mix(in srgb, var(--h2-success) 10%, transparent);
+  color: var(--h2-success);
+  border: 1px solid color-mix(in srgb, var(--h2-success) 20%, transparent);
+}
+
+/* ---- Buttons ---- */
+.h2-btn-primary {
+  background: var(--h2-accent) !important;
+  color: #fff !important;
+  border-radius: 10px !important;
+  border: none !important;
+  box-shadow: 0 1px 3px rgba(13,92,99,0.25), 0 1px 2px rgba(13,92,99,0.15) !important;
+  transition: background 0.15s, box-shadow 0.15s !important;
+}
+.h2-btn-primary:hover {
+  background: var(--h2-accent-hover) !important;
+  box-shadow: 0 2px 6px rgba(13,92,99,0.3), 0 1px 3px rgba(13,92,99,0.2) !important;
+}
+.h2-btn-outline {
+  border-radius: 10px !important;
+  border-color: var(--h2-border-strong) !important;
+  color: var(--h2-fg) !important;
+}
+
+/* ---- Accent icon tile ---- */
+.h2-accent-icon {
+  background: rgba(13, 92, 99, 0.08);
+  color: #0d5c63;
+  border: 1px solid rgba(13, 92, 99, 0.15);
+}
+
+/* ---- Accent text ---- */
+.h2-text-accent { color: #0d5c63; }
+.h2-text-accent-hover { color: #0a4a50; }
+
+/* ---- Card hover state ---- */
+.h2-card-hover:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
+  border-color: rgba(13, 92, 99, 0.25);
+}
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 8428a25..f1f33c5 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,11 +1,3361 @@
+<script setup lang="ts">
+import type { WelcomeDashboardKpi } from '~/types/welcome-dashboard'
+import {
+  DASHBOARD_PRESET_ORDER,
+  DASHBOARD_ROLE_PRESETS,
+  DASHBOARD_WIDGETS,
+  type DashboardRolePresetId,
+  type DashboardWidgetId
+} from '~/composables/useDashboardHomeWidgets'
+
+const { saved: homeBranding } = useBrokerageBranding()
+const welcome = useWelcomeDashboard()
+
+const {
+  widgets,
+  widgetOrder,
+  layoutUnlocked,
+  activePreset,
+  isPresetDirty,
+  applyPreset,
+  setWidget,
+  reapplySelectedPreset,
+  reorderWidgets
+} = useDashboardHomeWidgets()
+
+const dashConfigOpen = ref(false)
+const draggingWidget = ref<DashboardWidgetId | null>(null)
+
+function onDragStart(wid: DashboardWidgetId, e: DragEvent) {
+  if (!layoutUnlocked.value) { e.preventDefault(); return }
+  draggingWidget.value = wid
+  try { e.dataTransfer?.setData('text/plain', wid); if (e.dataTransfer) e.dataTransfer.effectAllowed = 'move' } catch { /* */ }
+}
+function onDragEnd() { draggingWidget.value = null }
+function onDropSection(target: DashboardWidgetId, e: DragEvent) {
+  e.preventDefault()
+  if (!layoutUnlocked.value) return
+  const raw = draggingWidget.value ?? e.dataTransfer?.getData('text/plain')
+  const from = raw as DashboardWidgetId | undefined
+  if (!from || from === target) return
+  reorderWidgets(from, target)
+  draggingWidget.value = null
+}
+function toggleLayoutUnlock() { layoutUnlocked.value = !layoutUnlocked.value }
+
+/* ---- Notes scratchpad (sticky notes, persisted locally) ---- */
+const NOTES_KEY = 'policy-ui.dashboard.notes.v2'
+
+interface StickyNote {
+  id: string
+  content: string
+  color: string
+  expanded: boolean
+  pinned: boolean
+  createdAt: number
+}
+
+const STICKY_COLORS = [
+  { id: 'yellow', bg: '#fef9c3', border: '#fde047', label: 'Yellow' },
+  { id: 'green', bg: '#dcfce7', border: '#86efac', label: 'Green' },
+  { id: 'blue', bg: '#dbeafe', border: '#93c5fd', label: 'Blue' },
+  { id: 'pink', bg: '#fce7f3', border: '#f9a8d4', label: 'Pink' },
+  { id: 'orange', bg: '#ffedd5', border: '#fdba74', label: 'Orange' },
+]
+
+const stickyNotes = ref<StickyNote[]>([
+  { id: 'n1', content: 'Follow up with Constructora Delta on fleet renewal — need 3 comparative quotes by Friday.', color: 'yellow', expanded: false, pinned: true, createdAt: Date.now() - 86400000 },
+  { id: 'n2', content: 'Ask Marco about the Clínica Norte health plan upsell.', color: 'green', expanded: false, pinned: false, createdAt: Date.now() - 3600000 },
+  { id: 'n3', content: 'Board deck due end of month — pull YTD numbers from the pipeline report and retention dashboard.', color: 'blue', expanded: false, pinned: false, createdAt: Date.now() - 7200000 },
+  { id: 'n4', content: 'Call Sofía re: grace period.', color: 'pink', expanded: false, pinned: false, createdAt: Date.now() - 1800000 },
+])
+let nextNoteId = 5
+
+function addStickyNote() {
+  const colors = STICKY_COLORS.map(c => c.id)
+  const color = colors[stickyNotes.value.length % colors.length] ?? 'yellow'
+  const note: StickyNote = { id: `n${nextNoteId++}`, content: '', color, expanded: true, pinned: false, createdAt: Date.now() }
+  stickyNotes.value = [note, ...stickyNotes.value]
+}
+
+function removeStickyNote(id: string) {
+  stickyNotes.value = stickyNotes.value.filter(n => n.id !== id)
+}
+
+function toggleStickyExpand(id: string) {
+  const note = stickyNotes.value.find(n => n.id === id)
+  if (note) note.expanded = !note.expanded
+}
+
+function toggleStickyPin(id: string) {
+  const note = stickyNotes.value.find(n => n.id === id)
+  if (note) note.pinned = !note.pinned
+}
+
+function stickyColor(colorId: string) {
+  return STICKY_COLORS.find(c => c.id === colorId) ?? STICKY_COLORS[0]!
+}
+
+function cycleStickyColor(id: string) {
+  const note = stickyNotes.value.find(n => n.id === id)
+  if (!note) return
+  const idx = STICKY_COLORS.findIndex(c => c.id === note.color)
+  note.color = STICKY_COLORS[(idx + 1) % STICKY_COLORS.length]!.id
+}
+
+function stickyPreview(content: string) {
+  if (!content) return 'Empty note'
+  return content.length > 60 ? content.slice(0, 60) + '...' : content
+}
+
+const sortedStickyNotes = computed(() => {
+  const pinned = stickyNotes.value.filter(n => n.pinned)
+  const unpinned = stickyNotes.value.filter(n => !n.pinned)
+  return [...pinned, ...unpinned]
+})
+
+onMounted(() => {
+  if (typeof localStorage !== 'undefined') {
+    try {
+      const raw = localStorage.getItem(NOTES_KEY)
+      if (raw) {
+        const parsed = JSON.parse(raw)
+        if (Array.isArray(parsed)) stickyNotes.value = parsed
+      }
+    } catch { /* ignore */ }
+  }
+})
+watch(stickyNotes, (v) => {
+  if (typeof localStorage !== 'undefined') {
+    try { localStorage.setItem(NOTES_KEY, JSON.stringify(v)) } catch { /* quota */ }
+  }
+}, { deep: true })
+
+/* ---- Tasks & alerts interactivity ---- */
+interface DashTask {
+  id: string
+  title: string
+  emphasis: boolean
+  done: boolean
+}
+
+const dashTasks = ref<DashTask[]>([])
+const dashAlertsDismissed = ref<Set<string>>(new Set())
+const newTaskText = ref('')
+const addingTask = ref(false)
+
+onMounted(() => {
+  // Hydrate tasks from composable data + localStorage state
+  const savedDone = new Set<string>()
+  if (typeof localStorage !== 'undefined') {
+    try {
+      const raw = localStorage.getItem('policy-ui.dashboard.tasks-done')
+      if (raw) JSON.parse(raw).forEach((id: string) => savedDone.add(id))
+    } catch { /* */ }
+    try {
+      const raw = localStorage.getItem('policy-ui.dashboard.alerts-dismissed')
+      if (raw) JSON.parse(raw).forEach((id: string) => dashAlertsDismissed.value.add(id))
+    } catch { /* */ }
+    try {
+      const raw = localStorage.getItem('policy-ui.dashboard.user-tasks')
+      if (raw) {
+        const userTasks = JSON.parse(raw) as DashTask[]
+        // Will merge below
+        dashTasks.value = [
+          ...welcome.value.dailyTasks.map(t => ({
+            id: t.id,
+            title: t.title,
+            emphasis: t.emphasis,
+            done: savedDone.has(t.id),
+          })),
+          ...userTasks,
+        ]
+        return
+      }
+    } catch { /* */ }
+  }
+  dashTasks.value = welcome.value.dailyTasks.map(t => ({
+    id: t.id,
+    title: t.title,
+    emphasis: t.emphasis,
+    done: savedDone.has(t.id),
+  }))
+})
+
+function toggleTask(id: string) {
+  const task = dashTasks.value.find(t => t.id === id)
+  if (task) {
+    task.done = !task.done
+    persistTaskState()
+  }
+}
+
+function addQuickTask() {
+  if (!newTaskText.value.trim()) return
+  const task: DashTask = {
+    id: `user-task-${Date.now()}`,
+    title: newTaskText.value.trim(),
+    emphasis: false,
+    done: false,
+  }
+  dashTasks.value = [task, ...dashTasks.value]
+  newTaskText.value = ''
+  addingTask.value = false
+  persistTaskState()
+}
+
+function removeTask(id: string) {
+  dashTasks.value = dashTasks.value.filter(t => t.id !== id)
+  persistTaskState()
+}
+
+function dismissAlert(id: string) {
+  dashAlertsDismissed.value.add(id)
+  if (typeof localStorage !== 'undefined') {
+    try { localStorage.setItem('policy-ui.dashboard.alerts-dismissed', JSON.stringify([...dashAlertsDismissed.value])) } catch { /* */ }
+  }
+}
+
+function persistTaskState() {
+  if (typeof localStorage === 'undefined') return
+  try {
+    const doneIds = dashTasks.value.filter(t => t.done).map(t => t.id)
+    localStorage.setItem('policy-ui.dashboard.tasks-done', JSON.stringify(doneIds))
+    const userTasks = dashTasks.value.filter(t => t.id.startsWith('user-task-'))
+    localStorage.setItem('policy-ui.dashboard.user-tasks', JSON.stringify(userTasks))
+  } catch { /* */ }
+}
+
+const visibleAlerts = computed(() =>
+  alertsWithMeta.value.filter(a => !dashAlertsDismissed.value.has(a.id))
+)
+
+const completedTaskCount = computed(() => dashTasks.value.filter(t => t.done).length)
+const totalTaskCount = computed(() => dashTasks.value.length)
+
+/* ---- Milestone tracker configurability ---- */
+type MilestoneMetric = { id: string; label: string; actual: string; target: string; pct: number; unit: string }
+
+const MILESTONE_METRICS: MilestoneMetric[] = [
+  { id: 'premium', label: 'Premium', actual: '$1.24M', target: '$1.18M', pct: 105, unit: '$' },
+  { id: 'policies', label: 'Policies', actual: '42', target: '40', pct: 105, unit: '' },
+  { id: 'quotes', label: 'Quotes sent', actual: '68', target: '55', pct: 124, unit: '' },
+  { id: 'close-rate', label: 'Close rate', actual: '34%', target: '30%', pct: 113, unit: '%' },
+  { id: 'new-clients', label: 'New clients', actual: '8', target: '6', pct: 133, unit: '' },
+  { id: 'retention', label: 'Retention', actual: '91%', target: '88%', pct: 103, unit: '%' },
+]
+
+const MILESTONE_STORAGE_KEY = 'policy-ui.dashboard.milestone-metrics'
+const activeMilestoneIds = ref<string[]>(['premium', 'policies'])
+
+onMounted(() => {
+  if (typeof localStorage !== 'undefined') {
+    try {
+      const raw = localStorage.getItem(MILESTONE_STORAGE_KEY)
+      if (raw) {
+        const parsed = JSON.parse(raw)
+        if (Array.isArray(parsed) && parsed.length > 0) activeMilestoneIds.value = parsed
+      }
+    } catch { /* */ }
+  }
+})
+
+function toggleMilestoneMetric(id: string) {
+  const idx = activeMilestoneIds.value.indexOf(id)
+  if (idx >= 0) {
+    if (activeMilestoneIds.value.length <= 1) return
+    activeMilestoneIds.value = activeMilestoneIds.value.filter(x => x !== id)
+  } else {
+    if (activeMilestoneIds.value.length >= 4) return
+    activeMilestoneIds.value = [...activeMilestoneIds.value, id]
+  }
+  if (typeof localStorage !== 'undefined') {
+    try { localStorage.setItem(MILESTONE_STORAGE_KEY, JSON.stringify(activeMilestoneIds.value)) } catch { /* */ }
+  }
+}
+
+const activeMilestones = computed(() =>
+  activeMilestoneIds.value
+    .map(id => MILESTONE_METRICS.find(m => m.id === id))
+    .filter((m): m is MilestoneMetric => !!m)
+)
+
+const milestoneAvgPct = computed(() => {
+  if (!activeMilestones.value.length) return 0
+  return Math.round(activeMilestones.value.reduce((s, m) => s + m.pct, 0) / activeMilestones.value.length)
+})
+
+const milestoneStatus = computed(() => {
+  const avg = milestoneAvgPct.value
+  if (avg >= 100) return { label: 'On track', color: 'var(--h2-success)', icon: 'i-heroicons-check-badge' }
+  if (avg >= 85) return { label: 'Close', color: 'var(--h2-warning)', icon: 'i-heroicons-exclamation-circle' }
+  return { label: 'Behind', color: 'var(--h2-error)', icon: 'i-heroicons-x-circle' }
+})
+
+const milestoneConfigOpen = ref(false)
+let milestoneConfigSkipClose = false
+
+function onMilestoneConfigClick(e: MouseEvent) {
+  e.stopPropagation()
+  e.preventDefault()
+  milestoneConfigSkipClose = true
+  milestoneConfigOpen.value = !milestoneConfigOpen.value
+  setTimeout(() => { milestoneConfigSkipClose = false }, 200)
+}
+
+/* ---- Chart widget config ---- */
+type ChartTimeRange = '3m' | '6m' | '12m'
+const chartTimeRange = ref<ChartTimeRange>('6m')
+
+type ChartMetricId = 'gwp' | 'policies' | 'retention' | 'new-biz' | 'loss-ratio' | 'commission'
+type ChartTypeId = 'line' | 'bar' | 'area'
+
+interface ChartMetricOption {
+  id: ChartMetricId
+  label: string
+  data6m: { m: string; v: number; display: string }[]
+  change: string
+  changeTone: 'positive' | 'negative' | 'neutral'
+}
+
+const CHART_METRICS: ChartMetricOption[] = [
+  { id: 'gwp', label: 'GWP written', change: '+6.2%', changeTone: 'positive',
+    data6m: [
+      { m: 'Oct', v: 72, display: '$4.52M' }, { m: 'Nov', v: 68, display: '$4.28M' },
+      { m: 'Dec', v: 76, display: '$4.71M' }, { m: 'Jan', v: 74, display: '$4.61M' },
+      { m: 'Feb', v: 81, display: '$4.98M' }, { m: 'Mar', v: 88, display: '$5.41M' }
+    ] },
+  { id: 'policies', label: 'Policies bound', change: '+12', changeTone: 'positive',
+    data6m: [
+      { m: 'Oct', v: 32, display: '32' }, { m: 'Nov', v: 28, display: '28' },
+      { m: 'Dec', v: 35, display: '35' }, { m: 'Jan', v: 38, display: '38' },
+      { m: 'Feb', v: 36, display: '36' }, { m: 'Mar', v: 42, display: '42' }
+    ] },
+  { id: 'retention', label: 'Retention rate', change: '+1.2%', changeTone: 'positive',
+    data6m: [
+      { m: 'Oct', v: 88, display: '88%' }, { m: 'Nov', v: 87, display: '87%' },
+      { m: 'Dec', v: 89, display: '89%' }, { m: 'Jan', v: 90, display: '90%' },
+      { m: 'Feb', v: 90, display: '90%' }, { m: 'Mar', v: 91, display: '91%' }
+    ] },
+  { id: 'new-biz', label: 'New business', change: '+$820K', changeTone: 'positive',
+    data6m: [
+      { m: 'Oct', v: 52, display: '$2.4M' }, { m: 'Nov', v: 48, display: '$2.2M' },
+      { m: 'Dec', v: 62, display: '$2.9M' }, { m: 'Jan', v: 58, display: '$2.7M' },
+      { m: 'Feb', v: 64, display: '$3.0M' }, { m: 'Mar', v: 70, display: '$3.2M' }
+    ] },
+  { id: 'loss-ratio', label: 'Loss ratio', change: '-3.1%', changeTone: 'positive',
+    data6m: [
+      { m: 'Oct', v: 68, display: '68%' }, { m: 'Nov', v: 72, display: '72%' },
+      { m: 'Dec', v: 65, display: '65%' }, { m: 'Jan', v: 63, display: '63%' },
+      { m: 'Feb', v: 60, display: '60%' }, { m: 'Mar', v: 58, display: '58%' }
+    ] },
+  { id: 'commission', label: 'Commission rev', change: '+8.4%', changeTone: 'positive',
+    data6m: [
+      { m: 'Oct', v: 55, display: '$680K' }, { m: 'Nov', v: 52, display: '$640K' },
+      { m: 'Dec', v: 60, display: '$740K' }, { m: 'Jan', v: 58, display: '$715K' },
+      { m: 'Feb', v: 65, display: '$800K' }, { m: 'Mar', v: 72, display: '$886K' }
+    ] },
+]
+
+const activeChartMetric = ref<ChartMetricId>('gwp')
+const activeChartType = ref<ChartTypeId>('area')
+const chartMetricMenuOpen = ref(false)
+
+const selectedChartMetric = computed(() =>
+  CHART_METRICS.find(m => m.id === activeChartMetric.value) ?? CHART_METRICS[0]!
+)
+
+const chartData = computed(() => {
+  const metric = selectedChartMetric.value
+  const range = chartTimeRange.value
+  if (range === '3m') return metric.data6m.slice(-3)
+  return metric.data6m // 6m default (we reuse for 12m with a label tweak)
+})
+
+const chartLatest = computed(() => chartData.value[chartData.value.length - 1]!)
+
+/* Dynamic chart SVG model */
+const chartSvgModel = computed(() => {
+  const pts = chartData.value.map(b => b.v)
+  const viewW = 400; const viewH = 152; const padX = 8; const padY = 14
+  const innerW = viewW - padX * 2; const innerH = viewH - padY * 2
+  const maxV = Math.max(...pts, 1); const minV = Math.min(...pts, 0)
+  const span = maxV - minV || 1
+  const points = pts.map((p, i) => ({
+    x: padX + (i / Math.max(1, pts.length - 1)) * innerW,
+    y: padY + (1 - (p - minV) / span) * innerH, v: p
+  }))
+  const bottomY = padY + innerH
+  const first = points[0]!; const last = points[points.length - 1]!
+
+  // Line + area paths
+  let lineD = `M ${first.x},${first.y}`
+  let areaD = `M ${first.x},${bottomY} L ${first.x},${first.y}`
+  for (let i = 1; i < points.length; i++) {
+    const p0 = points[i - 1]!; const p1 = points[i]!
+    const cx = (p0.x + p1.x) / 2
+    const seg = ` C ${cx},${p0.y} ${cx},${p1.y} ${p1.x},${p1.y}`
+    lineD += seg; areaD += seg
+  }
+  areaD += ` L ${last.x},${bottomY} Z`
+
+  // Bar geometry
+  const barW = Math.min(innerW / pts.length * 0.6, 40)
+  const bars = pts.map((p, i) => ({
+    x: padX + (i / Math.max(1, pts.length - 1)) * innerW - barW / 2,
+    y: padY + (1 - (p - minV) / span) * innerH,
+    w: barW,
+    h: ((p - minV) / span) * innerH,
+  }))
+
+  const gridYs = [0, 0.5, 1].map(t => padY + t * innerH)
+  return { lineD, areaD, points, bars, gridYs, viewW, viewH, padX, innerW, bottomY }
+})
+
+type PipelineViewId = 'summary' | 'stage' | 'lob'
+const pipelineView = ref<PipelineViewId>('summary')
+const hoveredSegment = ref<number | null>(null)
+
+const pipelineStages = [
+  { label: 'Prospect', count: 24, value: '$2.1M', pct: 34, color: '#01696f' },
+  { label: 'Quoted', count: 38, value: '$6.2M', pct: 100, color: '#1a8a8a' },
+  { label: 'Negotiating', count: 12, value: '$3.8M', pct: 61, color: '#2dd4bf' },
+  { label: 'Closing', count: 8, value: '$2.4M', pct: 39, color: '#0f7b5f' },
+  { label: 'Won MTD', count: 14, value: '$1.8M', pct: 29, color: '#065f46' },
+]
+
+const pipelineLobBreakdown = [
+  { label: 'Auto', count: 18, value: '$1.2M', pct: 19 },
+  { label: 'Health', count: 12, value: '$3.4M', pct: 55 },
+  { label: 'Life', count: 8, value: '$0.8M', pct: 13 },
+  { label: 'Property', count: 6, value: '$0.5M', pct: 8 },
+  { label: 'Other', count: 4, value: '$0.3M', pct: 5 },
+]
+
+const presetSelectItems = computed(() =>
+  DASHBOARD_PRESET_ORDER.map((id) => ({ label: DASHBOARD_ROLE_PRESETS[id].label, value: id }))
+)
+const activePresetHint = computed(() => DASHBOARD_ROLE_PRESETS[activePreset.value]?.hint ?? '')
+
+watch(() => welcome.value.productName, (name) => {
+  if (typeof document !== 'undefined') document.title = name ? `Home \u00b7 ${name}` : 'Home'
+}, { immediate: true })
+
+/* ---- sparkline helpers ---- */
+const kpiSparkSeries: Record<string, number[]> = {
+  ms: [42, 44, 41, 46, 48, 45, 49, 52, 50, 54, 53, 56],
+  mr: [58, 59, 57, 61, 62, 60, 63, 65, 64, 67, 66, 68],
+  ren: [72, 70, 74, 73, 75, 76, 74, 77, 78, 76, 79, 80],
+  late: [55, 52, 54, 50, 48, 47, 45, 44, 43, 42, 40, 38]
+}
+
+function smoothSparklinePath(points: number[], w = 112, h = 32, pad = 2) {
+  const max = Math.max(...points); const min = Math.min(...points); const r = max - min || 1
+  const pts = points.map((p, i, arr) => ({
+    x: pad + (i / Math.max(1, arr.length - 1)) * (w - pad * 2),
+    y: pad + (1 - (p - min) / r) * (h - pad * 2)
+  }))
+  if (pts.length < 2) return ''
+  let d = `M ${pts[0]!.x},${pts[0]!.y}`
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i]!; const p1 = pts[i + 1]!; const cx = (p0.x + p1.x) / 2
+    d += ` C ${cx},${p0.y} ${cx},${p1.y} ${p1.x},${p1.y}`
+  }
+  return d
+}
+function smoothSparklineArea(points: number[], w = 112, h = 32, pad = 2) {
+  const path = smoothSparklinePath(points, w, h, pad)
+  if (!path) return ''
+  const pts = points.map((p, i, arr) => ({
+    x: pad + (i / Math.max(1, arr.length - 1)) * (w - pad * 2),
+    y: pad + (1 - (p - Math.min(...points)) / (Math.max(...points) - Math.min(...points) || 1)) * (h - pad * 2)
+  }))
+  return `${path} L ${pts[pts.length - 1]!.x},${h} L ${pts[0]!.x},${h} Z`
+}
+
+/* ---- Pipeline data ---- */
+const QUOTED_PIPELINE_PREMIUM_M = 6.2
+const quotedPipelineSummaryCards = [
+  { label: 'Total book', value: '$42.8M', hint: 'In force' },
+  { label: 'Quoted pipeline', value: '$6.2M', hint: 'Open quotes' },
+  { label: 'YTD new sales', value: '$18.4M', hint: 'Bound new biz' }
+] as const
+const pipelineMixSegments = [
+  { label: 'Commercial', pct: 38 }, { label: 'Personal', pct: 29 },
+  { label: 'Benefits', pct: 22 }, { label: 'Other', pct: 11 }
+] as const
+const pipelineMixRows = computed(() =>
+  pipelineMixSegments.map((row) => ({ ...row, premiumM: (QUOTED_PIPELINE_PREMIUM_M * row.pct) / 100 }))
+)
+function formatPremiumM(n: number) { return `$${n.toFixed(2)}M` }
+
+/* ---- Quick leads widget (last 10 days) ---- */
+const { leads: quickLeadsList, recentLeads: recentQuickLeads } = useQuickLeads()
+const dashQuickLeads = computed(() => recentQuickLeads(10).slice(0, 6))
+
+/* ---- Client favorites widget ---- */
+const { favoriteIds, removeFavorite: unfavClient } = useClientFavorites()
+const _mockModule = ref<typeof import('~/data/mock-customers') | null>(null)
+onMounted(async () => {
+  _mockModule.value = await import('~/data/mock-customers')
+  // Seed some favorites if empty
+  if (favoriteIds.value.length === 0 && _mockModule.value) {
+    const seedIds = _mockModule.value.MOCK_CUSTOMERS.filter(c => c.policies.length > 0).slice(0, 4).map(c => c.id)
+    favoriteIds.value = seedIds
+  }
+})
+
+const favCustomers = computed(() => {
+  const mod = _mockModule.value
+  if (!mod) return []
+  return favoriteIds.value
+    .map(id => mod.MOCK_CUSTOMERS.find(c => c.id === id))
+    .filter((c): c is InstanceType<any> => !!c)
+    .slice(0, 8)
+})
+
+function favTotalPremium(c: any) {
+  return (c.policies || []).reduce((s: number, p: any) => s + p.premium, 0)
+}
+
+function favTierLabel(c: any) {
+  const mod = _mockModule.value
+  if (!mod) return ''
+  const t = mod.customerTier(c)
+  if (t === 'customer') return 'Customer'
+  if (t === 'lead') return 'Lead'
+  if (t === 'quick_lead') return 'Quick Lead'
+  return 'Cancelled'
+}
+
+function favTierClass(c: any) {
+  const mod = _mockModule.value
+  if (!mod) return ''
+  const t = mod.customerTier(c)
+  if (t === 'customer') return 'h2-fav-tier-customer'
+  if (t === 'lead') return 'h2-fav-tier-lead'
+  if (t === 'quick_lead') return 'h2-fav-tier-ql'
+  return 'h2-fav-tier-cancelled'
+}
+
+function favFmtMoney(n: number) {
+  return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 0 })
+}
+
+function qlPriorityMeta(p: string) {
+  if (p === 'urgent') return { label: 'Urgent', cls: 'h2-ql-pri-urgent' }
+  if (p === 'high') return { label: 'High', cls: 'h2-ql-pri-high' }
+  return { label: 'Normal', cls: 'h2-ql-pri-normal' }
+}
+
+function qlTimeAgo(iso: string) {
+  const diff = Date.now() - new Date(iso).getTime()
+  if (diff < 3600000) return `${Math.max(1, Math.round(diff / 60000))}m ago`
+  if (diff < 86400000) return `${Math.round(diff / 3600000)}h ago`
+  if (diff < 172800000) return 'Yesterday'
+  const d = new Date(iso)
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+/* ---- Sales Leads widget ---- */
+type SalesLeadSource = 'walk_in' | 'instagram' | 'facebook' | 'google' | 'referral' | 'website' | 'phone' | 'campaign'
+type SalesLead = {
+  id: string
+  name: string
+  email?: string
+  phone?: string
+  source: SalesLeadSource
+  campaignName?: string
+  lob: string
+  status: 'new' | 'contacted' | 'qualified' | 'proposal' | 'won' | 'lost'
+  assignedTo: string
+  createdAt: string
+  value?: number
+  note?: string
+}
+
+const SALES_LEAD_SOURCES: { value: SalesLeadSource | 'all'; label: string; icon: string }[] = [
+  { value: 'all', label: 'All sources', icon: 'i-heroicons-funnel' },
+  { value: 'walk_in', label: 'Walk-in', icon: 'i-heroicons-building-storefront' },
+  { value: 'instagram', label: 'Instagram', icon: 'i-heroicons-camera' },
+  { value: 'facebook', label: 'Facebook', icon: 'i-heroicons-chat-bubble-left-right' },
+  { value: 'google', label: 'Google', icon: 'i-heroicons-magnifying-glass' },
+  { value: 'referral', label: 'Referral', icon: 'i-heroicons-user-group' },
+  { value: 'website', label: 'Website', icon: 'i-heroicons-globe-alt' },
+  { value: 'phone', label: 'Phone', icon: 'i-heroicons-phone' },
+  { value: 'campaign', label: 'Campaigns', icon: 'i-heroicons-megaphone' }
+]
+
+const MOCK_SALES_LEADS: SalesLead[] = [
+  { id: 'sl-1', name: 'Ana García', email: 'ana.g@mail.com', phone: '+506 7012-3344', source: 'instagram', lob: 'Auto', status: 'new', assignedTo: 'L. Chen', createdAt: '2026-04-07T14:30:00Z', value: 2400, note: 'DM about fleet coverage' },
+  { id: 'sl-2', name: 'Marco Rodríguez', phone: '+506 8876-5500', source: 'walk_in', lob: 'Health', status: 'contacted', assignedTo: 'A. Morales', createdAt: '2026-04-07T09:15:00Z', value: 4800, note: 'Family plan, 4 members' },
+  { id: 'sl-3', name: 'Construcciones TRC', email: 'info@trc.cr', source: 'google', lob: 'General risk', status: 'qualified', assignedTo: 'R. Vega', createdAt: '2026-04-06T16:00:00Z', value: 18500, campaignName: 'Google Ads — Commercial Q2' },
+  { id: 'sl-4', name: 'Isabel Mora', email: 'isa.mora@outlook.com', source: 'facebook', lob: 'Life', status: 'new', assignedTo: 'L. Chen', createdAt: '2026-04-06T11:20:00Z', value: 3200, note: 'Responded to FB carousel ad' },
+  { id: 'sl-5', name: 'Hotel Paraíso', phone: '+506 2234-8800', source: 'referral', lob: 'General risk', status: 'proposal', assignedTo: 'A. Morales', createdAt: '2026-04-05T10:00:00Z', value: 12000, note: 'Referred by Transportes Delta' },
+  { id: 'sl-6', name: 'Laura Jiménez', email: 'laura.j@gmail.com', source: 'website', lob: 'Auto', status: 'contacted', assignedTo: 'R. Vega', createdAt: '2026-04-05T08:45:00Z', value: 1800, note: 'Online form — comparativo request' },
+  { id: 'sl-7', name: 'Farmacia Salud Plus', phone: '+506 2456-7890', source: 'campaign', campaignName: 'Spring Health Push', lob: 'Health', status: 'qualified', assignedTo: 'A. Morales', createdAt: '2026-04-04T15:30:00Z', value: 9600 },
+  { id: 'sl-8', name: 'Diego Araya', source: 'phone', phone: '+506 6100-9988', lob: 'Auto', status: 'new', assignedTo: 'L. Chen', createdAt: '2026-04-04T12:10:00Z', value: 1500 },
+  { id: 'sl-9', name: 'Retail Express', email: 'ventas@retailexp.cr', source: 'campaign', campaignName: 'Commercial Outreach Mar', lob: 'General risk', status: 'won', assignedTo: 'R. Vega', createdAt: '2026-04-03T09:00:00Z', value: 7200 },
+  { id: 'sl-10', name: 'Sofía Vargas', source: 'instagram', phone: '+506 8300-1122', lob: 'Life', status: 'contacted', assignedTo: 'L. Chen', createdAt: '2026-04-02T17:00:00Z', value: 2800, note: 'IG story reply, wants term quote' }
+]
+
+const slSourceFilter = ref<SalesLeadSource | 'all'>('all')
+const slStatusFilter = ref<string>('all')
+
+const filteredSalesLeads = computed(() => {
+  let leads = MOCK_SALES_LEADS
+  if (slSourceFilter.value !== 'all') {
+    leads = leads.filter(l => l.source === slSourceFilter.value)
+  }
+  if (slStatusFilter.value !== 'all') {
+    leads = leads.filter(l => l.status === slStatusFilter.value)
+  }
+  return leads
+})
+
+const slSourceCounts = computed(() => {
+  const counts: Record<string, number> = { all: MOCK_SALES_LEADS.length }
+  for (const l of MOCK_SALES_LEADS) {
+    counts[l.source] = (counts[l.source] || 0) + 1
+  }
+  return counts
+})
+
+function slStatusBadge(s: SalesLead['status']) {
+  switch (s) {
+    case 'new': return { label: 'New', cls: 'h2-sl-status-new' }
+    case 'contacted': return { label: 'Contacted', cls: 'h2-sl-status-contacted' }
+    case 'qualified': return { label: 'Qualified', cls: 'h2-sl-status-qualified' }
+    case 'proposal': return { label: 'Proposal', cls: 'h2-sl-status-proposal' }
+    case 'won': return { label: 'Won', cls: 'h2-sl-status-won' }
+    case 'lost': return { label: 'Lost', cls: 'h2-sl-status-lost' }
+  }
+}
+
+function slSourceLabel(s: SalesLeadSource) {
+  return SALES_LEAD_SOURCES.find(x => x.value === s)?.label ?? s
+}
+
+function slSourceIcon(s: SalesLeadSource) {
+  return SALES_LEAD_SOURCES.find(x => x.value === s)?.icon ?? 'i-heroicons-question-mark-circle'
+}
+
+function slFmtValue(v?: number) {
+  if (!v) return ''
+  return '$' + v.toLocaleString('en-US', { minimumFractionDigits: 0 })
+}
+
+/* ---- Tone helpers ---- */
+function changeToneClass(tone: WelcomeDashboardKpi['changeTone']) {
+  switch (tone) {
+    case 'positive': return 'h2-tone-pos'
+    case 'negative': return 'h2-tone-neg'
+    default: return 'h2-tone-neutral'
+  }
+}
+
+type AlertToneMeta = { icon: string; label: string; railStyle: string; iconColor: string; bg: string }
+function alertToneMeta(tone: string): AlertToneMeta {
+  switch (tone) {
+    case 'error': return { icon: 'i-heroicons-exclamation-circle', label: 'Critical', railStyle: 'background:#c13838', iconColor: 'text-rose-600', bg: 'bg-rose-50/60' }
+    case 'warning': return { icon: 'i-heroicons-exclamation-triangle', label: 'Attention', railStyle: 'background:#c27b1a', iconColor: 'text-amber-600', bg: 'bg-amber-50/60' }
+    case 'success': return { icon: 'i-heroicons-check-circle', label: 'Update', railStyle: 'background:#0f7b5f', iconColor: 'text-emerald-700', bg: 'bg-emerald-50/60' }
+    default: return { icon: 'i-heroicons-information-circle', label: 'Notice', railStyle: 'background:#8c857d', iconColor: 'text-stone-500', bg: 'bg-stone-100/60' }
+  }
+}
+const alertsWithMeta = computed(() => welcome.value.alerts.map((a) => ({ ...a, meta: alertToneMeta(a.tone) })))
+
+/* ---- Operations command bar data ---- */
+type OpsStatus = 'on-track' | 'attention' | 'warning' | 'neutral'
+type OpsMetric = { id: string; label: string; value: string; target: string; status: OpsStatus; icon: string }
+
+const ALL_OPS_INDICATORS: OpsMetric[] = [
+  { id: 'prod', label: 'Production MTD', value: '$1.24M', target: '$1.18M', status: 'on-track', icon: 'i-heroicons-banknotes' },
+  { id: 'ren', label: 'Renewals due', value: '23', target: 'next 30d', status: 'attention', icon: 'i-heroicons-arrow-path' },
+  { id: 'coll', label: 'Collections at risk', value: '$184K', target: '3 accounts', status: 'warning', icon: 'i-heroicons-exclamation-triangle' },
+  { id: 'claims', label: 'Claims pending', value: '7', target: 'avg 4.2d open', status: 'neutral', icon: 'i-heroicons-shield-exclamation' },
+  { id: 'svc', label: 'Service backlog', value: '12', target: 'SLA: 94%', status: 'on-track', icon: 'i-heroicons-inbox-stack' },
+  // Additional indicators available in catalog
+  { id: 'gwp', label: 'GWP YTD', value: '$18.4M', target: '$17.2M plan', status: 'on-track', icon: 'i-heroicons-chart-bar' },
+  { id: 'nps', label: 'NPS score', value: '72', target: '> 65 target', status: 'on-track', icon: 'i-heroicons-face-smile' },
+  { id: 'quotes', label: 'Open quotes', value: '38', target: '$6.2M pipeline', status: 'attention', icon: 'i-heroicons-document-text' },
+  { id: 'retention', label: 'Retention rate', value: '91%', target: 'trailing 12m', status: 'on-track', icon: 'i-heroicons-arrow-path-rounded-square' },
+  { id: 'ar', label: 'AR aging 60d+', value: '$42K', target: '5 accounts', status: 'warning', icon: 'i-heroicons-clock' },
+  { id: 'cancels', label: 'Cancellations MTD', value: '3', target: '$28K premium', status: 'warning', icon: 'i-heroicons-x-circle' },
+  { id: 'newbiz', label: 'New business MTD', value: '14', target: '$412K bound', status: 'on-track', icon: 'i-heroicons-sparkles' },
+]
+
+const OPS_STORAGE_KEY = 'policy-ui.dashboard.ops-indicators'
+const DEFAULT_IDS = ['prod', 'ren', 'coll', 'claims', 'svc']
+
+const activeOpsIds = ref<string[]>([...DEFAULT_IDS])
+
+onMounted(() => {
+  if (typeof localStorage !== 'undefined') {
+    try {
+      const raw = localStorage.getItem(OPS_STORAGE_KEY)
+      if (raw) {
+        const parsed = JSON.parse(raw)
+        if (Array.isArray(parsed) && parsed.length > 0) activeOpsIds.value = parsed
+      }
+    } catch { /* ignore */ }
+  }
+})
+
+function persistOpsIds() {
+  if (typeof localStorage !== 'undefined') {
+    try { localStorage.setItem(OPS_STORAGE_KEY, JSON.stringify(activeOpsIds.value)) } catch { /* */ }
+  }
+}
+
+const opsMetrics = computed(() =>
+  activeOpsIds.value
+    .map((id) => ALL_OPS_INDICATORS.find((m) => m.id === id))
+    .filter((m): m is OpsMetric => !!m)
+)
+
+const opsConfigOpen = ref(false)
+const opsRailHover = ref(false)
+const opsConfigRef = ref<HTMLElement | null>(null)
+
+function toggleOpsIndicator(id: string) {
+  const idx = activeOpsIds.value.indexOf(id)
+  if (idx >= 0) {
+    if (activeOpsIds.value.length <= 2) return // keep at least 2
+    activeOpsIds.value = activeOpsIds.value.filter((x) => x !== id)
+  } else {
+    if (activeOpsIds.value.length >= 7) return // max 7
+    activeOpsIds.value = [...activeOpsIds.value, id]
+  }
+  persistOpsIds()
+}
+
+function resetOpsIndicators() {
+  activeOpsIds.value = [...DEFAULT_IDS]
+  persistOpsIds()
+}
+
+function onOpsConfigClickOutside(e: MouseEvent) {
+  const el = opsConfigRef.value
+  if (el && opsConfigOpen.value && !el.contains(e.target as Node)) {
+    opsConfigOpen.value = false
+  }
+  // Close milestone config on outside click
+  if (milestoneConfigOpen.value && !milestoneConfigSkipClose) {
+    const target = e.target as HTMLElement
+    if (!target.closest('.h2-mile-popover') && !target.closest('.h2-mile-config-wrap')) {
+      milestoneConfigOpen.value = false
+    }
+  }
+  // Close chart metric menu on outside click
+  if (chartMetricMenuOpen.value) {
+    const target = e.target as HTMLElement
+    if (!target.closest('.h2-chart-metric-menu') && !target.closest('.h2-chart-metric-btn')) {
+      chartMetricMenuOpen.value = false
+    }
+  }
+}
+onMounted(() => document.addEventListener('click', onOpsConfigClickOutside))
+onUnmounted(() => document.removeEventListener('click', onOpsConfigClickOutside))
+
+function opsStatusDotStyle(status: OpsStatus) {
+  switch (status) {
+    case 'on-track': return 'background:#0f7b5f'
+    case 'attention': return 'background:#0d5c63'
+    case 'warning': return 'background:#c27b1a'
+    default: return 'background:#8c857d'
+  }
+}
+
+function opsCellIconStyle(status: OpsStatus) {
+  switch (status) {
+    case 'on-track': return 'background: rgba(15,123,95,0.08); color: #0f7b5f'
+    case 'attention': return 'background: rgba(1,105,111,0.08); color: #01696f'
+    case 'warning': return 'background: rgba(194,123,26,0.08); color: #c27b1a'
+    default: return 'background: rgba(0,0,0,0.04); color: #8a8a86'
+  }
+}
+
+function opsGridCols() {
+  const n = opsMetrics.value.length
+  if (n <= 3) return 'grid-cols-2 sm:grid-cols-3'
+  if (n <= 4) return 'grid-cols-2 sm:grid-cols-4'
+  if (n <= 5) return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-5'
+  if (n <= 6) return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6'
+  return 'grid-cols-2 sm:grid-cols-4 lg:grid-cols-7'
+}
+
+/* ---- Sent quotes list (dashboard widget) ---- */
+type SentQuote = {
+  id: string
+  customer: string
+  party: 'corporate' | 'personal'
+  lob: string
+  lobIcon: string
+  premium: number
+  commission: number
+  carrier: string
+  sentDate: string
+  status: 'sent' | 'viewed' | 'accepted' | 'expired' | 'declined'
+  agent: string
+}
+
+const SENT_QUOTES: SentQuote[] = [
+  { id: 'QT-2025-0088', customer: 'Transportes Delta S.A.', party: 'corporate', lob: 'Auto', lobIcon: 'i-heroicons-truck', premium: 18400, commission: 2760, carrier: 'ASSA', sentDate: '2025-04-04', status: 'sent', agent: 'Ana R.' },
+  { id: 'QT-2025-0087', customer: 'María Elena Pérez', party: 'personal', lob: 'Health', lobIcon: 'i-heroicons-heart', premium: 3200, commission: 480, carrier: 'INS', sentDate: '2025-04-03', status: 'viewed', agent: 'Ana R.' },
+  { id: 'QT-2025-0086', customer: 'Holdings Centro', party: 'corporate', lob: 'Life', lobIcon: 'i-heroicons-shield-check', premium: 42000, commission: 5040, carrier: 'Pan-American Life', sentDate: '2025-04-02', status: 'accepted', agent: 'Marco V.' },
+  { id: 'QT-2025-0085', customer: 'Roberto Jiménez Mora', party: 'personal', lob: 'Auto', lobIcon: 'i-heroicons-truck', premium: 1520, commission: 228, carrier: 'Qualitas', sentDate: '2025-04-01', status: 'sent', agent: 'Ana R.' },
+  { id: 'QT-2025-0084', customer: 'Clínica Norte', party: 'corporate', lob: 'Health', lobIcon: 'i-heroicons-heart', premium: 86000, commission: 10320, carrier: 'Blue Cross', sentDate: '2025-03-31', status: 'accepted', agent: 'Marco V.' },
+  { id: 'QT-2025-0083', customer: 'Sofía Campos Rojas', party: 'personal', lob: 'Auto', lobIcon: 'i-heroicons-truck', premium: 1380, commission: 207, carrier: 'INS', sentDate: '2025-03-30', status: 'expired', agent: 'Marco V.' },
+  { id: 'QT-2025-0082', customer: 'Retail Plaza', party: 'corporate', lob: 'General Risk', lobIcon: 'i-heroicons-building-office-2', premium: 24600, commission: 3690, carrier: 'ASSA', sentDate: '2025-03-28', status: 'declined', agent: 'Ana R.' },
+  { id: 'QT-2025-0081', customer: 'Carolina Fallas Vargas', party: 'personal', lob: 'Renter', lobIcon: 'i-heroicons-home-modern', premium: 320, commission: 48, carrier: 'ASSA', sentDate: '2025-03-27', status: 'accepted', agent: 'Marco V.' },
+  { id: 'QT-2025-0080', customer: 'Luis Andrés Solís', party: 'personal', lob: 'Life', lobIcon: 'i-heroicons-shield-check', premium: 4800, commission: 576, carrier: 'Pan-American Life', sentDate: '2025-03-25', status: 'viewed', agent: 'Ana R.' },
+  { id: 'QT-2025-0079', customer: 'Startup Labs', party: 'corporate', lob: 'Health', lobIcon: 'i-heroicons-heart', premium: 12800, commission: 1536, carrier: 'INS', sentDate: '2025-03-22', status: 'sent', agent: 'Marco V.' },
+]
+
+type QuoteSortKey = 'date-new' | 'date-old' | 'premium-high' | 'premium-low' | 'commission-high' | 'commission-low'
+const quoteSortKey = ref<QuoteSortKey>('date-new')
+const quoteFilterParty = ref<'all' | 'corporate' | 'personal'>('all')
+const quoteFilterStatus = ref<string>('all')
+const quoteFilterLob = ref<string>('all')
+
+const quoteSortOptions = [
+  { label: 'Newest first', value: 'date-new' as const },
+  { label: 'Oldest first', value: 'date-old' as const },
+  { label: 'Premium ↓', value: 'premium-high' as const },
+  { label: 'Premium ↑', value: 'premium-low' as const },
+  { label: 'Commission ↓', value: 'commission-high' as const },
+  { label: 'Commission ↑', value: 'commission-low' as const },
+]
+const quotePartyOptions = [
+  { label: 'All', value: 'all' },
+  { label: 'Corporate', value: 'corporate' },
+  { label: 'Personal', value: 'personal' },
+]
+const quoteStatusOptions = [
+  { label: 'All statuses', value: 'all' },
+  { label: 'Sent', value: 'sent' },
+  { label: 'Viewed', value: 'viewed' },
+  { label: 'Accepted', value: 'accepted' },
+  { label: 'Expired', value: 'expired' },
+  { label: 'Declined', value: 'declined' },
+]
+const quoteLobOptions = computed(() => {
+  const lobs = [...new Set(SENT_QUOTES.map(q => q.lob))]
+  return [{ label: 'All lines', value: 'all' }, ...lobs.map(l => ({ label: l, value: l }))]
+})
+
+const filteredSentQuotes = computed(() => {
+  let list = [...SENT_QUOTES]
+
+  if (quoteFilterParty.value !== 'all') list = list.filter(q => q.party === quoteFilterParty.value)
+  if (quoteFilterStatus.value !== 'all') list = list.filter(q => q.status === quoteFilterStatus.value)
+  if (quoteFilterLob.value !== 'all') list = list.filter(q => q.lob === quoteFilterLob.value)
+
+  switch (quoteSortKey.value) {
+    case 'date-new': list.sort((a, b) => b.sentDate.localeCompare(a.sentDate)); break
+    case 'date-old': list.sort((a, b) => a.sentDate.localeCompare(b.sentDate)); break
+    case 'premium-high': list.sort((a, b) => b.premium - a.premium); break
+    case 'premium-low': list.sort((a, b) => a.premium - b.premium); break
+    case 'commission-high': list.sort((a, b) => b.commission - a.commission); break
+    case 'commission-low': list.sort((a, b) => a.commission - b.commission); break
+  }
+
+  return list
+})
+
+const quoteStatusMeta: Record<string, { label: string; cls: string }> = {
+  sent:     { label: 'Sent',     cls: 'h2-qs-sent' },
+  viewed:   { label: 'Viewed',   cls: 'h2-qs-viewed' },
+  accepted: { label: 'Accepted', cls: 'h2-qs-accepted' },
+  expired:  { label: 'Expired',  cls: 'h2-qs-expired' },
+  declined: { label: 'Declined', cls: 'h2-qs-declined' },
+}
+
+/* ---- Time ---- */
+const timeGreeting = computed(() => {
+  const h = new Date().getHours()
+  if (h < 12) return 'Good morning'
+  if (h < 17) return 'Good afternoon'
+  return 'Good evening'
+})
+const currentDate = computed(() =>
+  new Intl.DateTimeFormat('en-US', { weekday: 'long', month: 'long', day: 'numeric' }).format(new Date())
+)
+
+/* ---- Calendar widget ---- */
+type CalEventType = 'meeting' | 'renewal' | 'claim' | 'payment' | 'reminder' | 'threshold'
+
+interface CalEvent {
+  id: string
+  title: string
+  time: string
+  type: CalEventType
+  source?: 'gmail' | 'system' | 'manual'
+  customer?: string
+  detail?: string
+  urgent?: boolean
+}
+
+const calEventTypeMeta: Record<CalEventType, { label: string; color: string; icon: string }> = {
+  meeting:   { label: 'Meetings', color: '#01696f', icon: 'i-heroicons-calendar-days' },
+  renewal:   { label: 'Renewals', color: '#7c3aed', icon: 'i-heroicons-arrow-path' },
+  claim:     { label: 'Claims', color: '#c13838', icon: 'i-heroicons-shield-exclamation' },
+  payment:   { label: 'Payments', color: '#c27b1a', icon: 'i-heroicons-banknotes' },
+  reminder:  { label: 'Reminders', color: '#0f7b5f', icon: 'i-heroicons-bell' },
+  threshold: { label: 'Alerts', color: '#be185d', icon: 'i-heroicons-exclamation-triangle' },
+}
+
+const todayEvents: CalEvent[] = [
+  { id: 'c1', title: 'Renewal review — Constructora Delta', time: '9:00 AM', type: 'renewal', source: 'system', customer: 'Constructora Delta S.A.', detail: 'Policy expires Jul 15. Premium $55K, 3 yr client.', urgent: true },
+  { id: 'c2', title: 'Call with María Pérez', time: '10:30 AM', type: 'meeting', source: 'gmail', customer: 'María Pérez', detail: 'Auto quote follow-up. Synced from Gmail.' },
+  { id: 'c3', title: 'Unpaid premium — Farmacia Salud', time: '11:00 AM', type: 'payment', source: 'system', customer: 'Farmacia Salud', detail: '45 days overdue. $12,800 group life.', urgent: true },
+  { id: 'c4', title: 'Claim status update — Hotel Pacífico', time: '1:00 PM', type: 'claim', source: 'system', customer: 'Hotel Pacífico', detail: 'Fire claim #CL-2891. Adjuster report due.' },
+  { id: 'c5', title: 'Client crossed $100K premium', time: '2:00 PM', type: 'threshold', source: 'system', customer: 'Banco Regional', detail: 'Total book now $186K. VIP follow-up recommended.' },
+  { id: 'c6', title: 'Prepare renewal proposal', time: '3:30 PM', type: 'reminder', source: 'manual', detail: 'Transportes del Sur fleet policy. Get 3 comparative quotes.' },
+  { id: 'c7', title: 'Team sync — weekly pipeline', time: '4:00 PM', type: 'meeting', source: 'gmail', detail: 'Google Meet link attached. All agents.' },
+  { id: 'c8', title: '5 renewals due next 7 days', time: '—', type: 'renewal', source: 'system', detail: 'Batch alert: review upcoming expirations.', urgent: true },
+]
+
+const filteredCalEvents = computed(() => todayEvents)
+
+function calEventDotStyle(type: CalEventType) {
+  return `background: ${calEventTypeMeta[type].color}`
+}
+
+/* ---- Segment colors (petroleum palette) ---- */
+/* Segment colors as inline styles (Tailwind v4 doesn't resolve teal) */
+const segColorStyles = ['background:#0d5c63', 'background:#1a8a8a', 'background:#2dd4bf', 'background:#a8a29e']
+const segDotStyles = ['background:#0d5c63;outline:2px solid rgba(13,92,99,0.2);outline-offset:1px', 'background:#1a8a8a;outline:2px solid rgba(26,138,138,0.2);outline-offset:1px', 'background:#2dd4bf;outline:2px solid rgba(45,212,191,0.2);outline-offset:1px', 'background:#a8a29e;outline:2px solid rgba(168,162,158,0.2);outline-offset:1px']
+
+/* ---- Drafts detection ---- */
+interface DraftEntry {
+  key: string
+  label: string
+  icon: string
+  route: string
+  age: string
+}
+
+const DRAFT_SOURCES = [
+  { key: 'policy-registration-draft-v1', label: 'Policy registration', icon: 'i-heroicons-document-text', route: '/registration/policy' },
+  { key: 'policy-ui-quote-session-v1', label: 'Quote comparison', icon: 'i-heroicons-document-magnifying-glass', route: '/quotes/compare' },
+  { key: 'policy-ui-customer-profile-vault-v1', label: 'Customer profile', icon: 'i-heroicons-user-circle', route: '/onboarding/solicitud' },
+]
+
+const activeDrafts = ref<DraftEntry[]>([])
+
+function draftAge(raw: any): string {
+  const ts = raw?.updatedAt || raw?.touchedAt || raw?.createdAt
+  if (!ts || typeof ts !== 'number') return 'Unknown'
+  const mins = Math.floor((Date.now() - ts) / 60000)
+  if (mins < 1) return 'Just now'
+  if (mins < 60) return `${mins}m ago`
+  const hrs = Math.floor(mins / 60)
+  if (hrs < 24) return `${hrs}h ago`
+  const days = Math.floor(hrs / 24)
+  return `${days}d ago`
+}
+
+onMounted(() => {
+  if (typeof localStorage === 'undefined') return
+  const found: DraftEntry[] = []
+  for (const src of DRAFT_SOURCES) {
+    try {
+      const raw = localStorage.getItem(src.key)
+      if (raw) {
+        const parsed = JSON.parse(raw)
+        if (parsed && typeof parsed === 'object' && Object.keys(parsed).length > 0) {
+          found.push({ ...src, age: draftAge(parsed) })
+        }
+      }
+    } catch { /* ignore corrupt entries */ }
+  }
+  activeDrafts.value = found
+})
+
+function removeDraft(key: string) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.removeItem(key)
+  }
+  activeDrafts.value = activeDrafts.value.filter(d => d.key !== key)
+}
+</script>
+
 <template>
-  <UContainer class="py-10">
-    <UCard>
-      <template #header>
-        <h1 class="text-2xl font-bold">
-        </h1>
+  <div class="h2 relative min-h-full pb-12">
+
+    <HomeDashboardWidgetBlocks
+      :widget-order="widgetOrder"
+      :widgets="widgets"
+      :layout-unlocked="layoutUnlocked"
+      :dragging-widget="draggingWidget"
+      @drag-start="onDragStart"
+      @drag-end="onDragEnd"
+      @drop="onDropSection"
+    >
+      <!-- ==================== HERO: Operations Command Bar ==================== -->
+      <template #hero>
+        <div class="space-y-4">
+          <!-- Slim greeting strip -->
+          <div class="flex flex-wrap items-center justify-between gap-3 px-1">
+            <div class="flex items-baseline gap-3">
+              <h1 class="text-xl font-semibold tracking-tight text-[var(--h2-fg)]">
+                {{ timeGreeting }}, {{ welcome.greetingName }}
+              </h1>
+              <span class="text-xs text-[var(--h2-muted)]">{{ currentDate }}</span>
+            </div>
+            <!-- Mobile-only: action buttons (on desktop these live in the topbar) -->
+            <div class="flex gap-2 sm:hidden">
+              <NuxtLink to="/onboarding">
+                <UButton size="sm" color="neutral" variant="outline" class="h2-btn-outline" icon="i-heroicons-arrow-trending-up">
+                  Pipeline
+                </UButton>
+              </NuxtLink>
+              <NuxtLink to="/sales/quick-lead">
+                <UButton size="sm" color="neutral" variant="soft" class="h2-btn-outline" icon="i-heroicons-bolt">
+                  Quick Lead
+                </UButton>
+              </NuxtLink>
+              <NuxtLink to="/quotes">
+                <UButton size="sm" color="primary" class="h2-btn-primary" icon="i-heroicons-document-text">
+                  New quote
+                </UButton>
+              </NuxtLink>
+            </div>
+          </div>
+
+          <!-- Operations rail: configurable indicator strip -->
+          <div
+            class="h2-ops-rail-wrap relative"
+            @mouseenter="opsRailHover = true"
+            @mouseleave="opsRailHover = false"
+          >
+            <div class="h2-card h2-card-flush grid" :class="opsGridCols()">
+              <div
+                v-for="(op, i) in opsMetrics"
+                :key="op.id"
+                class="h2-ops-cell"
+                :class="[
+                  i < opsMetrics.length - 1 ? 'h2-cell-border' : '',
+                  i === 0 ? 'h2-ops-cell--lead' : ''
+                ]"
+              >
+                <div class="h2-ops-cell-icon" :style="opsCellIconStyle(op.status)">
+                  <UIcon :name="op.icon" style="width: 15px; height: 15px;" />
+                </div>
+                <div class="h2-ops-cell-body">
+                  <p class="h2-ops-cell-label">{{ op.label }}</p>
+                  <p class="h2-ops-cell-value">{{ op.value }}</p>
+                  <div class="h2-ops-cell-target">
+                    <span class="h2-ops-dot" :style="opsStatusDotStyle(op.status)" />
+                    <span>{{ op.target }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Widget config button — appears on hover, bottom-right corner -->
+            <Transition
+              enter-active-class="transition duration-150 ease-out"
+              enter-from-class="opacity-0 scale-90"
+              enter-to-class="opacity-100 scale-100"
+              leave-active-class="transition duration-100 ease-in"
+              leave-from-class="opacity-100"
+              leave-to-class="opacity-0 scale-90"
+            >
+              <div
+                v-show="opsRailHover || opsConfigOpen"
+                ref="opsConfigRef"
+                class="absolute -bottom-2 -right-2 z-20"
+              >
+                <button
+                  type="button"
+                  class="h2-ops-config-btn"
+                  title="Configure indicators"
+                  @click.stop="opsConfigOpen = !opsConfigOpen"
+                >
+                  <UIcon name="i-heroicons-squares-plus" style="width: 14px; height: 14px;" />
+                </button>
+
+                <!-- Config popover -->
+                <Transition
+                  enter-active-class="transition duration-150 ease-out"
+                  enter-from-class="opacity-0 scale-95 translate-y-1"
+                  enter-to-class="opacity-100 scale-100 translate-y-0"
+                  leave-active-class="transition duration-100 ease-in"
+                  leave-from-class="opacity-100"
+                  leave-to-class="opacity-0 scale-95"
+                >
+                  <div v-show="opsConfigOpen" class="h2-ops-config-popover">
+                    <div class="h2-ops-config-head">
+                      <span>Indicators</span>
+                      <button type="button" class="h2-ops-config-reset" @click="resetOpsIndicators">Reset</button>
+                    </div>
+                    <div class="h2-ops-config-hint">
+                      Select 2–7 KPIs for your command strip.
+                    </div>
+                    <ul class="h2-ops-config-list">
+                      <li
+                        v-for="ind in ALL_OPS_INDICATORS"
+                        :key="ind.id"
+                        class="h2-ops-config-item"
+                        :class="activeOpsIds.includes(ind.id) ? 'h2-ops-config-item-on' : ''"
+                        @click="toggleOpsIndicator(ind.id)"
+                      >
+                        <div class="h2-ops-config-check">
+                          <UIcon
+                            v-if="activeOpsIds.includes(ind.id)"
+                            name="i-heroicons-check"
+                            style="width: 12px; height: 12px;"
+                          />
+                        </div>
+                        <UIcon :name="ind.icon" style="width: 14px; height: 14px; opacity: 0.5;" />
+                        <div class="min-w-0 flex-1">
+                          <p class="text-[12px] font-medium text-[var(--text-primary)] truncate">{{ ind.label }}</p>
+                          <p class="text-[10px] text-[var(--text-muted)]">{{ ind.value }} · {{ ind.target }}</p>
+                        </div>
+                        <span
+                          class="h2-ops-config-dot"
+                          :style="opsStatusDotStyle(ind.status)"
+                        />
+                      </li>
+                    </ul>
+                    <div class="h2-ops-config-footer">
+                      {{ activeOpsIds.length }} of {{ ALL_OPS_INDICATORS.length }} selected
+                    </div>
+                  </div>
+                </Transition>
+              </div>
+            </Transition>
+          </div>
+        </div>
       </template>
 
-    </UCard>
-  </UContainer>
+      <!-- ==================== MILESTONE ==================== -->
+      <template #milestone>
+        <div class="h2-milestone-card relative group/mile">
+          <div class="h2-milestone-top">
+            <div class="flex items-center gap-2.5">
+              <div class="h2-milestone-badge" :style="`--ms-color: ${milestoneStatus.color}`">
+                <UIcon :name="milestoneStatus.icon" style="width: 15px; height: 15px;" />
+              </div>
+              <div>
+                <span class="h2-milestone-status" :style="`color: ${milestoneStatus.color}`">{{ milestoneStatus.label }}</span>
+                <span class="h2-milestone-tag">MTD plan</span>
+              </div>
+            </div>
+
+            <!-- Overall progress bar -->
+            <div class="h2-milestone-bar-wrap">
+              <div class="h2-milestone-bar-track">
+                <div class="h2-milestone-bar-fill" :style="`width: ${Math.min(milestoneAvgPct, 120) / 1.2}%; background: ${milestoneStatus.color}`" />
+              </div>
+              <span class="h2-milestone-bar-pct" :style="`color: ${milestoneStatus.color}`">{{ milestoneAvgPct }}%</span>
+            </div>
+          </div>
+
+          <!-- Metric pills + config -->
+          <div class="h2-milestone-bottom">
+            <div class="h2-milestone-metrics">
+              <div v-for="metric in activeMilestones" :key="metric.id" class="h2-milestone-pill">
+                <span class="h2-milestone-pill-label">{{ metric.label }}</span>
+                <span class="h2-milestone-pill-val">{{ metric.actual }}</span>
+                <span class="h2-milestone-pill-sep">/</span>
+                <span class="h2-milestone-pill-target">{{ metric.target }}</span>
+                <span
+                  class="h2-milestone-pill-pct"
+                  :class="metric.pct >= 100 ? 'h2-milestone-pill-pct--good' : metric.pct >= 85 ? 'h2-milestone-pill-pct--close' : 'h2-milestone-pill-pct--behind'"
+                >{{ metric.pct }}%</span>
+              </div>
+            </div>
+
+            <!-- Config button -->
+            <div class="h2-mile-config-wrap relative">
+            <button
+              type="button"
+              class="h2-mile-config-btn"
+              title="Configure metrics"
+              @mousedown.prevent="onMilestoneConfigClick"
+            >
+              <UIcon name="i-heroicons-cog-6-tooth" style="width: 12px; height: 12px;" />
+            </button>
+            <div v-show="milestoneConfigOpen" class="h2-mile-popover">
+              <p class="text-[11px] font-semibold uppercase tracking-wider text-[#8a8a86] px-3 pt-3 pb-1">Track (1–4 metrics)</p>
+              <ul class="pb-2">
+                <li
+                  v-for="m in MILESTONE_METRICS"
+                  :key="m.id"
+                  class="h2-mile-item"
+                  :class="activeMilestoneIds.includes(m.id) ? 'h2-mile-item-on' : ''"
+                  @click="toggleMilestoneMetric(m.id)"
+                >
+                  <div class="h2-mile-check" :class="activeMilestoneIds.includes(m.id) ? 'h2-mile-check-on' : ''">
+                    <UIcon v-if="activeMilestoneIds.includes(m.id)" name="i-heroicons-check" style="width: 10px; height: 10px;" />
+                  </div>
+                  <span class="text-[12px] font-medium text-[var(--text-primary)]">{{ m.label }}</span>
+                  <span class="ml-auto text-[11px] tabular-nums text-[#8a8a86]">{{ m.actual }} / {{ m.target }}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- ==================== PERFORMANCE KPIs ==================== -->
+      <template #performance>
+        <section class="space-y-4" aria-labelledby="perf-h2">
+          <div class="h2-section-header">
+            <h2 id="perf-h2" class="h2-section-title">Today at a glance</h2>
+            <p class="h2-section-sub">Headline operational metrics</p>
+          </div>
+
+          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            <div
+              v-for="k in welcome.performanceKpis"
+              :key="k.id"
+              class="h2-card group overflow-hidden p-5 transition-all duration-150 hover:shadow-md"
+            >
+              <p class="text-[11px] font-semibold uppercase tracking-[0.06em] text-[#8a8a86]">{{ k.label }}</p>
+              <div class="mt-2 flex items-end gap-2.5">
+                <p class="text-[22px] font-semibold tabular-nums tracking-tight text-[#1a1a18]" style="font-variant-numeric: tabular-nums;">
+                  {{ k.value }}
+                </p>
+                <p v-if="k.change" class="mb-0.5 text-xs font-semibold" :class="changeToneClass(k.changeTone)">
+                  {{ k.change }}
+                </p>
+              </div>
+              <p v-if="k.hint" class="mt-1 text-[11px] leading-snug text-[var(--h2-muted)]">{{ k.hint }}</p>
+
+              <div class="mt-3 h-7 w-full">
+                <svg class="h-full w-full" viewBox="0 0 112 32" fill="none" aria-hidden="true">
+                  <defs>
+                    <linearGradient :id="`sg2-${k.id}`" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stop-color="var(--h2-accent)" stop-opacity="0.16" />
+                      <stop offset="100%" stop-color="var(--h2-accent)" stop-opacity="0" />
+                    </linearGradient>
+                  </defs>
+                  <path v-if="kpiSparkSeries[k.id]" :d="smoothSparklineArea(kpiSparkSeries[k.id]!)" :fill="`url(#sg2-${k.id})`" />
+                  <path
+                    v-if="kpiSparkSeries[k.id]" :d="smoothSparklinePath(kpiSparkSeries[k.id]!)"
+                    fill="none" stroke="var(--h2-accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
+                    class="opacity-60 transition-opacity group-hover:opacity-100"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== TASKS & ALERTS ==================== -->
+      <template #tasks_alerts>
+        <div class="grid gap-4 lg:grid-cols-2 lg:items-stretch">
+          <!-- Tasks -->
+          <div class="h2-card overflow-hidden flex flex-col">
+            <div class="h2-card-header">
+              <div class="h2-icon-box"><UIcon name="i-heroicons-clipboard-document-check" class="h-4 w-4" /></div>
+              <div class="flex-1 min-w-0">
+                <p class="text-[14px] font-semibold text-[#1a1a18]">Today's tasks</p>
+                <p class="text-[13px] text-[#8a8a86]">{{ completedTaskCount }}/{{ totalTaskCount }} done</p>
+              </div>
+              <button type="button" class="h2-task-add-btn" title="Add task" @click="addingTask = !addingTask">
+                <UIcon name="i-heroicons-plus" style="width: 14px; height: 14px;" />
+              </button>
+            </div>
+
+            <!-- Progress bar -->
+            <div class="h2-task-progress">
+              <div
+                class="h2-task-progress-fill"
+                :style="`width: ${totalTaskCount > 0 ? (completedTaskCount / totalTaskCount * 100) : 0}%`"
+              />
+            </div>
+
+            <!-- Quick add -->
+            <Transition
+              enter-active-class="transition-all duration-200 ease-out"
+              enter-from-class="opacity-0 max-h-0"
+              enter-to-class="opacity-100 max-h-14"
+              leave-active-class="transition-all duration-150 ease-in"
+              leave-from-class="opacity-100 max-h-14"
+              leave-to-class="opacity-0 max-h-0"
+            >
+              <div v-if="addingTask" class="h2-task-add-row">
+                <input
+                  v-model="newTaskText"
+                  type="text"
+                  class="h2-task-add-input"
+                  placeholder="What needs doing?"
+                  @keydown.enter="addQuickTask"
+                  @keydown.escape="addingTask = false"
+                />
+                <button type="button" class="h2-task-add-submit" :disabled="!newTaskText.trim()" @click="addQuickTask">Add</button>
+              </div>
+            </Transition>
+
+            <!-- Task list -->
+            <ul class="h2-list flex-1">
+              <TransitionGroup
+                enter-active-class="transition-all duration-200 ease-out"
+                enter-from-class="opacity-0 -translate-x-2"
+                enter-to-class="opacity-100 translate-x-0"
+                leave-active-class="transition-all duration-200 ease-in"
+                leave-from-class="opacity-100 max-h-12"
+                leave-to-class="opacity-0 max-h-0"
+              >
+                <li
+                  v-for="task in dashTasks"
+                  :key="task.id"
+                  class="h2-task-item group/task"
+                >
+                  <button
+                    type="button"
+                    class="h2-task-checkbox"
+                    :class="task.done ? 'h2-task-checkbox-done' : ''"
+                    @click="toggleTask(task.id)"
+                  >
+                    <UIcon v-if="task.done" name="i-heroicons-check" style="width: 10px; height: 10px;" />
+                  </button>
+                  <span
+                    class="h2-task-text flex-1"
+                    :class="{
+                      'h2-task-done': task.done,
+                      'font-medium text-[var(--h2-fg)]': task.emphasis && !task.done,
+                      'text-[var(--h2-fg-secondary)]': !task.emphasis && !task.done,
+                    }"
+                  >{{ task.title }}</span>
+                  <button
+                    v-if="task.id.startsWith('user-task-')"
+                    type="button"
+                    class="h2-task-remove"
+                    title="Remove"
+                    @click="removeTask(task.id)"
+                  >
+                    <UIcon name="i-heroicons-x-mark" style="width: 12px; height: 12px;" />
+                  </button>
+                </li>
+              </TransitionGroup>
+            </ul>
+          </div>
+
+          <!-- Alerts -->
+          <div class="h2-card overflow-hidden flex flex-col">
+            <div class="h2-card-header">
+              <div class="h2-icon-box h2-icon-box-error"><UIcon name="i-heroicons-bell-alert" class="h-4 w-4" /></div>
+              <div class="flex-1 min-w-0">
+                <p class="text-[14px] font-semibold text-[#1a1a18]">Alerts</p>
+                <p class="text-[13px] text-[#8a8a86]">{{ visibleAlerts.length }} exceptions</p>
+              </div>
+              <button
+                v-if="dashAlertsDismissed.size > 0"
+                type="button"
+                class="h2-alert-restore"
+                @click="dashAlertsDismissed.clear()"
+              >
+                Restore all
+              </button>
+            </div>
+            <div v-if="visibleAlerts.length === 0" class="px-6 py-8 text-center flex-1 flex flex-col items-center justify-center">
+              <UIcon name="i-heroicons-check-circle" style="width: 28px; height: 28px; color: #0f7b5f; margin: 0 auto 6px;" />
+              <p class="text-[13px] text-[var(--h2-muted)]">All clear — no pending alerts</p>
+            </div>
+            <div v-else class="space-y-px px-3 pb-3 flex-1">
+              <TransitionGroup
+                enter-active-class="transition-all duration-200 ease-out"
+                enter-from-class="opacity-0 translate-x-2"
+                enter-to-class="opacity-100 translate-x-0"
+                leave-active-class="transition-all duration-200 ease-in"
+                leave-from-class="opacity-100 max-h-24"
+                leave-to-class="opacity-0 max-h-0"
+              >
+                <div
+                  v-for="alert in visibleAlerts"
+                  :key="alert.id"
+                  class="h2-alert-row group/alert"
+                  :class="alert.meta.bg"
+                >
+                  <!-- Status rail -->
+                  <div class="absolute inset-y-1.5 left-0 rounded-full" :style="alert.meta.railStyle + ';width:3px'" />
+                  <UIcon :name="alert.meta.icon" class="mt-0.5 h-4 w-4 shrink-0 pl-2" :class="alert.meta.iconColor" />
+                  <div class="min-w-0 flex-1">
+                    <p class="text-[10px] font-bold uppercase tracking-wider" :class="alert.meta.iconColor">{{ alert.meta.label }}</p>
+                    <p class="mt-0.5 text-[13px] leading-snug text-[var(--h2-fg)]">{{ alert.message }}</p>
+                  </div>
+                  <button
+                    type="button"
+                    class="h2-alert-dismiss"
+                    title="Dismiss"
+                    @click="dismissAlert(alert.id)"
+                  >
+                    <UIcon name="i-heroicons-x-mark" style="width: 12px; height: 12px;" />
+                  </button>
+                </div>
+              </TransitionGroup>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- ==================== CHARTS ==================== -->
+      <template #charts>
+        <section class="grid gap-4 lg:grid-cols-5" aria-labelledby="ch-h2">
+          <!-- Main chart -->
+          <div class="lg:col-span-3 h2-card overflow-hidden">
+            <!-- Chart toolbar -->
+            <div class="h2-chart-toolbar">
+              <div class="flex items-center gap-2 min-w-0">
+                <!-- Metric selector -->
+                <div class="relative">
+                  <button type="button" class="h2-chart-metric-btn" @click.stop="chartMetricMenuOpen = !chartMetricMenuOpen">
+                    <span class="font-semibold text-[13px] text-[var(--h2-fg)]">{{ selectedChartMetric.label }}</span>
+                    <UIcon name="i-heroicons-chevron-down" style="width: 12px; height: 12px; color: #8a8a86;" />
+                  </button>
+                  <Transition
+                    enter-active-class="transition duration-150 ease-out"
+                    enter-from-class="opacity-0 scale-95 -translate-y-1"
+                    enter-to-class="opacity-100 scale-100 translate-y-0"
+                    leave-active-class="transition duration-100 ease-in"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0 scale-95"
+                  >
+                    <div v-if="chartMetricMenuOpen" class="h2-chart-metric-menu">
+                      <button
+                        v-for="cm in CHART_METRICS"
+                        :key="cm.id"
+                        type="button"
+                        class="h2-chart-metric-item"
+                        :class="activeChartMetric === cm.id ? 'h2-chart-metric-item-on' : ''"
+                        @click="activeChartMetric = cm.id; chartMetricMenuOpen = false"
+                      >
+                        <span class="text-[12px]">{{ cm.label }}</span>
+                        <span class="text-[11px] tabular-nums text-[#8a8a86]">{{ cm.data6m[cm.data6m.length - 1]?.display }}</span>
+                      </button>
+                    </div>
+                  </Transition>
+                </div>
+                <!-- Change badge -->
+                <span :class="selectedChartMetric.changeTone === 'positive' ? 'h2-badge-success' : 'h2-badge-warning'">{{ selectedChartMetric.change }}</span>
+                <span class="font-mono text-[14px] font-bold tabular-nums text-[var(--h2-fg)] hidden sm:inline">{{ chartLatest.display }}</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <!-- Chart type toggle -->
+                <div class="h2-chart-range">
+                  <button type="button" class="h2-chart-type-btn" :class="activeChartType === 'area' ? 'h2-chart-range-on' : ''" title="Area" @click="activeChartType = 'area'">
+                    <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 8L4 4L7 6L13 1V9H1V8Z" fill="currentColor" opacity="0.3"/><path d="M1 8L4 4L7 6L13 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                  </button>
+                  <button type="button" class="h2-chart-type-btn" :class="activeChartType === 'line' ? 'h2-chart-range-on' : ''" title="Line" @click="activeChartType = 'line'">
+                    <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 8L4 4L7 6L13 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                  </button>
+                  <button type="button" class="h2-chart-type-btn" :class="activeChartType === 'bar' ? 'h2-chart-range-on' : ''" title="Bar" @click="activeChartType = 'bar'">
+                    <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><rect x="1" y="5" width="2.5" height="5" rx="0.5" fill="currentColor"/><rect x="5" y="2" width="2.5" height="8" rx="0.5" fill="currentColor"/><rect x="9" y="0" width="2.5" height="10" rx="0.5" fill="currentColor"/></svg>
+                  </button>
+                </div>
+                <div class="h2-chart-sep" />
+                <!-- Time range -->
+                <div class="h2-chart-range">
+                  <button type="button" class="h2-chart-range-btn" :class="chartTimeRange === '3m' ? 'h2-chart-range-on' : ''" @click="chartTimeRange = '3m'">3M</button>
+                  <button type="button" class="h2-chart-range-btn" :class="chartTimeRange === '6m' ? 'h2-chart-range-on' : ''" @click="chartTimeRange = '6m'">6M</button>
+                  <button type="button" class="h2-chart-range-btn" :class="chartTimeRange === '12m' ? 'h2-chart-range-on' : ''" @click="chartTimeRange = '12m'">12M</button>
+                </div>
+              </div>
+            </div>
+
+            <!-- Chart canvas -->
+            <div class="px-2 pb-2 pt-1">
+              <div class="overflow-hidden rounded-lg bg-[var(--h2-surface-inset)] ring-1 ring-[var(--h2-border-strong)]">
+                <svg class="h-auto w-full" :viewBox="`0 0 ${chartSvgModel.viewW} ${chartSvgModel.viewH}`" role="img">
+                  <title>{{ selectedChartMetric.label }} trend</title>
+                  <defs>
+                    <linearGradient id="chartGrad" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stop-color="var(--h2-accent)" stop-opacity="0.2" />
+                      <stop offset="60%" stop-color="var(--h2-accent)" stop-opacity="0.04" />
+                      <stop offset="100%" stop-color="var(--h2-accent)" stop-opacity="0" />
+                    </linearGradient>
+                  </defs>
+                  <!-- Grid -->
+                  <line v-for="(gy, i) in chartSvgModel.gridYs" :key="'g'+i" class="stroke-[var(--h2-border)]" stroke-width="1"
+                    :x1="chartSvgModel.padX" :y1="gy" :x2="chartSvgModel.padX + chartSvgModel.innerW" :y2="gy" />
+
+                  <!-- Area chart -->
+                  <template v-if="activeChartType === 'area'">
+                    <path :d="chartSvgModel.areaD" fill="url(#chartGrad)" class="transition-all duration-500" />
+                    <path :d="chartSvgModel.lineD" fill="none" stroke="var(--h2-accent)" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" class="transition-all duration-500" />
+                    <g v-for="(pt, i) in chartSvgModel.points" :key="'p'+i">
+                      <circle :cx="pt.x" :cy="pt.y" r="4.5" fill="var(--h2-surface)" stroke="var(--h2-accent)" stroke-width="2" class="transition-all duration-500" />
+                    </g>
+                  </template>
+
+                  <!-- Line chart -->
+                  <template v-if="activeChartType === 'line'">
+                    <path :d="chartSvgModel.lineD" fill="none" stroke="var(--h2-accent)" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" class="transition-all duration-500" />
+                    <g v-for="(pt, i) in chartSvgModel.points" :key="'lp'+i">
+                      <circle :cx="pt.x" :cy="pt.y" r="3.5" fill="var(--h2-accent)" class="transition-all duration-500" />
+                    </g>
+                  </template>
+
+                  <!-- Bar chart -->
+                  <template v-if="activeChartType === 'bar'">
+                    <rect
+                      v-for="(bar, i) in chartSvgModel.bars"
+                      :key="'b'+i"
+                      :x="bar.x" :y="bar.y" :width="bar.w" :height="bar.h"
+                      rx="3"
+                      fill="var(--h2-accent)"
+                      :opacity="0.5 + (i / chartSvgModel.bars.length) * 0.5"
+                      class="transition-all duration-500"
+                    />
+                  </template>
+                </svg>
+                <!-- X-axis labels -->
+                <div class="flex justify-between border-t border-[var(--h2-border)] px-3 pb-2 pt-1.5">
+                  <div v-for="row in chartData" :key="row.m" class="flex-1 text-center">
+                    <p class="font-mono text-[10px] font-semibold tabular-nums text-[var(--h2-fg)]">{{ row.display }}</p>
+                    <p class="text-[10px] text-[var(--h2-muted)]">{{ row.m }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Pipeline -->
+          <div class="lg:col-span-2 h2-card flex flex-col overflow-hidden">
+            <div class="flex items-center justify-between px-5 pt-5">
+              <div>
+                <h2 class="text-[14px] font-semibold text-[#1a1a18]">Pipeline</h2>
+                <p class="mt-0.5 text-[11px] text-[var(--h2-muted)]">Book, open quotes & YTD</p>
+              </div>
+              <!-- Pipeline view toggle -->
+              <div class="h2-chart-range">
+                <button type="button" class="h2-chart-range-btn" :class="pipelineView === 'summary' ? 'h2-chart-range-on' : ''" @click="pipelineView = 'summary'">Mix</button>
+                <button type="button" class="h2-chart-range-btn" :class="pipelineView === 'stage' ? 'h2-chart-range-on' : ''" @click="pipelineView = 'stage'">Stage</button>
+                <button type="button" class="h2-chart-range-btn" :class="pipelineView === 'lob' ? 'h2-chart-range-on' : ''" @click="pipelineView = 'lob'">LOB</button>
+              </div>
+            </div>
+
+            <!-- Summary trio (always shown) -->
+            <div class="mx-4 mt-4 grid grid-cols-3 overflow-hidden rounded-lg ring-1 ring-[var(--h2-border-strong)]">
+              <div v-for="item in quotedPipelineSummaryCards" :key="item.label" class="bg-[var(--h2-surface-inset)] px-3 py-3 text-center ring-1 ring-[var(--h2-border)]">
+                <p class="font-mono text-base font-bold tabular-nums text-[var(--h2-fg)]">{{ item.value }}</p>
+                <p class="mt-0.5 text-[10px] font-medium uppercase tracking-wider text-[var(--h2-muted)]">{{ item.label }}</p>
+              </div>
+            </div>
+
+            <!-- Pipeline sub-views -->
+            <div class="mt-4 flex-1 px-5 pb-5">
+              <!-- Mix view (segment breakdown) -->
+              <template v-if="pipelineView === 'summary'">
+                <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">Segment mix</p>
+                <div class="mt-2.5 flex h-2.5 w-full overflow-hidden rounded-md" style="outline:1px solid var(--h2-border)">
+                  <div
+                    v-for="(row, i) in pipelineMixRows"
+                    :key="row.label"
+                    class="h-full cursor-pointer transition-all duration-500"
+                    :style="segColorStyles[i] + ';width:' + row.pct + '%;opacity:' + (hoveredSegment === null || hoveredSegment === i ? '1' : '0.3')"
+                    :title="`${row.label}: ${row.pct}%`"
+                    @mouseenter="hoveredSegment = i"
+                    @mouseleave="hoveredSegment = null"
+                  />
+                </div>
+                <div class="mt-3.5 space-y-2">
+                  <div
+                    v-for="(row, i) in pipelineMixRows"
+                    :key="row.label"
+                    class="flex items-center gap-2 rounded-md px-1 py-0.5 -mx-1 cursor-pointer transition-all duration-150"
+                    :style="hoveredSegment === i ? 'background: rgba(0,0,0,0.03)' : ''"
+                    :class="hoveredSegment !== null && hoveredSegment !== i ? 'opacity-40' : ''"
+                    @mouseenter="hoveredSegment = i"
+                    @mouseleave="hoveredSegment = null"
+                  >
+                    <div class="h-2 w-2 shrink-0 rounded-sm" :style="segDotStyles[i]" />
+                    <span class="flex-1 truncate text-[12px] font-medium text-[var(--h2-fg)]">{{ row.label }}</span>
+                    <span class="font-mono text-[12px] tabular-nums text-[var(--h2-muted)]">{{ formatPremiumM(row.premiumM) }}</span>
+                    <span class="w-8 text-right text-[11px] tabular-nums text-[var(--h2-muted)]">{{ row.pct }}%</span>
+                  </div>
+                </div>
+              </template>
+
+              <!-- Stage funnel view -->
+              <template v-if="pipelineView === 'stage'">
+                <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">Pipeline stages</p>
+                <div class="mt-3 space-y-2.5">
+                  <div v-for="stage in pipelineStages" :key="stage.label" class="h2-pipeline-stage">
+                    <div class="flex items-center justify-between mb-1">
+                      <span class="text-[12px] font-medium text-[var(--h2-fg)]">{{ stage.label }}</span>
+                      <div class="flex items-center gap-2">
+                        <span class="text-[11px] tabular-nums text-[var(--h2-muted)]">{{ stage.count }}</span>
+                        <span class="font-mono text-[11px] font-semibold tabular-nums text-[var(--h2-fg)]">{{ stage.value }}</span>
+                      </div>
+                    </div>
+                    <div class="h2-pipeline-bar">
+                      <div class="h2-pipeline-bar-fill" :style="`width: ${stage.pct}%; background: ${stage.color}`" />
+                    </div>
+                  </div>
+                </div>
+              </template>
+
+              <!-- LOB breakdown view -->
+              <template v-if="pipelineView === 'lob'">
+                <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">By line of business</p>
+                <div class="mt-3 space-y-2.5">
+                  <div v-for="lob in pipelineLobBreakdown" :key="lob.label" class="h2-pipeline-stage">
+                    <div class="flex items-center justify-between mb-1">
+                      <span class="text-[12px] font-medium text-[var(--h2-fg)]">{{ lob.label }}</span>
+                      <div class="flex items-center gap-2">
+                        <span class="text-[11px] tabular-nums text-[var(--h2-muted)]">{{ lob.count }} quotes</span>
+                        <span class="font-mono text-[11px] font-semibold tabular-nums text-[var(--h2-fg)]">{{ lob.value }}</span>
+                      </div>
+                    </div>
+                    <div class="h2-pipeline-bar">
+                      <div class="h2-pipeline-bar-fill" :style="`width: ${lob.pct}%; background: var(--h2-accent)`" />
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== BROKERAGE HEALTH ==================== -->
+      <template #brokerage_health>
+        <section v-if="welcome.ceoKpis?.length" class="space-y-4">
+          <div class="h2-section-header">
+            <h2 class="h2-section-title">Brokerage health</h2>
+            <p class="h2-section-sub">YTD and trailing measures</p>
+          </div>
+          <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            <div v-for="k in welcome.ceoKpis" :key="k.id" class="h2-card p-5 transition-all duration-150 hover:shadow-md">
+              <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">{{ k.label }}</p>
+              <p class="mt-1.5 font-mono text-xl font-bold tabular-nums tracking-tight text-[var(--h2-fg)]">{{ k.value }}</p>
+              <p v-if="k.change" class="mt-1 text-xs font-semibold" :class="changeToneClass(k.changeTone)">{{ k.change }}</p>
+              <p v-if="k.hint" class="mt-1 text-[11px] text-[var(--h2-muted)]">{{ k.hint }}</p>
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== SENT QUOTES ==================== -->
+      <template #quotes_line>
+        <section class="space-y-4" aria-labelledby="h2q">
+          <div class="flex flex-wrap items-end justify-between gap-3">
+            <div class="h2-section-header">
+              <h2 id="h2q" class="h2-section-title">Sent Quotes</h2>
+              <p class="h2-section-sub">{{ filteredSentQuotes.length }} quotes · ${{ (filteredSentQuotes.reduce((s, q) => s + q.premium, 0) / 1000).toFixed(0) }}K total premium</p>
+            </div>
+            <NuxtLink to="/quotes" class="text-[13px] font-medium h2-text-accent transition hover:h2-text-accent-hover">
+              All quotes &rarr;
+            </NuxtLink>
+          </div>
+
+          <!-- Filters row -->
+          <div class="flex flex-wrap items-center gap-2">
+            <select v-model="quoteSortKey" class="h2-qs-select">
+              <option v-for="o in quoteSortOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+            </select>
+            <select v-model="quoteFilterLob" class="h2-qs-select">
+              <option v-for="o in quoteLobOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+            </select>
+            <select v-model="quoteFilterParty" class="h2-qs-select">
+              <option v-for="o in quotePartyOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+            </select>
+            <select v-model="quoteFilterStatus" class="h2-qs-select">
+              <option v-for="o in quoteStatusOptions" :key="o.value" :value="o.value">{{ o.label }}</option>
+            </select>
+          </div>
+
+          <!-- Quotes list -->
+          <div class="h2-card overflow-hidden">
+            <div v-if="filteredSentQuotes.length === 0" class="px-6 py-10 text-center">
+              <UIcon name="i-heroicons-document-text" style="width: 32px; height: 32px; color: #c0c0bc; margin: 0 auto 8px;" />
+              <p class="text-[13px] text-[var(--h2-muted)]">No quotes match these filters</p>
+            </div>
+            <div
+              v-for="(qt, qi) in filteredSentQuotes"
+              :key="qt.id"
+              class="h2-qs-row"
+              :class="qi < filteredSentQuotes.length - 1 ? 'h2-qs-row-border' : ''"
+            >
+              <!-- LOB icon -->
+              <div class="h2-qs-lob-icon">
+                <UIcon :name="qt.lobIcon" style="width: 16px; height: 16px;" />
+              </div>
+
+              <!-- Main info -->
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2 flex-wrap">
+                  <p class="text-[13px] font-medium text-[var(--h2-fg)]">{{ qt.customer }}</p>
+                  <span class="h2-qs-party">{{ qt.party === 'corporate' ? 'Corp' : 'Personal' }}</span>
+                  <span :class="quoteStatusMeta[qt.status].cls">{{ quoteStatusMeta[qt.status].label }}</span>
+                </div>
+                <div class="mt-0.5 flex items-center gap-2 flex-wrap text-[11px] text-[var(--h2-muted)]">
+                  <span class="font-mono">{{ qt.id }}</span>
+                  <span class="h2-qs-sep" />
+                  <span>{{ qt.lob }}</span>
+                  <span class="h2-qs-sep" />
+                  <span>{{ qt.carrier }}</span>
+                  <span class="h2-qs-sep" />
+                  <span>{{ qt.agent }}</span>
+                </div>
+              </div>
+
+              <!-- Numbers -->
+              <div class="text-right shrink-0">
+                <p class="text-[14px] font-semibold tabular-nums text-[var(--h2-fg)]">${{ qt.premium.toLocaleString() }}</p>
+                <p class="text-[11px] tabular-nums text-[var(--h2-muted)]">${{ qt.commission.toLocaleString() }} comm</p>
+              </div>
+
+              <!-- Date -->
+              <div class="hidden sm:block shrink-0 text-right">
+                <p class="text-[12px] tabular-nums text-[var(--h2-muted)]">{{ qt.sentDate }}</p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== CALENDAR SUMMARY ==================== -->
+      <template #calendar>
+        <section class="space-y-4">
+          <div class="flex flex-wrap items-end justify-between gap-3">
+            <div class="h2-section-header">
+              <h2 class="h2-section-title">Today's agenda</h2>
+              <p class="h2-section-sub">{{ filteredCalEvents.filter(e => e.urgent).length }} urgent · {{ filteredCalEvents.length }} total</p>
+            </div>
+            <NuxtLink to="/calendar" class="text-[13px] font-medium h2-text-accent transition hover:h2-text-accent-hover">
+              Open calendar &rarr;
+            </NuxtLink>
+          </div>
+
+          <div class="h2-card overflow-hidden">
+            <!-- Compact upcoming list (max 4) -->
+            <div class="cal-event-list">
+              <div
+                v-for="event in filteredCalEvents.slice(0, 4)"
+                :key="event.id"
+                class="cal-event-row"
+                :class="event.urgent ? 'cal-event-urgent' : ''"
+              >
+                <div class="cal-event-time">{{ event.time }}</div>
+                <div class="cal-event-dot" :style="calEventDotStyle(event.type)" />
+                <div class="min-w-0 flex-1">
+                  <div class="flex items-center gap-2">
+                    <p class="text-[13px] font-medium text-[var(--h2-fg)]">{{ event.title }}</p>
+                    <span v-if="event.urgent" class="cal-urgent-badge">Urgent</span>
+                  </div>
+                  <p v-if="event.customer" class="mt-0.5 text-[12px] text-[var(--h2-muted)]">{{ event.customer }}</p>
+                </div>
+                <UIcon :name="calEventTypeMeta[event.type].icon" class="cal-event-type-icon" :style="`color: ${calEventTypeMeta[event.type].color}`" />
+              </div>
+            </div>
+
+            <!-- "More" footer -->
+            <div v-if="filteredCalEvents.length > 4" class="cal-summary-footer">
+              <NuxtLink to="/calendar" class="text-[12px] font-medium h2-text-accent">
+                +{{ filteredCalEvents.length - 4 }} more today
+              </NuxtLink>
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== NOTES ==================== -->
+      <template #notes>
+        <section class="space-y-3">
+          <div class="flex items-end justify-between gap-3">
+            <div class="h2-section-header">
+              <h2 class="h2-section-title">Notes</h2>
+              <p class="h2-section-sub">{{ stickyNotes.length }} notes · auto-saved</p>
+            </div>
+            <button type="button" class="h2-sticky-add" @click="addStickyNote">
+              <UIcon name="i-heroicons-plus" style="width: 12px; height: 12px;" />
+              New note
+            </button>
+          </div>
+
+          <div class="h2-notes-stack">
+            <TransitionGroup
+              enter-active-class="transition-all duration-200 ease-out"
+              enter-from-class="opacity-0 -translate-y-1 scale-95"
+              enter-to-class="opacity-100 translate-y-0 scale-100"
+              leave-active-class="transition-all duration-150 ease-in"
+              leave-from-class="opacity-100 max-h-60"
+              leave-to-class="opacity-0 max-h-0"
+            >
+              <div
+                v-for="note in sortedStickyNotes"
+                :key="note.id"
+                class="h2-note-card group/note"
+                :class="note.expanded ? 'h2-note-expanded' : ''"
+              >
+                <!-- Color accent bar -->
+                <div class="h2-note-accent" :style="`background: ${stickyColor(note.color).border}`" />
+
+                <!-- Collapsed: single-line preview -->
+                <div v-if="!note.expanded" class="h2-note-collapsed" @click="toggleStickyExpand(note.id)">
+                  <UIcon v-if="note.pinned" name="i-heroicons-bookmark-solid" style="width: 11px; height: 11px; color: var(--h2-accent); flex-shrink: 0;" />
+                  <span class="h2-note-preview">{{ stickyPreview(note.content) }}</span>
+                  <div class="h2-note-actions">
+                    <button type="button" class="h2-note-action" title="Pin" @click.stop="toggleStickyPin(note.id)">
+                      <UIcon :name="note.pinned ? 'i-heroicons-bookmark-solid' : 'i-heroicons-bookmark'" style="width: 11px; height: 11px;" />
+                    </button>
+                    <button type="button" class="h2-note-action h2-note-action-color" title="Color" @click.stop="cycleStickyColor(note.id)">
+                      <span class="h2-note-colordot" :style="`background: ${stickyColor(note.color).border}`" />
+                    </button>
+                    <button type="button" class="h2-note-action h2-note-action-danger" title="Delete" @click.stop="removeStickyNote(note.id)">
+                      <UIcon name="i-heroicons-trash" style="width: 11px; height: 11px;" />
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Expanded: editable textarea -->
+                <div v-else class="h2-note-body">
+                  <div class="h2-note-body-head">
+                    <div class="flex items-center gap-1.5">
+                      <button type="button" class="h2-note-action" title="Pin" @click="toggleStickyPin(note.id)">
+                        <UIcon :name="note.pinned ? 'i-heroicons-bookmark-solid' : 'i-heroicons-bookmark'" style="width: 12px; height: 12px;" />
+                      </button>
+                      <div class="flex gap-0.5">
+                        <button
+                          v-for="c in STICKY_COLORS"
+                          :key="c.id"
+                          type="button"
+                          class="h2-note-colordot-pick"
+                          :class="note.color === c.id ? 'h2-note-colordot-active' : ''"
+                          :style="`background: ${c.border}`"
+                          :title="c.label"
+                          @click="note.color = c.id"
+                        />
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-1">
+                      <button type="button" class="h2-note-action h2-note-action-danger" title="Delete" @click="removeStickyNote(note.id)">
+                        <UIcon name="i-heroicons-trash" style="width: 12px; height: 12px;" />
+                      </button>
+                      <button type="button" class="h2-note-action" title="Collapse" @click="toggleStickyExpand(note.id)">
+                        <UIcon name="i-heroicons-chevron-up" style="width: 12px; height: 12px;" />
+                      </button>
+                    </div>
+                  </div>
+                  <textarea
+                    v-model="note.content"
+                    class="h2-note-textarea"
+                    placeholder="Write something..."
+                    rows="4"
+                  />
+                </div>
+              </div>
+            </TransitionGroup>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== QUICK LEADS: Last 10 days ==================== -->
+      <template #quick_leads>
+        <section class="space-y-3">
+          <div class="flex items-end justify-between gap-3">
+            <div class="h2-section-header">
+              <h2 class="h2-section-title">Quick Leads</h2>
+              <p class="h2-section-sub">Last 10 days · {{ dashQuickLeads.length }} leads</p>
+            </div>
+            <NuxtLink to="/sales/quick-lead" class="h2-ql-view-all">
+              View all
+              <UIcon name="i-heroicons-arrow-right" style="width: 10px; height: 10px;" />
+            </NuxtLink>
+          </div>
+
+          <div v-if="dashQuickLeads.length === 0" key="ql-empty" class="h2-card h2-ql-empty">
+            <UIcon name="i-heroicons-bolt" style="width: 24px; height: 24px; color: #c0c0bc;" />
+            <p class="text-[12px] text-[var(--h2-muted)] mt-1.5">No quick leads in the last 10 days.</p>
+            <NuxtLink to="/sales/quick-lead" class="h2-ql-add-link">
+              <UIcon name="i-heroicons-plus" style="width: 10px; height: 10px;" />
+              Capture a lead
+            </NuxtLink>
+          </div>
+
+          <div v-else key="ql-list" class="h2-card h2-card-flush overflow-hidden">
+            <div v-for="(lead, i) in dashQuickLeads" :key="lead.id" class="h2-ql-row" :class="i < dashQuickLeads.length - 1 ? 'h2-ql-row-border' : ''">
+              <div class="h2-ql-avatar">{{ lead.name.split(' ').map(w => w[0]).join('').slice(0, 2) }}</div>
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2">
+                  <p class="text-[12px] font-medium text-[var(--h2-fg)] truncate">{{ lead.name }}</p>
+                  <span :class="qlPriorityMeta(lead.priority).cls">{{ qlPriorityMeta(lead.priority).label }}</span>
+                </div>
+                <div class="flex items-center gap-1.5 mt-0.5 flex-wrap">
+                  <span class="text-[11px] text-[var(--h2-muted)]">{{ lead.product }}</span>
+                  <span class="h2-ql-sep" />
+                  <span class="text-[11px] text-[var(--h2-muted)]">{{ qlTimeAgo(lead.createdAt) }}</span>
+                  <template v-if="lead.source">
+                    <span class="h2-ql-sep" />
+                    <span class="h2-ql-source">
+                      <UIcon name="i-heroicons-map-pin" style="width: 10px; height: 10px;" />
+                      {{ lead.source }}
+                    </span>
+                  </template>
+                </div>
+                <p v-if="lead.note" class="mt-0.5 text-[11px] text-[var(--h2-muted)] truncate opacity-70">{{ lead.note }}</p>
+              </div>
+              <div class="hidden sm:flex flex-col items-end gap-0.5 shrink-0 text-right">
+                <span v-if="lead.phone" class="text-[11px] text-[var(--h2-muted)] tabular-nums">{{ lead.phone }}</span>
+                <span v-if="lead.email" class="text-[11px] text-[var(--h2-muted)] truncate max-w-[160px]">{{ lead.email }}</span>
+              </div>
+              <NuxtLink to="/quotes/new" class="h2-ql-quote-btn" title="Start quote">
+                <UIcon name="i-heroicons-calculator" style="width: 12px; height: 12px;" />
+              </NuxtLink>
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== SALES LEADS ==================== -->
+      <template #sales_leads>
+        <section class="space-y-3">
+          <div class="flex items-end justify-between gap-3">
+            <div class="h2-section-header">
+              <h2 class="h2-section-title">Sales Leads</h2>
+              <p class="h2-section-sub">{{ filteredSalesLeads.length }} leads{{ slSourceFilter !== 'all' ? ' · ' + slSourceLabel(slSourceFilter) : '' }}</p>
+            </div>
+            <div class="flex items-center gap-2">
+              <span class="text-[10px] font-medium text-[var(--h2-muted)] uppercase tracking-wide hidden sm:inline">API integrations coming soon</span>
+              <NuxtLink to="/sales" class="h2-ql-view-all">
+                Manage leads
+                <UIcon name="i-heroicons-arrow-right" style="width: 10px; height: 10px;" />
+              </NuxtLink>
+            </div>
+          </div>
+
+          <!-- Source filter pills -->
+          <div class="flex items-center gap-1.5 overflow-x-auto pb-1 -mb-1">
+            <button
+              v-for="src in SALES_LEAD_SOURCES"
+              :key="src.value"
+              type="button"
+              class="h2-sl-filter-pill"
+              :class="slSourceFilter === src.value ? 'h2-sl-filter-pill--active' : ''"
+              @click="slSourceFilter = src.value as any"
+            >
+              <UIcon :name="src.icon" style="width: 11px; height: 11px;" />
+              {{ src.label }}
+              <span v-if="slSourceCounts[src.value]" class="h2-sl-filter-count">{{ slSourceCounts[src.value] }}</span>
+            </button>
+          </div>
+
+          <!-- Leads table -->
+          <div class="h2-card h2-card-flush overflow-hidden">
+            <!-- Header row -->
+            <div class="h2-sl-header">
+              <span class="flex-1">Lead</span>
+              <span class="w-[80px] text-center hidden sm:block">Source</span>
+              <span class="w-[70px] text-center hidden sm:block">Status</span>
+              <span class="w-[70px] text-right hidden md:block">Value</span>
+              <span class="w-[80px] text-right hidden lg:block">Assigned</span>
+              <span class="w-[24px]"></span>
+            </div>
+
+            <div v-if="filteredSalesLeads.length === 0" class="h2-sl-empty">
+              <UIcon name="i-heroicons-funnel" style="width: 20px; height: 20px; color: #c0c0bc;" />
+              <p>No leads match this filter.</p>
+            </div>
+
+            <div v-for="(lead, i) in filteredSalesLeads" :key="lead.id" class="h2-sl-row" :class="i < filteredSalesLeads.length - 1 ? 'h2-ql-row-border' : ''">
+              <!-- Avatar + name block -->
+              <div class="flex items-center gap-2.5 min-w-0 flex-1">
+                <div class="h2-ql-avatar" :style="'background: rgba(1,105,111,0.07); color: #01696f'">{{ lead.name.split(' ').map((w: string) => w[0]).join('').slice(0, 2) }}</div>
+                <div class="min-w-0 flex-1">
+                  <div class="flex items-center gap-2">
+                    <p class="text-[12px] font-medium text-[var(--h2-fg)] truncate">{{ lead.name }}</p>
+                    <span class="text-[10px] text-[var(--h2-muted)]">{{ lead.lob }}</span>
+                  </div>
+                  <div class="flex items-center gap-1 mt-0.5">
+                    <span v-if="lead.phone" class="text-[10px] text-[var(--h2-muted)] tabular-nums">{{ lead.phone }}</span>
+                    <span v-if="lead.phone && lead.email" class="h2-ql-sep" />
+                    <span v-if="lead.email" class="text-[10px] text-[var(--h2-muted)] truncate">{{ lead.email }}</span>
+                  </div>
+                  <p v-if="lead.note || lead.campaignName" class="text-[10px] text-[var(--h2-muted)] truncate opacity-60 mt-0.5">
+                    {{ lead.campaignName ? '📣 ' + lead.campaignName : lead.note }}
+                  </p>
+                </div>
+              </div>
+              <!-- Source -->
+              <div class="w-[80px] hidden sm:flex items-center justify-center">
+                <span class="h2-sl-source-chip">
+                  <UIcon :name="slSourceIcon(lead.source)" style="width: 10px; height: 10px;" />
+                  {{ slSourceLabel(lead.source) }}
+                </span>
+              </div>
+              <!-- Status -->
+              <div class="w-[70px] hidden sm:flex items-center justify-center">
+                <span :class="slStatusBadge(lead.status).cls">{{ slStatusBadge(lead.status).label }}</span>
+              </div>
+              <!-- Value -->
+              <div class="w-[70px] hidden md:flex items-center justify-end">
+                <span v-if="lead.value" class="text-[11px] font-medium text-[var(--h2-fg)] tabular-nums">{{ slFmtValue(lead.value) }}</span>
+              </div>
+              <!-- Assigned -->
+              <div class="w-[80px] hidden lg:flex items-center justify-end">
+                <span class="text-[10px] text-[var(--h2-muted)]">{{ lead.assignedTo }}</span>
+              </div>
+              <!-- Action -->
+              <NuxtLink to="/quotes/new" class="h2-ql-quote-btn" title="Start quote">
+                <UIcon name="i-heroicons-arrow-right" style="width: 10px; height: 10px;" />
+              </NuxtLink>
+            </div>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== CLIENT FAVORITES ==================== -->
+      <template #client_favorites>
+        <section class="space-y-3">
+          <div class="flex items-end justify-between gap-3">
+            <div class="h2-section-header">
+              <h2 class="h2-section-title">Favorite Clients</h2>
+              <p class="h2-section-sub">{{ favCustomers.length }} starred</p>
+            </div>
+            <NuxtLink to="/customers" class="h2-ql-view-all">
+              All customers
+              <UIcon name="i-heroicons-arrow-right" style="width: 10px; height: 10px;" />
+            </NuxtLink>
+          </div>
+
+          <div v-if="favCustomers.length === 0" class="h2-ql-empty">
+            <UIcon name="i-heroicons-star" style="width: 24px; height: 24px; color: #c0c0bc;" />
+            <p class="text-[12px] text-[var(--h2-muted)] mt-1.5">No favorite clients yet. Star clients from the customer list.</p>
+          </div>
+
+          <div v-else class="h2-fav-grid">
+            <NuxtLink
+              v-for="c in favCustomers" :key="c.id"
+              :to="`/customers/${c.id}`"
+              class="h2-fav-card"
+            >
+              <div class="h2-fav-top">
+                <div class="h2-fav-avatar">{{ c.initials }}</div>
+                <button
+                  type="button"
+                  class="h2-fav-star"
+                  title="Remove from favorites"
+                  @click.prevent.stop="unfavClient(c.id)"
+                >
+                  <UIcon name="i-heroicons-star-solid" style="width: 12px; height: 12px;" />
+                </button>
+              </div>
+              <p class="h2-fav-name">{{ c.name }}</p>
+              <span :class="favTierClass(c)" class="h2-fav-tier">{{ favTierLabel(c) }}</span>
+              <div class="h2-fav-stats">
+                <span>{{ c.policies.length }} {{ c.policies.length === 1 ? 'policy' : 'policies' }}</span>
+                <span v-if="favTotalPremium(c) > 0">{{ favFmtMoney(favTotalPremium(c)) }}/yr</span>
+              </div>
+              <div class="h2-fav-meta">
+                <span>{{ c.agent }}</span>
+                <span>{{ c.type }}</span>
+              </div>
+            </NuxtLink>
+          </div>
+        </section>
+      </template>
+
+      <!-- ==================== DRAFTS ==================== -->
+      <template #drafts>
+        <section class="space-y-3">
+          <div class="h2-section-header">
+            <h2 class="h2-section-title">Drafts</h2>
+            <p class="h2-section-sub">Resume in-progress work</p>
+          </div>
+
+          <div v-if="activeDrafts.length > 0" class="grid gap-2">
+            <div
+              v-for="draft in activeDrafts"
+              :key="draft.key"
+              class="h2-card flex items-center gap-3 px-4 py-3"
+            >
+              <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg" style="background: rgba(1,105,111,0.08); color: #01696f;">
+                <UIcon :name="draft.icon" style="width: 16px; height: 16px;" />
+              </div>
+              <div class="min-w-0 flex-1">
+                <p class="text-[13px] font-semibold text-[var(--h2-fg)]">{{ draft.label }}</p>
+                <p class="text-[11px] text-[var(--h2-muted)]">Saved {{ draft.age }}</p>
+              </div>
+              <NuxtLink :to="draft.route" class="text-[12px] font-semibold" style="color: #01696f;">Resume</NuxtLink>
+              <button type="button" class="text-[var(--h2-muted)] opacity-50 hover:opacity-100 transition" title="Discard draft" @click="removeDraft(draft.key)">
+                <UIcon name="i-heroicons-x-mark" style="width: 14px; height: 14px;" />
+              </button>
+            </div>
+          </div>
+
+          <div v-else class="h2-card px-4 py-6 text-center">
+            <p class="text-[12px] text-[var(--h2-muted)]">No drafts in progress</p>
+          </div>
+        </section>
+      </template>
+    </HomeDashboardWidgetBlocks>
+
+    <!-- Layout controls -->
+    <div class="mx-auto mt-12 flex max-w-6xl flex-col gap-3 border-t border-[var(--h2-border)] pt-6 sm:flex-row sm:items-center sm:justify-between">
+      <div class="flex flex-wrap items-center gap-2">
+        <UButton
+          :icon="layoutUnlocked ? 'i-heroicons-arrows-up-down' : 'i-heroicons-lock-closed'"
+          :color="layoutUnlocked ? 'primary' : 'neutral'" variant="soft" class="h2-btn-outline"
+          @click="toggleLayoutUnlock"
+        >{{ layoutUnlocked ? 'Reorder on' : 'Reorder off' }}</UButton>
+        <p class="max-w-md text-xs text-[var(--h2-muted)]">Drag blocks by the grip when reorder is on.</p>
+      </div>
+      <UButton icon="i-heroicons-squares-2x2" color="primary" class="h2-btn-primary shrink-0" @click="dashConfigOpen = true">
+        Layout &amp; widgets
+      </UButton>
+    </div>
+
+    <!-- Slideover -->
+    <USlideover v-model:open="dashConfigOpen" side="right">
+      <template #content>
+        <div class="flex h-full max-w-md flex-col bg-[var(--h2-surface)] sm:max-w-lg">
+          <div class="flex shrink-0 items-start justify-between gap-3 border-b border-[var(--h2-border)] p-6">
+            <div class="min-w-0">
+              <h2 class="text-lg font-semibold text-[var(--h2-fg)]">Dashboard layout</h2>
+              <p class="mt-1 text-sm text-[var(--h2-fg-secondary)]">Choose a role preset or toggle sections.</p>
+            </div>
+            <UButton icon="i-heroicons-x-mark" color="neutral" variant="ghost" class="shrink-0" aria-label="Close" @click="dashConfigOpen = false" />
+          </div>
+          <div class="min-h-0 flex-1 overflow-y-auto p-6">
+            <div class="space-y-6">
+              <div>
+                <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">Role preset</p>
+                <USelect :model-value="activePreset" :items="presetSelectItems" value-key="value" label-key="label" class="mt-2 w-full"
+                  @update:model-value="applyPreset($event as DashboardRolePresetId)" />
+                <p class="mt-2 text-xs text-[var(--h2-muted)]">{{ activePresetHint }}</p>
+                <UButton v-if="isPresetDirty" size="xs" color="neutral" variant="soft" class="mt-2" @click="reapplySelectedPreset">Reset to preset</UButton>
+              </div>
+              <div class="border-t border-[var(--h2-border)] pt-4">
+                <p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--h2-muted)]">Sections</p>
+                <ul class="mt-3 space-y-4">
+                  <li v-for="w in DASHBOARD_WIDGETS" :key="w.id" class="flex items-start justify-between gap-3">
+                    <div class="min-w-0">
+                      <p class="text-sm font-medium text-[var(--h2-fg)]">{{ w.label }}</p>
+                      <p class="text-xs text-[var(--h2-muted)]">{{ w.description }}</p>
+                    </div>
+                    <USwitch :model-value="widgets[w.id]" @update:model-value="setWidget(w.id, $event)" />
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </USlideover>
+  </div>
 </template>
+
+<style scoped>
+/* =====================================================================
+   HOME 2 — PETROLEUM / STONE DESIGN SYSTEM (scoped)
+   ===================================================================== */
+
+/* ---- Palette ---- */
+.h2 {
+  /* Petroleum accent scale */
+  /* Map scoped vars to global theme tokens for theme-awareness */
+  --h2-accent:        var(--brand, #0d5c63);
+  --h2-accent-hover:  var(--brand-hover, #094a50);
+  --h2-accent-muted:  color-mix(in srgb, var(--brand) 60%, var(--text-muted));
+  --h2-accent-soft:   var(--brand) / 0.08;
+
+  /* Surfaces — inherit from global theme */
+  --h2-page-bg:       var(--page-bg, #f4f2ef);
+  --h2-surface:       var(--surface, #faf9f7);
+  --h2-surface-raised:var(--surface-elevated, #ffffff);
+  --h2-surface-inset: var(--page-bg, #f0eeeb);
+
+  /* Foregrounds — inherit from global theme */
+  --h2-fg:            var(--text-primary, #1a1a1a);
+  --h2-fg-secondary:  var(--text-muted, #5c5650);
+  --h2-muted:         var(--text-muted, #8c857d);
+
+  /* Borders — inherit from global theme */
+  --h2-border:        var(--card-border, #e5e0da);
+  --h2-border-strong: var(--sidebar-border, #d5cfc8);
+
+  /* Semantic — inherit from global theme */
+  --h2-success:       var(--success, #0f7b5f);
+  --h2-warning:       var(--warning, #c27b1a);
+  --h2-error:         var(--error, #c13838);
+  --h2-info:          var(--brand, #0d5c63);
+
+  background: var(--h2-page-bg);
+}
+
+/* ---- Card system ---- */
+.h2-card {
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+.h2-card-flush {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* ---- Ops cells (modernised command bar — unified card) ---- */
+.h2-ops-cell {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px 20px;
+  transition: background 150ms ease;
+}
+.h2-ops-cell:hover {
+  background: rgba(0, 0, 0, 0.015);
+}
+/* Lead cell gets a very subtle warm accent wash */
+.h2-ops-cell--lead {
+  background: rgba(1, 105, 111, 0.025);
+}
+.h2-ops-cell--lead:hover {
+  background: rgba(1, 105, 111, 0.04);
+}
+.h2-ops-cell--lead .h2-ops-cell-value {
+  color: #01696f;
+}
+.h2-ops-cell-icon {
+  display: flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px;
+  border-radius: 8px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+.h2-ops-cell-body {
+  min-width: 0; flex: 1;
+}
+.h2-ops-cell-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.06em; color: #8a8a86;
+}
+.h2-ops-cell-value {
+  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
+  color: #1a1a18; line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+  margin-top: 2px;
+}
+.h2-ops-cell-target {
+  display: flex; align-items: center; gap: 5px;
+  margin-top: 3px;
+  font-size: 11px; color: var(--h2-muted);
+}
+
+/* ---- Milestone card (modernised) ---- */
+.h2-milestone-card {
+  background: rgba(1, 105, 111, 0.035);
+  border: 1px solid rgba(1, 105, 111, 0.08);
+  border-radius: 12px;
+  padding: 12px 18px;
+}
+.h2-milestone-top {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 12px; flex-wrap: wrap;
+}
+.h2-milestone-badge {
+  display: flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 8px;
+  background: color-mix(in srgb, var(--ms-color) 10%, transparent);
+  color: var(--ms-color);
+}
+.h2-milestone-status {
+  font-size: 13px; font-weight: 600; display: block; line-height: 1.2;
+}
+.h2-milestone-tag {
+  font-size: 10px; font-weight: 500; text-transform: uppercase;
+  letter-spacing: 0.06em; color: #8a8a86; display: block;
+}
+.h2-milestone-bar-wrap {
+  display: flex; align-items: center; gap: 8px;
+  min-width: 120px; flex: 0 1 200px;
+}
+.h2-milestone-bar-track {
+  flex: 1; height: 5px; border-radius: 3px;
+  background: rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+.h2-milestone-bar-fill {
+  height: 100%; border-radius: 3px;
+  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.h2-milestone-bar-pct {
+  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
+  min-width: 32px; text-align: right;
+}
+
+/* Metric pills row */
+.h2-milestone-metrics {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  flex: 1; min-width: 0;
+}
+.h2-milestone-pill {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 8px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  font-size: 12px;
+}
+.h2-milestone-pill-label {
+  font-weight: 500; color: #8a8a86;
+}
+.h2-milestone-pill-val {
+  font-weight: 700; color: #1a1a18;
+  font-variant-numeric: tabular-nums;
+}
+.h2-milestone-pill-sep { color: #ccc; font-weight: 300; }
+.h2-milestone-pill-target {
+  color: #8a8a86; font-variant-numeric: tabular-nums;
+}
+.h2-milestone-pill-pct {
+  font-size: 10px; font-weight: 600; padding: 1px 5px;
+  border-radius: 9999px; margin-left: 1px;
+}
+.h2-milestone-pill-pct--good {
+  background: rgba(15, 123, 95, 0.08); color: #0f7b5f;
+}
+.h2-milestone-pill-pct--close {
+  background: rgba(194, 123, 26, 0.08); color: #c27b1a;
+}
+.h2-milestone-pill-pct--behind {
+  background: rgba(193, 56, 56, 0.08); color: #c13838;
+}
+
+/* ---- Ops status dot ---- */
+.h2-ops-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* ---- Ops rail config button ---- */
+.h2-ops-rail-wrap { position: relative; }
+.h2-ops-config-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px; height: 28px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #ffffff;
+  color: #8a8a86;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+  transition: all 150ms ease;
+}
+.h2-ops-config-btn:hover {
+  color: #01696f;
+  border-color: rgba(1,105,111,0.2);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+}
+
+/* ---- Ops config popover ---- */
+.h2-ops-config-popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 300px;
+  max-height: 480px;
+  overflow-y: auto;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #ffffff;
+  box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
+  z-index: 30;
+}
+.h2-ops-config-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.h2-ops-config-reset {
+  font-size: 11px;
+  font-weight: 500;
+  color: #01696f;
+  background: none; border: none; cursor: pointer;
+  padding: 2px 6px; border-radius: 4px;
+  transition: background 150ms ease;
+}
+.h2-ops-config-reset:hover { background: rgba(1,105,111,0.06); }
+.h2-ops-config-hint {
+  padding: 4px 16px 8px;
+  font-size: 11px;
+  color: #8a8a86;
+}
+.h2-ops-config-list {
+  max-height: 320px;
+  overflow-y: auto;
+  list-style: none;
+  margin: 0; padding: 0;
+}
+.h2-ops-config-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  cursor: pointer;
+  transition: background 100ms ease;
+  border-bottom: 1px solid rgba(0,0,0,0.03);
+}
+.h2-ops-config-item:last-child { border-bottom: none; }
+.h2-ops-config-item:hover { background: rgba(0,0,0,0.02); }
+.h2-ops-config-item-on { background: rgba(1,105,111,0.03); }
+.h2-ops-config-item-on:hover { background: rgba(1,105,111,0.05); }
+.h2-ops-config-check {
+  width: 18px; height: 18px;
+  border-radius: 5px;
+  border: 1.5px solid rgba(0,0,0,0.15);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: all 150ms ease;
+}
+.h2-ops-config-item-on .h2-ops-config-check {
+  background: #01696f;
+  border-color: #01696f;
+  color: #ffffff;
+}
+.h2-ops-config-dot {
+  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
+}
+.h2-ops-config-footer {
+  padding: 8px 16px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+  font-size: 10px;
+  color: #8a8a86;
+  text-align: center;
+}
+
+/* ---- Sent Quotes widget ---- */
+.h2-qs-select {
+  appearance: none;
+  padding: 4px 24px 4px 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8a86' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: border-color 150ms ease;
+  min-width: 0;
+}
+.h2-qs-select:hover { border-color: rgba(0,0,0,0.15); }
+.h2-qs-select:focus { outline: none; border-color: #01696f; }
+
+.h2-qs-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  transition: background 100ms ease;
+}
+.h2-qs-row:hover { background: rgba(0,0,0,0.015); }
+.h2-qs-row-border { border-bottom: 1px solid rgba(0,0,0,0.04); }
+
+.h2-qs-lob-icon {
+  width: 32px; height: 32px;
+  border-radius: 8px;
+  background: rgba(1,105,111,0.06);
+  color: #01696f;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.h2-qs-party {
+  font-size: 9px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 1px 5px; border-radius: 4px;
+  background: rgba(0,0,0,0.04); color: #8a8a86;
+}
+.h2-qs-sep {
+  width: 3px; height: 3px; border-radius: 50%;
+  background: rgba(0,0,0,0.15); flex-shrink: 0;
+}
+/* Status badges */
+.h2-qs-sent {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(0,0,0,0.04); color: #8a8a86;
+}
+.h2-qs-viewed {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(1,105,111,0.08); color: #01696f;
+}
+.h2-qs-accepted {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(15,123,95,0.08); color: #0f7b5f;
+}
+.h2-qs-expired {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(194,123,26,0.08); color: #964219;
+}
+.h2-qs-declined {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(193,56,56,0.08); color: #c13838;
+}
+
+/* ---- Section headers ---- */
+.h2-section-header { }
+.h2-section-title {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: #1a1a18;
+}
+.h2-section-sub {
+  margin-top: 2px;
+  font-size: 13px;
+  color: #8a8a86;
+}
+
+/* ---- Card headers (icon + title) ---- */
+.h2-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid var(--h2-border);
+}
+.h2-icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 8px;
+  background: rgba(1, 105, 111, 0.06);
+  color: var(--h2-accent);
+}
+.h2-icon-box-error {
+  background: color-mix(in srgb, var(--h2-error) 10%, transparent);
+  color: var(--h2-error);
+}
+
+/* ---- Lists ---- */
+.h2-list {
+  padding: 0;
+  list-style: none;
+  margin: 0;
+}
+
+/* ---- Alert rows ---- */
+.h2-alert-row {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem 0.75rem 0.75rem 1rem;
+  border-radius: 8px;
+  transition: background 150ms ease;
+}
+
+/* ---- Ops cell borders (internal vertical dividers) ---- */
+.h2-cell-border {
+  border-right: 1px solid rgba(0, 0, 0, 0.06);
+}
+@media (max-width: 639px) {
+  .h2-cell-border:nth-child(2n) { border-right: none; }
+  .h2-cell-border { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
+}
+
+/* ---- Tone classes ---- */
+.h2-tone-pos     { color: var(--h2-success); }
+.h2-tone-neg     { color: var(--h2-error); }
+.h2-tone-neutral { color: var(--h2-muted); }
+
+/* ---- Badges ---- */
+.h2-badge-success {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  padding: 0.125rem 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  background: color-mix(in srgb, var(--h2-success) 10%, transparent);
+  color: var(--h2-success);
+  border: 1px solid color-mix(in srgb, var(--h2-success) 20%, transparent);
+}
+
+/* ---- Buttons ---- */
+.h2-btn-primary {
+  background: var(--brand) !important;
+  color: #fff !important;
+  border-radius: 10px !important;
+  border: none !important;
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--brand) 30%, transparent), 0 1px 2px color-mix(in srgb, var(--brand) 18%, transparent) !important;
+  transition: background 150ms ease, box-shadow 150ms ease !important;
+}
+.h2-btn-primary:hover {
+  background: var(--brand-hover) !important;
+  box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 35%, transparent), 0 1px 3px color-mix(in srgb, var(--brand) 22%, transparent) !important;
+}
+.h2-btn-outline {
+  border-radius: 10px !important;
+  border-color: var(--h2-border-strong) !important;
+  color: var(--h2-fg) !important;
+}
+
+/* ---- Accent icon tile ---- */
+.h2-accent-icon {
+  background: rgba(1, 105, 111, 0.06);
+  color: var(--brand);
+  border: 1px solid rgba(1, 105, 111, 0.1);
+}
+
+/* ---- Accent text ---- */
+.h2-text-accent { color: var(--brand); }
+.h2-text-accent-hover { color: var(--brand-hover); }
+
+/* ---- Calendar summary widget ---- */
+.cal-event-list { display: flex; flex-direction: column; }
+.cal-event-row {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 12px 20px; border-bottom: 1px solid rgba(0,0,0,0.04);
+  transition: background 100ms ease;
+}
+.cal-event-row:last-child { border-bottom: none; }
+.cal-event-row:hover { background: rgba(0,0,0,0.015); }
+.cal-event-urgent { background: rgba(193,56,56,0.02); }
+.cal-event-time {
+  width: 60px; flex-shrink: 0; font-size: 12px; font-weight: 500;
+  color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: 1px;
+}
+.cal-event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
+.cal-event-type-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; opacity: 0.4; }
+.cal-urgent-badge {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(193,56,56,0.08); color: #c13838; flex-shrink: 0;
+}
+.cal-summary-footer {
+  padding: 10px 20px; border-top: 1px solid rgba(0,0,0,0.04); text-align: center;
+}
+
+/* ---- Notes widget (compact expandable cards) ---- */
+.h2-sticky-add {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.08);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.h2-sticky-add:hover { border-color: rgba(1,105,111,0.2); color: #01696f; }
+
+.h2-notes-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+}
+
+.h2-note-card {
+  display: flex;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  overflow: hidden;
+  transition: all 200ms ease;
+}
+.h2-note-card:hover { border-color: rgba(0,0,0,0.1); }
+.h2-note-expanded {
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  border-color: rgba(0,0,0,0.1);
+  flex-direction: column;
+}
+
+.h2-note-accent {
+  width: 3px;
+  flex-shrink: 0;
+  border-radius: 3px 0 0 3px;
+}
+.h2-note-expanded .h2-note-accent {
+  width: 100%;
+  height: 3px;
+  border-radius: 3px 3px 0 0;
+}
+
+/* Collapsed row */
+.h2-note-collapsed {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px 8px 10px;
+  flex: 1;
+  min-width: 0;
+  cursor: pointer;
+  transition: background 100ms ease;
+}
+.h2-note-collapsed:hover { background: rgba(0,0,0,0.01); }
+
+.h2-note-preview {
+  flex: 1;
+  font-size: 12px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.h2-note-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+.h2-note-collapsed:hover .h2-note-actions,
+.group\/note:hover .h2-note-actions { opacity: 1; }
+
+.h2-note-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px; height: 22px;
+  border-radius: 5px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+.h2-note-action:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
+.h2-note-action-danger:hover { color: #c13838; background: rgba(193,56,56,0.06); }
+.h2-note-action-color { padding: 0; }
+
+.h2-note-colordot {
+  width: 10px; height: 10px;
+  border-radius: 50%;
+  border: 1px solid rgba(0,0,0,0.08);
+}
+
+/* Expanded body */
+.h2-note-body {
+  display: flex;
+  flex-direction: column;
+}
+.h2-note-body-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+}
+
+.h2-note-colordot-pick {
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.h2-note-colordot-pick:hover { transform: scale(1.15); }
+.h2-note-colordot-active { border-color: rgba(0,0,0,0.3); box-shadow: 0 0 0 1px #fff inset; }
+
+.h2-note-textarea {
+  display: block;
+  width: 100%;
+  min-height: 80px;
+  padding: 10px 12px;
+  border: none;
+  outline: none;
+  resize: vertical;
+  font-size: 12px;
+  line-height: 1.65;
+  color: var(--text-primary);
+  background: transparent;
+  font-family: inherit;
+}
+.h2-note-textarea::placeholder { color: var(--text-muted); opacity: 0.5; }
+
+/* ---- Chart toolbar ---- */
+.h2-chart-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+  flex-wrap: wrap;
+}
+.h2-chart-metric-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.h2-chart-metric-btn:hover { background: rgba(0,0,0,0.03); }
+
+.h2-chart-metric-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 30;
+  width: 220px;
+  border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+  overflow: hidden;
+  padding: 4px 0;
+}
+.h2-chart-metric-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  transition: background 100ms ease;
+}
+.h2-chart-metric-item:hover { background: rgba(0,0,0,0.03); }
+.h2-chart-metric-item-on { background: rgba(1,105,111,0.04); font-weight: 600; }
+
+.h2-chart-sep {
+  width: 1px;
+  height: 16px;
+  background: rgba(0,0,0,0.08);
+}
+.h2-chart-type-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 6px;
+  border-radius: 4px;
+  border: none;
+  font-size: 10px;
+  color: var(--text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+/* ---- Pipeline stage bars ---- */
+.h2-pipeline-stage {}
+.h2-pipeline-bar {
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.04);
+  overflow: hidden;
+}
+.h2-pipeline-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ---- Tasks widget interactivity ---- */
+.h2-task-add-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px; height: 28px;
+  border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.h2-task-add-btn:hover { background: rgba(1,105,111,0.06); color: #01696f; border-color: rgba(1,105,111,0.2); }
+
+.h2-task-progress {
+  height: 2px;
+  background: rgba(0,0,0,0.04);
+  overflow: hidden;
+}
+.h2-task-progress-fill {
+  height: 100%;
+  background: #01696f;
+  border-radius: 1px;
+  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.h2-task-add-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+  overflow: hidden;
+}
+.h2-task-add-input {
+  flex: 1;
+  padding: 5px 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 12px;
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color 150ms ease;
+}
+.h2-task-add-input:focus { border-color: #01696f; }
+.h2-task-add-submit {
+  padding: 5px 10px;
+  border-radius: 6px;
+  border: none;
+  background: #01696f;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.h2-task-add-submit:hover { background: #015a5f; }
+.h2-task-add-submit:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.h2-task-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(0,0,0,0.03);
+  transition: background 100ms ease;
+}
+.h2-task-item:hover { background: rgba(0,0,0,0.01); }
+.h2-task-item:last-child { border-bottom: none; }
+
+.h2-task-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px; height: 18px;
+  border-radius: 5px;
+  border: 1.5px solid rgba(0,0,0,0.18);
+  background: transparent;
+  color: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-top: 1px;
+  transition: all 200ms ease;
+}
+.h2-task-checkbox:hover { border-color: #01696f; }
+.h2-task-checkbox-done {
+  background: #01696f;
+  border-color: #01696f;
+  color: #fff;
+}
+
+.h2-task-text {
+  font-size: 13px;
+  line-height: 1.4;
+  transition: all 200ms ease;
+}
+.h2-task-done {
+  text-decoration: line-through;
+  color: #b0b0ac !important;
+  font-weight: 400 !important;
+}
+
+.h2-task-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px; height: 20px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: #c13838;
+  cursor: pointer;
+  opacity: 0;
+  flex-shrink: 0;
+  transition: all 150ms ease;
+}
+.group\/task:hover .h2-task-remove { opacity: 0.5; }
+.h2-task-remove:hover { opacity: 1 !important; background: rgba(193,56,56,0.06); }
+
+/* ---- Alert dismiss ---- */
+.h2-alert-dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px; height: 22px;
+  border-radius: 5px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  opacity: 0;
+  flex-shrink: 0;
+  transition: all 150ms ease;
+}
+.group\/alert:hover .h2-alert-dismiss { opacity: 0.6; }
+.h2-alert-dismiss:hover { opacity: 1 !important; background: rgba(0,0,0,0.05); }
+
+.h2-alert-restore {
+  font-size: 11px;
+  font-weight: 500;
+  color: #01696f;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 4px;
+  transition: background 150ms ease;
+}
+.h2-alert-restore:hover { background: rgba(1,105,111,0.06); }
+
+/* ---- Milestone config ---- */
+.h2-milestone-bottom {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+.h2-mile-config-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px; height: 24px;
+  border-radius: 6px;
+  border: none;
+  background: rgba(0,0,0,0.03);
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 150ms ease;
+  flex-shrink: 0;
+}
+.h2-mile-config-btn:hover { background: rgba(0,0,0,0.06); color: #01696f; }
+
+.h2-mile-popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  width: 260px;
+  border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+  overflow: hidden;
+}
+.h2-mile-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 100ms ease;
+}
+.h2-mile-item:hover { background: rgba(0,0,0,0.02); }
+.h2-mile-item-on { background: rgba(1,105,111,0.03); }
+.h2-mile-check {
+  width: 16px; height: 16px;
+  border-radius: 4px;
+  border: 1.5px solid rgba(0,0,0,0.15);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: all 150ms ease;
+}
+.h2-mile-check-on {
+  background: #01696f;
+  border-color: #01696f;
+  color: #fff;
+}
+
+/* ---- Chart range toggle ---- */
+.h2-chart-range {
+  display: inline-flex;
+  gap: 1px;
+  padding: 2px;
+  border-radius: 6px;
+  background: rgba(0,0,0,0.04);
+}
+.h2-chart-range-btn {
+  padding: 3px 8px;
+  border-radius: 4px;
+  border: none;
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 150ms ease;
+  color: var(--text-muted);
+  background: transparent;
+}
+.h2-chart-range-on {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+}
+
+/* ---- Card hover state ---- */
+.h2-card-hover:hover {
+  box-shadow: var(--card-shadow-hover);
+  border-color: color-mix(in srgb, var(--brand) 25%, transparent);
+}
+
+/* ======== Quick Leads widget ======== */
+.h2-ql-view-all {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #01696f;
+  text-decoration: none;
+  transition: opacity 150ms ease;
+}
+.h2-ql-view-all:hover { opacity: 0.7; }
+
+.h2-ql-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 12px;
+  text-align: center;
+}
+.h2-ql-add-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #01696f;
+  text-decoration: none;
+}
+.h2-ql-add-link:hover { text-decoration: underline; }
+
+.h2-ql-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 14px;
+  width: 100%;
+  align-self: stretch;
+  transition: background 100ms ease;
+}
+.h2-ql-row:hover { background: rgba(0,0,0,0.015); }
+.h2-ql-row-border {
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+}
+.h2-ql-sep {
+  width: 3px; height: 3px; border-radius: 50%;
+  background: rgba(0,0,0,0.15); flex-shrink: 0;
+}
+.h2-ql-source {
+  display: inline-flex; align-items: center; gap: 3px;
+  font-size: 11px; font-weight: 500;
+  color: #01696f;
+}
+
+.h2-ql-avatar {
+  width: 26px; height: 26px;
+  border-radius: 7px;
+  background: rgba(194,123,26,0.08);
+  color: #c27b1a;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.h2-ql-quote-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px; height: 24px;
+  border-radius: 6px;
+  background: rgba(1,105,111,0.06);
+  color: #01696f;
+  flex-shrink: 0;
+  transition: all 150ms ease;
+  margin-left: auto;
+}
+.h2-ql-quote-btn:hover { background: rgba(1,105,111,0.14); }
+
+.h2-ql-pri-urgent {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(193,56,56,0.08); color: #c13838; white-space: nowrap;
+}
+.h2-ql-pri-high {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap;
+}
+.h2-ql-pri-normal {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(0,0,0,0.04); color: #8a8a86; white-space: nowrap;
+}
+
+/* ======== Sales Leads widget ======== */
+.h2-sl-filter-pill {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 10px; border-radius: 9999px;
+  font-size: 11px; font-weight: 500; white-space: nowrap;
+  border: 1px solid rgba(0,0,0,0.08); background: transparent;
+  color: var(--h2-muted); cursor: pointer;
+  transition: all 120ms ease;
+}
+.h2-sl-filter-pill:hover { background: rgba(0,0,0,0.03); }
+.h2-sl-filter-pill--active {
+  background: rgba(1,105,111,0.08); color: #01696f;
+  border-color: rgba(1,105,111,0.2); font-weight: 600;
+}
+.h2-sl-filter-count {
+  font-size: 9px; font-weight: 700; min-width: 14px; text-align: center;
+  padding: 0 3px; border-radius: 9999px;
+  background: rgba(0,0,0,0.05); color: var(--h2-muted);
+}
+.h2-sl-filter-pill--active .h2-sl-filter-count {
+  background: rgba(1,105,111,0.12); color: #01696f;
+}
+
+.h2-sl-header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 14px; font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  color: var(--h2-muted); border-bottom: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.015);
+}
+
+.h2-sl-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 14px; transition: background 100ms ease;
+}
+.h2-sl-row:hover { background: rgba(0,0,0,0.015); }
+
+.h2-sl-empty {
+  display: flex; flex-direction: column; align-items: center;
+  gap: 4px; padding: 20px 12px; text-align: center;
+  font-size: 12px; color: var(--h2-muted);
+}
+
+.h2-sl-source-chip {
+  display: inline-flex; align-items: center; gap: 3px;
+  font-size: 10px; font-weight: 500; color: #01696f;
+  padding: 1px 6px; border-radius: 9999px;
+  background: rgba(1,105,111,0.06);
+}
+
+.h2-sl-status-new {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(59,130,246,0.08); color: #3b82f6; white-space: nowrap;
+}
+.h2-sl-status-contacted {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(1,105,111,0.08); color: #01696f; white-space: nowrap;
+}
+.h2-sl-status-qualified {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap;
+}
+.h2-sl-status-proposal {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(139,92,246,0.08); color: #8b5cf6; white-space: nowrap;
+}
+.h2-sl-status-won {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(15,123,95,0.08); color: #0f7b5f; white-space: nowrap;
+}
+.h2-sl-status-lost {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(0,0,0,0.04); color: #8a8a86; white-space: nowrap;
+}
+
+/* ── Client favorites widget ── */
+.h2-fav-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 10px;
+}
+.h2-fav-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px;
+  border-radius: 10px;
+  border: 1px solid var(--h2-border);
+  background: var(--h2-surface);
+  text-decoration: none;
+  color: inherit;
+  transition: all 150ms ease;
+  cursor: pointer;
+}
+.h2-fav-card:hover {
+  border-color: rgba(1,105,111,0.2);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  transform: translateY(-1px);
+}
+.h2-fav-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.h2-fav-avatar {
+  width: 32px; height: 32px;
+  border-radius: 8px;
+  background: rgba(1,105,111,0.08);
+  color: #01696f;
+  font-size: 11px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+}
+.h2-fav-star {
+  width: 22px; height: 22px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: #f59e0b;
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  opacity: 0;
+  transition: all 150ms ease;
+}
+.h2-fav-card:hover .h2-fav-star { opacity: 1; }
+.h2-fav-star:hover { background: rgba(245,158,11,0.1); }
+.h2-fav-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--h2-fg);
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.h2-fav-tier {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  white-space: nowrap;
+  width: fit-content;
+}
+.h2-fav-tier-customer { background: rgba(1,105,111,0.08); color: #01696f; }
+.h2-fav-tier-lead { background: rgba(147,51,234,0.08); color: #9333ea; }
+.h2-fav-tier-ql { background: rgba(194,123,26,0.08); color: #c27b1a; }
+.h2-fav-tier-cancelled { background: rgba(0,0,0,0.04); color: #8a8a86; }
+.h2-fav-stats {
+  display: flex;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--h2-fg);
+  font-weight: 500;
+}
+.h2-fav-meta {
+  display: flex;
+  gap: 6px;
+  font-size: 10px;
+  color: var(--h2-muted);
+}
+</style>
diff --git a/app/pages/onboarding/active-leads/new.vue b/app/pages/onboarding/active-leads/new.vue
new file mode 100644
index 0000000..ce02594
--- /dev/null
+++ b/app/pages/onboarding/active-leads/new.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+usePageTitle('New Active Lead')
+</script>
+<template>
+  <div class="mx-auto max-w-2xl space-y-6">
+    <div>
+      <h1 class="mt-0.5 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">New Active Lead</h1>
+    </div>
+    <div class="rounded-xl border border-dashed border-[var(--card-border)] bg-[var(--surface)] px-8 py-12 text-center shadow-sm">
+      <p class="text-sm text-[var(--text-muted)] opacity-70">Active lead entry form coming online.</p>
+      <NuxtLink to="/onboarding" class="mt-4 inline-block text-[12px] font-medium text-[var(--brand)] hover:text-[var(--brand)]">← Sales Pipeline</NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/onboarding/emissions/index.vue b/app/pages/onboarding/emissions/index.vue
new file mode 100644
index 0000000..e29623c
--- /dev/null
+++ b/app/pages/onboarding/emissions/index.vue
@@ -0,0 +1,364 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+usePageTitle('Emissions review')
+
+const toast = useToast()
+const { items, approve, sendToInsurer, markInForce } = useEmissionsQueue()
+
+const pending = computed(() => items.value.filter((x) => x.status === 'pending_review'))
+const rest = computed(() => items.value.filter((x) => x.status !== 'pending_review'))
+
+function onApprove(id: string) {
+  approve(id)
+  toast.add({ title: 'Marked approved', color: 'success' })
+}
+
+function onSend(id: string) {
+  sendToInsurer(id)
+  toast.add({ title: 'Marked sent to insurer', color: 'success' })
+}
+
+function onInForce(id: string) {
+  markInForce(id)
+  toast.add({ title: 'Marked in force', color: 'success' })
+}
+
+/* ── Mock pipeline data for when queue is empty ── */
+const mockEmissions = [
+  { id: 'EM-2025-0041', customer: 'María Elena Pérez', insurer: 'ASSA', line: 'Auto', product: '2023 Toyota RAV4 — Comprehensive', premium: '$1,840', status: 'pending_review' as const, submitted: '2025-04-03', agent: 'Ana R.', docs: 3, docsTotal: 3 },
+  { id: 'EM-2025-0040', customer: 'Roberto Jiménez Mora', insurer: 'Pan-American Life', line: 'Life', product: 'Whole life — $150K', premium: '$1,440', status: 'approved' as const, submitted: '2025-04-02', agent: 'Ana R.', docs: 4, docsTotal: 4 },
+  { id: 'EM-2025-0039', customer: 'Luis Andrés Solís', insurer: 'Blue Cross', line: 'Health', product: 'Family health — Platinum', premium: '$8,400', status: 'sent_to_insurer' as const, submitted: '2025-04-01', agent: 'Ana R.', docs: 5, docsTotal: 5 },
+  { id: 'EM-2025-0038', customer: 'Sofía Campos Rojas', insurer: 'INS', line: 'Auto', product: '2024 Mazda CX-30 — Comprehensive', premium: '$1,380', status: 'pending_review' as const, submitted: '2025-03-30', agent: 'Marco V.', docs: 2, docsTotal: 3 },
+  { id: 'EM-2025-0037', customer: 'Carolina Fallas Vargas', insurer: 'ASSA', line: 'Renter', product: "Renter's insurance — Paraíso apt", premium: '$320', status: 'in_force' as const, submitted: '2025-03-28', agent: 'Marco V.', docs: 2, docsTotal: 2 },
+  { id: 'EM-2025-0036', customer: 'Roberto Jiménez Mora', insurer: 'ASSA', line: 'Home', product: 'Homeowner — Belén residence', premium: '$890', status: 'in_force' as const, submitted: '2025-03-25', agent: 'Ana R.', docs: 4, docsTotal: 4 },
+]
+
+type EmissionStatus = 'pending_review' | 'approved' | 'sent_to_insurer' | 'in_force'
+
+const statusMeta: Record<EmissionStatus, { label: string; class: string; icon: string }> = {
+  pending_review:   { label: 'Pending review', class: 'em-status-pending', icon: 'i-heroicons-clock' },
+  approved:         { label: 'Approved', class: 'em-status-approved', icon: 'i-heroicons-check' },
+  sent_to_insurer:  { label: 'Sent to insurer', class: 'em-status-sent', icon: 'i-heroicons-paper-airplane' },
+  in_force:         { label: 'In force', class: 'em-status-force', icon: 'i-heroicons-shield-check' },
+}
+
+const activeFilter = ref<EmissionStatus | 'all'>('all')
+const filterTabs: { id: EmissionStatus | 'all'; label: string; count: number }[] = [
+  { id: 'all', label: 'All', count: mockEmissions.length },
+  { id: 'pending_review', label: 'Pending', count: mockEmissions.filter(e => e.status === 'pending_review').length },
+  { id: 'approved', label: 'Approved', count: mockEmissions.filter(e => e.status === 'approved').length },
+  { id: 'sent_to_insurer', label: 'Sent', count: mockEmissions.filter(e => e.status === 'sent_to_insurer').length },
+  { id: 'in_force', label: 'In force', count: mockEmissions.filter(e => e.status === 'in_force').length },
+]
+
+const filteredEmissions = computed(() => {
+  if (activeFilter.value === 'all') return mockEmissions
+  return mockEmissions.filter(e => e.status === activeFilter.value)
+})
+
+/* ── KPI summary ── */
+const kpis = [
+  { label: 'Pending review', value: mockEmissions.filter(e => e.status === 'pending_review').length.toString(), sub: 'Awaiting QA', dot: 'background: #c27b1a' },
+  { label: 'Approved', value: mockEmissions.filter(e => e.status === 'approved').length.toString(), sub: 'Ready to send', dot: 'background: #01696f' },
+  { label: 'Sent to insurer', value: mockEmissions.filter(e => e.status === 'sent_to_insurer').length.toString(), sub: 'Awaiting response', dot: 'background: #7c3aed' },
+  { label: 'In force', value: mockEmissions.filter(e => e.status === 'in_force').length.toString(), sub: 'This month', dot: 'background: #0f7b5f' },
+]
+</script>
+
+<template>
+  <div class="em mx-auto max-w-5xl space-y-6 pb-12">
+    <!-- Back -->
+    <NuxtLink to="/onboarding" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Pipeline</UButton>
+    </NuxtLink>
+
+    <!-- Sales flow indicator -->
+    <SalesFlowIndicator current-stage="emission" />
+
+    <!-- Header -->
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Emissions Review</h1>
+        <p class="mt-1 max-w-2xl text-[13px] text-[var(--text-muted)]">
+          Completed intakes land here for brokerage QA before submission to the carrier.
+        </p>
+      </div>
+      <NuxtLink to="/onboarding/solicitud">
+        <UButton size="sm" color="primary" icon="i-heroicons-plus">New solicitud</UButton>
+      </NuxtLink>
+    </div>
+
+    <!-- KPI Strip -->
+    <div class="em-kpi-strip">
+      <div v-for="(kpi, i) in kpis" :key="kpi.label" class="em-kpi">
+        <p class="em-kpi-label">{{ kpi.label }}</p>
+        <p class="em-kpi-value">{{ kpi.value }}</p>
+        <div class="mt-1 flex items-center gap-1.5">
+          <span class="em-kpi-dot" :style="kpi.dot" />
+          <p class="text-[11px] text-[var(--text-muted)]">{{ kpi.sub }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Filter tabs -->
+    <div class="em-tabs">
+      <button
+        v-for="tab in filterTabs"
+        :key="tab.id"
+        type="button"
+        class="em-tab"
+        :class="activeFilter === tab.id ? 'em-tab-on' : 'em-tab-off'"
+        @click="activeFilter = tab.id"
+      >
+        {{ tab.label }}
+        <span class="em-tab-count" :class="activeFilter === tab.id ? 'em-tab-count-on' : ''">{{ tab.count }}</span>
+      </button>
+    </div>
+
+    <!-- Emissions table -->
+    <div class="em-card">
+      <div class="em-card-head">
+        <UIcon name="i-heroicons-document-check" style="width: 16px; height: 16px; color: #01696f;" />
+        <span>Emissions queue</span>
+        <span class="ml-auto text-[11px] text-[var(--text-muted)]">{{ filteredEmissions.length }} items</span>
+      </div>
+
+      <div v-if="filteredEmissions.length === 0" class="px-6 py-12 text-center">
+        <UIcon name="i-heroicons-inbox-stack" style="width: 40px; height: 40px; color: #c0c0bc; margin: 0 auto 12px;" />
+        <p class="text-[13px] text-[var(--text-muted)]">No emissions in this status</p>
+      </div>
+
+      <table v-else class="em-table">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Customer</th>
+            <th>Insurer</th>
+            <th>Product</th>
+            <th>Premium</th>
+            <th>Docs</th>
+            <th>Status</th>
+            <th>Submitted</th>
+            <th class="text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="em in filteredEmissions" :key="em.id">
+            <td class="font-mono text-[11px] font-medium">{{ em.id }}</td>
+            <td>
+              <p class="text-[13px] font-medium text-[var(--text-primary)]">{{ em.customer }}</p>
+              <p class="text-[11px] text-[var(--text-muted)]">{{ em.agent }}</p>
+            </td>
+            <td class="text-[13px]">{{ em.insurer }}</td>
+            <td>
+              <p class="text-[13px] text-[var(--text-primary)]">{{ em.line }}</p>
+              <p class="text-[11px] text-[var(--text-muted)] max-w-[200px] truncate">{{ em.product }}</p>
+            </td>
+            <td class="text-[13px] font-medium tabular-nums">{{ em.premium }}</td>
+            <td>
+              <span class="em-doc-badge" :class="em.docs === em.docsTotal ? 'em-doc-complete' : 'em-doc-partial'">
+                {{ em.docs }}/{{ em.docsTotal }}
+              </span>
+            </td>
+            <td>
+              <span :class="statusMeta[em.status].class">
+                {{ statusMeta[em.status].label }}
+              </span>
+            </td>
+            <td class="text-[12px] tabular-nums text-[var(--text-muted)]">{{ em.submitted }}</td>
+            <td class="text-right">
+              <div class="flex justify-end gap-1">
+                <button v-if="em.status === 'pending_review'" type="button" class="em-action-btn em-action-approve" title="Approve">
+                  <UIcon name="i-heroicons-check" style="width: 14px; height: 14px;" />
+                </button>
+                <button v-if="em.status === 'approved'" type="button" class="em-action-btn em-action-send" title="Send to insurer">
+                  <UIcon name="i-heroicons-paper-airplane" style="width: 14px; height: 14px;" />
+                </button>
+                <button v-if="em.status === 'sent_to_insurer'" type="button" class="em-action-btn em-action-force" title="Mark in force">
+                  <UIcon name="i-heroicons-shield-check" style="width: 14px; height: 14px;" />
+                </button>
+                <button type="button" class="em-action-btn" title="View details">
+                  <UIcon name="i-heroicons-eye" style="width: 14px; height: 14px;" />
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Queue from composable (if any real items exist) -->
+    <div v-if="items.length > 0" class="em-card">
+      <div class="em-card-head">
+        <UIcon name="i-heroicons-queue-list" style="width: 16px; height: 16px; color: #01696f;" />
+        <span>Live queue (from solicitud intake)</span>
+      </div>
+      <table class="em-table">
+        <thead>
+          <tr>
+            <th>Created</th>
+            <th>Customer</th>
+            <th>Insurer</th>
+            <th>Sub-ramo</th>
+            <th>Line</th>
+            <th>Status</th>
+            <th class="text-right">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in items" :key="row.id">
+            <td class="font-mono text-[11px]">{{ row.createdAt.slice(0, 10) }}</td>
+            <td class="text-[13px]">{{ row.customerLabel }}</td>
+            <td class="text-[13px]">{{ row.insurerSlug }}</td>
+            <td class="text-[13px]">{{ row.subRamoKey }}</td>
+            <td class="text-[13px]">{{ row.productLine }}</td>
+            <td>
+              <span :class="statusMeta[row.status as EmissionStatus]?.class ?? 'em-status-pending'">
+                {{ statusMeta[row.status as EmissionStatus]?.label ?? row.status }}
+              </span>
+            </td>
+            <td class="text-right">
+              <div class="flex justify-end gap-1">
+                <button v-if="row.status === 'pending_review'" type="button" class="em-action-btn em-action-approve" @click="onApprove(row.id)">
+                  <UIcon name="i-heroicons-check" style="width: 14px; height: 14px;" />
+                </button>
+                <button v-if="row.status === 'approved'" type="button" class="em-action-btn em-action-send" @click="onSend(row.id)">
+                  <UIcon name="i-heroicons-paper-airplane" style="width: 14px; height: 14px;" />
+                </button>
+                <button v-if="row.status === 'sent_to_insurer'" type="button" class="em-action-btn em-action-force" @click="onInForce(row.id)">
+                  <UIcon name="i-heroicons-shield-check" style="width: 14px; height: 14px;" />
+                </button>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.em-section-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.06em; color: #8a8a86; margin-bottom: 4px;
+}
+
+/* ── KPI strip ── */
+.em-kpi-strip {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.em-kpi {
+  padding: 16px 20px; background: #ffffff;
+}
+.em-kpi:first-child { border-radius: 12px 0 0 12px; }
+.em-kpi:last-child { border-radius: 0 12px 12px 0; }
+.em-kpi-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+}
+.em-kpi-value {
+  margin-top: 4px; font-size: 22px; font-weight: 600;
+  color: var(--text-primary); font-variant-numeric: tabular-nums;
+}
+.em-kpi-dot {
+  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
+}
+@media (max-width: 640px) {
+  .em-kpi-strip { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* ── Tabs ── */
+.em-tabs {
+  display: inline-flex; gap: 2px; padding: 3px;
+  border-radius: 10px; background: rgba(0,0,0,0.04);
+}
+.em-tab {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 6px 14px; border-radius: 8px;
+  font-size: 13px; font-weight: 500;
+  border: none; cursor: pointer; transition: all 150ms ease;
+}
+.em-tab-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.em-tab-off { background: transparent; color: var(--text-muted); }
+.em-tab-off:hover { color: var(--text-primary); }
+.em-tab-count {
+  font-size: 10px; font-weight: 600; padding: 1px 5px;
+  border-radius: 9999px; background: rgba(0,0,0,0.06); color: var(--text-muted);
+}
+.em-tab-count-on { background: rgba(1,105,111,0.1); color: #01696f; }
+
+/* ── Card ── */
+.em-card {
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.em-card-head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,0.06);
+  font-size: 13px; font-weight: 600; color: var(--text-primary);
+}
+
+/* ── Table ── */
+.em-table {
+  width: 100%; border-collapse: collapse; font-size: 13px;
+}
+.em-table th {
+  text-align: left; padding: 10px 16px;
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.em-table td {
+  padding: 12px 16px; color: var(--text-primary);
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+  vertical-align: top;
+}
+.em-table tr:last-child td { border-bottom: none; }
+.em-table tr:hover td { background: rgba(0,0,0,0.015); }
+
+/* ── Status badges ── */
+.em-status-pending {
+  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
+  background: rgba(194,123,26,0.08); color: #964219;
+  white-space: nowrap;
+}
+.em-status-approved {
+  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
+  background: rgba(1,105,111,0.08); color: #01696f;
+  white-space: nowrap;
+}
+.em-status-sent {
+  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
+  background: rgba(124,58,237,0.08); color: #7c3aed;
+  white-space: nowrap;
+}
+.em-status-force {
+  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
+  background: rgba(15,123,95,0.08); color: #0f7b5f;
+  white-space: nowrap;
+}
+
+/* ── Doc badge ── */
+.em-doc-badge {
+  font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px;
+}
+.em-doc-complete { background: rgba(15,123,95,0.08); color: #0f7b5f; }
+.em-doc-partial { background: rgba(194,123,26,0.08); color: #964219; }
+
+/* ── Action buttons ── */
+.em-action-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 6px;
+  border: none; cursor: pointer;
+  background: rgba(0,0,0,0.03); color: #8a8a86;
+  transition: all 150ms ease;
+}
+.em-action-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
+.em-action-approve:hover { background: rgba(15,123,95,0.1); color: #0f7b5f; }
+.em-action-send:hover { background: rgba(1,105,111,0.1); color: #01696f; }
+.em-action-force:hover { background: rgba(15,123,95,0.1); color: #0f7b5f; }
+</style>
diff --git a/app/pages/onboarding/index.vue b/app/pages/onboarding/index.vue
new file mode 100644
index 0000000..c9ca27f
--- /dev/null
+++ b/app/pages/onboarding/index.vue
@@ -0,0 +1,251 @@
+<script setup lang="ts">
+usePageTitle('Sales Pipeline')
+
+type Stage = 'Lead' | 'Qualified' | 'Proposal' | 'Negotiation' | 'Won'
+
+interface Deal {
+  id: string
+  customer: string
+  product: string
+  line: 'Auto' | 'Health' | 'Life' | 'General Risk' | 'Custom'
+  premium: number
+  agent: string
+  stage: Stage
+  daysInStage: number
+  urgent: boolean
+  note?: string
+}
+
+const deals: Deal[] = [
+  { id: 'D-001', customer: 'María Pérez', product: 'Auto Individual', line: 'Auto', premium: 1200, agent: 'Ana R.', stage: 'Lead', daysInStage: 1, urgent: false },
+  { id: 'D-002', customer: 'Empresa ABC S.A.', product: 'Fleet Auto', line: 'Auto', premium: 18400, agent: 'Carlos M.', stage: 'Lead', daysInStage: 3, urgent: false },
+  { id: 'D-003', customer: 'Jorge Herrera', product: 'Vida Individual', line: 'Life', premium: 3200, agent: 'Ana R.', stage: 'Lead', daysInStage: 0, urgent: false, note: 'Referral from client D-051' },
+  { id: 'D-004', customer: 'Clínica San José', product: 'Salud Grupal', line: 'Health', premium: 42000, agent: 'Luis F.', stage: 'Qualified', daysInStage: 5, urgent: false },
+  { id: 'D-005', customer: 'Carmen Ruiz', product: 'Salud Individual', line: 'Health', premium: 2800, agent: 'Ana R.', stage: 'Qualified', daysInStage: 2, urgent: false },
+  { id: 'D-006', customer: 'Constructora Delta', product: 'Todo Riesgo', line: 'General Risk', premium: 55000, agent: 'Carlos M.', stage: 'Qualified', daysInStage: 7, urgent: true, note: 'RFQ deadline Friday' },
+  { id: 'D-007', customer: 'Rodrigo Blanco', product: 'Vida + Accidentes', line: 'Life', premium: 4100, agent: 'Luis F.', stage: 'Qualified', daysInStage: 4, urgent: false },
+  { id: 'D-008', customer: 'Hotel Pacífico', product: 'Incendio y Robo', line: 'General Risk', premium: 28000, agent: 'Carlos M.', stage: 'Proposal', daysInStage: 6, urgent: false },
+  { id: 'D-009', customer: 'Supermercado Tico', product: 'Responsabilidad Civil', line: 'General Risk', premium: 9800, agent: 'Ana R.', stage: 'Proposal', daysInStage: 9, urgent: true, note: 'Follow up required today' },
+  { id: 'D-010', customer: 'Isabel Mora', product: 'Auto Individual', line: 'Auto', premium: 980, agent: 'Luis F.', stage: 'Proposal', daysInStage: 3, urgent: false },
+  { id: 'D-011', customer: 'Banco Regional', product: 'Colectivo Vida', line: 'Life', premium: 120000, agent: 'Carlos M.', stage: 'Negotiation', daysInStage: 14, urgent: true, note: 'Legal review pending' },
+  { id: 'D-012', customer: 'Farmacia Salud', product: 'Todo Riesgo', line: 'General Risk', premium: 17500, agent: 'Luis F.', stage: 'Negotiation', daysInStage: 8, urgent: false },
+  { id: 'D-013', customer: 'Andrea Cascante', product: 'Salud Individual', line: 'Health', premium: 2200, agent: 'Ana R.', stage: 'Won', daysInStage: 0, urgent: false },
+  { id: 'D-014', customer: 'Transportes del Sur', product: 'Fleet Auto', line: 'Auto', premium: 24000, agent: 'Carlos M.', stage: 'Won', daysInStage: 0, urgent: false },
+  { id: 'D-015', customer: 'Manuel Torres', product: 'Vida Individual', line: 'Life', premium: 5600, agent: 'Luis F.', stage: 'Won', daysInStage: 0, urgent: false },
+]
+
+const search = ref('')
+const filterLine = ref<string>('all')
+const filterAgent = ref<string>('all')
+
+const lineOptions = [
+  { label: 'All Lines', value: 'all' },
+  { label: 'Auto', value: 'Auto' },
+  { label: 'Health', value: 'Health' },
+  { label: 'Life', value: 'Life' },
+  { label: 'General Risk', value: 'General Risk' },
+  { label: 'Custom', value: 'Custom' },
+]
+
+const agentOptions = [
+  { label: 'All Agents', value: 'all' },
+  { label: 'Ana R.', value: 'Ana R.' },
+  { label: 'Carlos M.', value: 'Carlos M.' },
+  { label: 'Luis F.', value: 'Luis F.' },
+]
+
+const stages: Stage[] = ['Lead', 'Qualified', 'Proposal', 'Negotiation', 'Won']
+
+const stageLabel: Record<Stage, string> = {
+  Lead:        'Lead',
+  Qualified:   'Data Collection',
+  Proposal:    'Quotation',
+  Negotiation: 'Solicitud',
+  Won:         'Emision',
+}
+
+const stageConfig: Record<Stage, { color: string; dot: string; headerBg: string }> = {
+  Lead:        { color: 'text-[var(--text-muted)]', dot: 'bg-[var(--text-muted)]', headerBg: 'bg-[var(--surface)] border-[var(--card-border)]' },
+  Qualified:   { color: 'text-[var(--brand)]',  dot: 'bg-[var(--brand)]',  headerBg: 'bg-[var(--brand-faint)] border-[var(--brand-soft)]' },
+  Proposal:    { color: 'text-violet-700', dot: 'bg-violet-400', headerBg: 'bg-violet-50 border-violet-200' },
+  Negotiation: { color: 'text-amber-700', dot: 'bg-amber-400', headerBg: 'bg-amber-50 border-amber-200' },
+  Won:         { color: 'text-emerald-700', dot: 'bg-emerald-500', headerBg: 'bg-emerald-50 border-emerald-200' },
+}
+
+const lineColors: Record<string, string> = {
+  Auto: 'bg-[var(--brand-soft)] text-[var(--brand)]',
+  Health: 'bg-emerald-100 text-emerald-700',
+  Life: 'bg-violet-100 text-violet-700',
+  'General Risk': 'bg-amber-100 text-amber-700',
+  Custom: 'bg-[var(--badge-muted-bg)] text-[var(--text-muted)]',
+}
+
+const filteredDeals = computed(() => {
+  return deals.filter(d => {
+    const q = search.value.toLowerCase()
+    const matchSearch = !q || d.customer.toLowerCase().includes(q) || d.product.toLowerCase().includes(q) || d.id.toLowerCase().includes(q)
+    const matchLine = filterLine.value === 'all' || d.line === filterLine.value
+    const matchAgent = filterAgent.value === 'all' || d.agent === filterAgent.value
+    return matchSearch && matchLine && matchAgent
+  })
+})
+
+function stageDeals(stage: Stage) {
+  return filteredDeals.value.filter(d => d.stage === stage)
+}
+
+function stageTotal(stage: Stage) {
+  return stageDeals(stage).reduce((s, d) => s + d.premium, 0)
+}
+
+function fmt(n: number) {
+  return n >= 1000 ? `$${(n / 1000).toFixed(n % 1000 === 0 ? 0 : 1)}k` : `$${n}`
+}
+
+function daysLabel(n: number) {
+  if (n === 0) return 'Today'
+  return `${n}d`
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-5">
+    <!-- Header -->
+    <div class="flex items-start justify-between">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Sales Pipeline</h1>
+        <p class="mt-1 text-[13px] text-[var(--text-muted)]">{{ filteredDeals.length }} opportunities · {{ fmt(filteredDeals.reduce((s, d) => s + d.premium, 0)) }} total premium</p>
+      </div>
+      <div class="flex gap-2">
+        <NuxtLink to="/onboarding/solicitud">
+          <UButton size="sm" color="primary" icon="i-heroicons-plus">New Solicitud</UButton>
+        </NuxtLink>
+        <NuxtLink to="/sales/quick-lead">
+          <UButton size="sm" color="primary" variant="soft" icon="i-heroicons-user-plus">Quick Lead</UButton>
+        </NuxtLink>
+      </div>
+    </div>
+
+    <!-- Search + Filters -->
+    <div class="flex flex-wrap items-center gap-3 rounded-xl border border-[var(--card-border)] bg-[var(--surface)] px-4 py-3 shadow-sm ring-1 ring-[var(--surface)]">
+      <UInput
+        v-model="search"
+        icon="i-heroicons-magnifying-glass"
+        placeholder="Search customer, product, ID…"
+        size="sm"
+        class="w-64"
+      />
+      <USelect
+        v-model="filterLine"
+        :items="lineOptions"
+        size="sm"
+        class="w-36"
+      />
+      <USelect
+        v-model="filterAgent"
+        :items="agentOptions"
+        size="sm"
+        class="w-36"
+      />
+      <div class="ml-auto flex items-center gap-2 text-[12px] text-[var(--text-muted)]">
+        <span
+          v-for="stage in stages"
+          :key="stage"
+          class="flex items-center gap-1"
+        >
+          <span class="h-2 w-2 rounded-full" :class="stageConfig[stage].dot" />
+          <span class="text-[11px]">{{ stageLabel[stage] }}</span>
+          <span class="font-semibold">{{ stageDeals(stage).length }}</span>
+          <span class="text-[var(--text-muted)] opacity-50 last:hidden">·</span>
+        </span>
+      </div>
+    </div>
+
+    <!-- Kanban board -->
+    <div class="flex gap-3 overflow-x-auto pb-2">
+      <div
+        v-for="stage in stages"
+        :key="stage"
+        class="flex w-[230px] shrink-0 flex-col gap-2"
+      >
+        <!-- Column header -->
+        <div
+          class="flex items-center justify-between rounded-lg border px-3 py-2"
+          :class="stageConfig[stage].headerBg"
+        >
+          <div class="flex items-center gap-2">
+            <span class="h-2 w-2 rounded-full" :class="stageConfig[stage].dot" />
+            <span class="text-[13px] font-semibold" :class="stageConfig[stage].color">{{ stageLabel[stage] }}</span>
+          </div>
+          <div class="flex items-center gap-1.5">
+            <span class="text-[11px] text-[var(--text-muted)]">{{ fmt(stageTotal(stage)) }}</span>
+            <span class="flex h-5 min-w-[20px] items-center justify-center rounded-full bg-[var(--surface)]/70 px-1.5 text-[11px] font-semibold text-[var(--text-muted)] ring-1 ring-[var(--card-border)]/60">
+              {{ stageDeals(stage).length }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Empty state -->
+        <div
+          v-if="stageDeals(stage).length === 0"
+          class="rounded-xl border border-dashed border-[var(--card-border)] bg-[var(--surface)]/50 px-3 py-8 text-center"
+        >
+          <p class="text-[12px] text-[var(--text-muted)] opacity-70">No deals in this stage</p>
+        </div>
+
+        <!-- Deal cards -->
+        <div
+          v-for="deal in stageDeals(stage)"
+          :key="deal.id"
+          class="group rounded-xl border px-3.5 py-3 shadow-sm ring-1 transition hover:shadow-md"
+          :class="deal.urgent
+            ? 'border-rose-300 bg-rose-50/50 ring-rose-100 hover:border-rose-400'
+            : 'border-[var(--card-border)] bg-[var(--surface)] ring-[var(--surface)] hover:border-[var(--brand)]/30'"
+        >
+          <!-- Customer + product line badge -->
+          <div class="flex items-start justify-between gap-1">
+            <p class="text-[13px] font-semibold leading-snug text-[var(--text-primary)]">{{ deal.customer }}</p>
+            <span
+              class="ml-1 shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-semibold"
+              :class="lineColors[deal.line]"
+            >{{ deal.line }}</span>
+          </div>
+
+          <!-- Product -->
+          <p class="mt-0.5 text-[12px] text-[var(--text-muted)]">{{ deal.product }}</p>
+
+          <!-- Note -->
+          <p v-if="deal.note" class="mt-1.5 text-[11px] italic text-amber-600">{{ deal.note }}</p>
+
+          <!-- Meta row -->
+          <div class="mt-2.5 flex items-center justify-between border-t border-[var(--divider)] pt-2">
+            <div class="flex items-center gap-1.5">
+              <!-- Urgent flag -->
+              <span
+                v-if="deal.urgent"
+                class="inline-flex items-center gap-1 rounded-full bg-rose-100 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wide text-rose-600"
+              >
+                <span class="h-1.5 w-1.5 rounded-full bg-rose-500" />
+                Urgent
+              </span>
+              <span class="text-[12px] font-bold text-[var(--text-primary)]">{{ fmt(deal.premium) }}</span>
+            </div>
+            <div class="flex items-center gap-2 text-[11px] text-[var(--text-muted)] opacity-70">
+              <span>{{ deal.agent }}</span>
+              <span>·</span>
+              <span>{{ daysLabel(deal.daysInStage) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Legend -->
+    <div class="flex flex-wrap gap-4 rounded-lg border border-[var(--card-border)]/60 bg-[var(--surface)] px-4 py-2.5 text-[11px] text-[var(--text-muted)] shadow-sm">
+      <span class="flex items-center gap-1.5"><span class="inline-flex items-center gap-1 rounded-full bg-rose-100 px-1.5 py-0.5 text-[9px] font-bold uppercase text-rose-600"><span class="h-1.5 w-1.5 rounded-full bg-rose-500" />Urgent</span> Action required</span>
+      <span class="flex items-center gap-1.5"><span class="font-bold text-[var(--text-primary)]">$18k</span> Total premium at stage</span>
+      <span>Days in stage shown on each card</span>
+      <NuxtLink to="/onboarding/emissions" class="ml-auto font-medium text-[var(--brand)] hover:text-[var(--brand)]">Emissions queue →</NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/onboarding/policy-upload/new.vue b/app/pages/onboarding/policy-upload/new.vue
new file mode 100644
index 0000000..9ee5748
--- /dev/null
+++ b/app/pages/onboarding/policy-upload/new.vue
@@ -0,0 +1,727 @@
+<script setup lang="ts">
+usePageTitle('Nombramiento')
+
+const intakeMode = ref<'scan' | 'manual'>('scan')
+const customerMode = ref<'existing' | 'new'>('existing')
+const customerSearch = ref('')
+
+const uploadState = ref<'idle' | 'uploading' | 'processing' | 'review'>('idle')
+const fileName = ref('')
+const dragOver = ref(false)
+
+/* ── Extracted policy data (mock — would come from AI model) ── */
+const extracted = reactive({
+  policyNumber: '',
+  carrier: '',
+  lob: '',
+  effectiveDate: '',
+  expirationDate: '',
+  premium: '',
+  insuredName: '',
+  insuredId: '',
+  insuredEmail: '',
+  insuredPhone: '',
+  currentBroker: '',
+  coverageSummary: '',
+  customerMatch: null as null | 'existing' | 'new',
+  matchedCustomerId: null as null | string,
+  matchedCustomerName: null as null | string,
+  confidence: 0,
+})
+
+function simulateUpload(name: string) {
+  fileName.value = name
+  uploadState.value = 'uploading'
+
+  setTimeout(() => {
+    uploadState.value = 'processing'
+
+    setTimeout(() => {
+      // Simulate AI extraction results
+      extracted.policyNumber = 'POL-2024-88412'
+      extracted.carrier = 'ASSA Compania de Seguros'
+      extracted.lob = 'Auto'
+      extracted.effectiveDate = '2024-06-15'
+      extracted.expirationDate = '2025-06-15'
+      extracted.premium = '$1,840.00'
+      extracted.insuredName = 'María Elena Pérez Solano'
+      extracted.insuredId = '1-0456-0812'
+      extracted.insuredEmail = 'maria.perez@email.com'
+      extracted.insuredPhone = '+506 8834-2291'
+      extracted.currentBroker = 'Seguros Internacionales S.A.'
+      extracted.coverageSummary = 'Comprehensive auto coverage, $50K liability, $25K collision, roadside assistance included.'
+      extracted.customerMatch = 'existing'
+      extracted.matchedCustomerId = 'C-1042'
+      extracted.matchedCustomerName = 'María Pérez'
+      extracted.confidence = 94
+
+      uploadState.value = 'review'
+    }, 2000)
+  }, 1200)
+}
+
+function onFileSelect(e: Event) {
+  const input = e.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (file) simulateUpload(file.name)
+}
+
+function onDrop(e: DragEvent) {
+  e.preventDefault()
+  dragOver.value = false
+  const file = e.dataTransfer?.files?.[0]
+  if (file) simulateUpload(file.name)
+}
+
+function reset() {
+  uploadState.value = 'idle'
+  fileName.value = ''
+  extracted.policyNumber = ''
+  extracted.carrier = ''
+  extracted.customerMatch = null
+  extracted.confidence = 0
+}
+
+const toast = useToast()
+
+function confirmTransfer() {
+  toast.add({
+    title: 'Nombramiento initiated',
+    description: `Broker of record transfer started for ${extracted.policyNumber}. The customer profile has been updated.`,
+    color: 'success'
+  })
+  reset()
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl space-y-6 pb-12">
+    <!-- Back + header -->
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <NuxtLink to="/onboarding" class="inline-flex">
+        <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">
+          Sales Pipeline
+        </UButton>
+      </NuxtLink>
+    </div>
+
+    <div class="max-w-2xl">
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Nombramiento</h1>
+      <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Register a policy and become the broker of record. Scan a document with AI or enter details manually, then link to an existing customer or create a new one.
+      </p>
+    </div>
+
+    <!-- Intake mode toggle -->
+    <div v-if="uploadState === 'idle'" class="flex flex-col gap-4">
+      <div class="nom-mode-toggle">
+        <button
+          type="button"
+          class="nom-mode-btn"
+          :class="intakeMode === 'scan' ? 'nom-mode-active' : 'nom-mode-inactive'"
+          @click="intakeMode = 'scan'"
+        >
+          <UIcon name="i-heroicons-sparkles" style="width: 16px; height: 16px;" />
+          AI scan
+        </button>
+        <button
+          type="button"
+          class="nom-mode-btn"
+          :class="intakeMode === 'manual' ? 'nom-mode-active' : 'nom-mode-inactive'"
+          @click="intakeMode = 'manual'"
+        >
+          <UIcon name="i-heroicons-pencil-square" style="width: 16px; height: 16px;" />
+          Manual entry
+        </button>
+      </div>
+
+      <!-- Customer association -->
+      <div class="nom-customer-section">
+        <p class="nom-label">Customer</p>
+        <div class="mt-2 flex gap-2">
+          <button
+            type="button"
+            class="nom-customer-btn"
+            :class="customerMode === 'existing' ? 'nom-customer-active' : 'nom-customer-inactive'"
+            @click="customerMode = 'existing'"
+          >
+            <UIcon name="i-heroicons-user-circle" style="width: 16px; height: 16px;" />
+            Existing customer
+          </button>
+          <button
+            type="button"
+            class="nom-customer-btn"
+            :class="customerMode === 'new' ? 'nom-customer-active' : 'nom-customer-inactive'"
+            @click="customerMode = 'new'"
+          >
+            <UIcon name="i-heroicons-user-plus" style="width: 16px; height: 16px;" />
+            New customer
+          </button>
+        </div>
+        <div v-if="customerMode === 'existing'" class="mt-3">
+          <UInput
+            v-model="customerSearch"
+            icon="i-heroicons-magnifying-glass"
+            placeholder="Search by name, ID, or email..."
+            size="sm"
+            class="max-w-sm"
+          />
+          <p class="mt-1.5 text-[11px] text-[var(--text-muted)]">Select the customer this policy belongs to. AI scan will also attempt automatic matching.</p>
+        </div>
+        <div v-else class="mt-3">
+          <p class="text-[12px] text-[var(--text-muted)]">A new customer profile will be created from the policy details.</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══ AI SCAN PATH ═══ -->
+
+    <!-- Upload zone — idle state (scan mode) -->
+    <div
+      v-if="uploadState === 'idle' && intakeMode === 'scan'"
+      class="nom-upload-zone"
+      :class="{ 'nom-upload-zone-active': dragOver }"
+      @dragover.prevent="dragOver = true"
+      @dragleave="dragOver = false"
+      @drop="onDrop"
+    >
+      <div class="flex flex-col items-center gap-3 text-center">
+        <div class="nom-icon-ring">
+          <UIcon name="i-heroicons-document-arrow-up" style="width: 24px; height: 24px;" />
+        </div>
+        <div>
+          <p class="text-[14px] font-medium text-[var(--text-primary)]">Upload policy document</p>
+          <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+            Drop a PDF here, or click to browse. AI will read the policy and extract all fields.
+          </p>
+        </div>
+        <label class="nom-browse-btn">
+          Browse files
+          <input type="file" accept=".pdf,.png,.jpg,.jpeg" class="sr-only" @change="onFileSelect" />
+        </label>
+        <p class="text-[11px] text-[var(--text-muted)] opacity-60">PDF, PNG, or JPG up to 25 MB</p>
+      </div>
+    </div>
+
+    <!-- ═══ MANUAL ENTRY PATH ═══ -->
+    <div v-if="uploadState === 'idle' && intakeMode === 'manual'" class="nom-data-card">
+      <div class="nom-data-header">
+        <p class="text-[14px] font-semibold text-[var(--text-primary)]">Policy details</p>
+        <p class="text-[13px] text-[var(--text-muted)]">Enter the policy information manually. All fields can be edited later.</p>
+      </div>
+
+      <div class="nom-data-grid">
+        <div class="nom-field">
+          <label class="nom-label">Policy number</label>
+          <UInput placeholder="e.g. POL-2024-00001" size="sm" />
+        </div>
+        <div class="nom-field">
+          <label class="nom-label">Carrier</label>
+          <UInput placeholder="Carrier name" size="sm" />
+        </div>
+        <div class="nom-field">
+          <label class="nom-label">Line of business</label>
+          <USelect :items="[{ label: 'Auto', value: 'auto' }, { label: 'Health', value: 'health' }, { label: 'Life', value: 'life' }, { label: 'General Risk', value: 'general-risk' }, { label: 'Other', value: 'other' }]" placeholder="Select..." size="sm" />
+        </div>
+        <div class="nom-field">
+          <label class="nom-label">Premium</label>
+          <UInput placeholder="$0.00" size="sm" />
+        </div>
+        <div class="nom-field">
+          <label class="nom-label">Effective date</label>
+          <UInput size="sm" type="date" />
+        </div>
+        <div class="nom-field">
+          <label class="nom-label">Expiration date</label>
+          <UInput size="sm" type="date" />
+        </div>
+        <div class="nom-field">
+          <label class="nom-label">Previous broker</label>
+          <UInput placeholder="Outgoing brokerage (if any)" size="sm" />
+        </div>
+      </div>
+
+      <div class="nom-data-divider" />
+
+      <div class="nom-data-grid" v-if="customerMode === 'new'">
+        <div class="nom-field">
+          <label class="nom-label">Insured name</label>
+          <UInput placeholder="Full legal name" size="sm" />
+        </div>
+        <div class="nom-field">
+          <label class="nom-label">ID number</label>
+          <UInput placeholder="Cédula or passport" size="sm" />
+        </div>
+        <div class="nom-field">
+          <label class="nom-label">Email</label>
+          <UInput placeholder="email@example.com" size="sm" />
+        </div>
+        <div class="nom-field">
+          <label class="nom-label">Phone</label>
+          <UInput placeholder="+506 0000-0000" size="sm" />
+        </div>
+      </div>
+      <div v-else class="px-5 pb-2">
+        <p class="text-[12px] text-[var(--text-muted)] italic">Customer details will be pulled from the selected existing profile.</p>
+      </div>
+
+      <div class="nom-data-divider" />
+
+      <div class="px-5 pb-5">
+        <label class="nom-label">Coverage notes</label>
+        <UTextarea placeholder="Optional — describe coverage, limits, deductibles..." size="sm" :rows="2" class="mt-1.5" />
+      </div>
+    </div>
+
+    <!-- Manual entry actions -->
+    <div v-if="uploadState === 'idle' && intakeMode === 'manual'" class="flex flex-wrap items-center justify-end gap-2">
+      <UButton color="neutral" variant="outline">Save as draft</UButton>
+      <UButton color="primary">Register policy</UButton>
+    </div>
+
+    <!-- Uploading state -->
+    <div v-else-if="uploadState === 'uploading'" class="nom-status-card">
+      <div class="flex items-center gap-3">
+        <div class="nom-spinner" />
+        <div>
+          <p class="text-[14px] font-medium text-[var(--text-primary)]">Uploading {{ fileName }}</p>
+          <p class="mt-0.5 text-[13px] text-[var(--text-muted)]">Sending document to processing pipeline...</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Processing state -->
+    <div v-else-if="uploadState === 'processing'" class="nom-status-card">
+      <div class="flex items-center gap-3">
+        <div class="nom-spinner" />
+        <div>
+          <p class="text-[14px] font-medium text-[var(--text-primary)]">AI is reading the policy</p>
+          <p class="mt-0.5 text-[13px] text-[var(--text-muted)]">Extracting insured details, coverage terms, carrier info, and matching against existing customers...</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Review state — extracted data -->
+    <template v-else-if="uploadState === 'review'">
+      <!-- Confidence bar -->
+      <div class="nom-confidence-strip">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-sparkles" style="width: 16px; height: 16px; color: #01696f;" />
+          <span class="text-[13px] font-medium text-[var(--text-primary)]">AI extraction complete</span>
+        </div>
+        <div class="flex items-center gap-3">
+          <div class="nom-confidence-bar-track">
+            <div class="nom-confidence-bar-fill" :style="`width: ${extracted.confidence}%`" />
+          </div>
+          <span class="nom-confidence-badge">{{ extracted.confidence }}%</span>
+          <span class="text-[10px] font-semibold uppercase" :style="extracted.confidence >= 90 ? 'color: #059669' : extracted.confidence >= 70 ? 'color: #d97706' : 'color: #dc2626'">
+            {{ extracted.confidence >= 90 ? 'High' : extracted.confidence >= 70 ? 'Medium' : 'Low' }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Customer match -->
+      <div v-if="extracted.customerMatch === 'existing'" class="nom-match-card nom-match-existing">
+        <UIcon name="i-heroicons-user-circle" style="width: 20px; height: 20px; flex-shrink: 0;" />
+        <div class="min-w-0 flex-1">
+          <p class="text-[13px] font-medium text-[var(--text-primary)]">
+            Matched to existing customer: <strong>{{ extracted.matchedCustomerName }}</strong>
+            <span class="text-[var(--text-muted)]"> ({{ extracted.matchedCustomerId }})</span>
+          </p>
+          <p class="mt-0.5 text-[12px] text-[var(--text-muted)]">This policy will be added to their existing profile.</p>
+        </div>
+        <UButton size="xs" color="neutral" variant="soft">Change</UButton>
+      </div>
+      <div v-else-if="extracted.customerMatch === 'new'" class="nom-match-card nom-match-new">
+        <UIcon name="i-heroicons-user-plus" style="width: 20px; height: 20px; flex-shrink: 0;" />
+        <div class="min-w-0 flex-1">
+          <p class="text-[13px] font-medium text-[var(--text-primary)]">New customer will be created</p>
+          <p class="mt-0.5 text-[12px] text-[var(--text-muted)]">No matching customer found. A new profile will be set up from the extracted data.</p>
+        </div>
+      </div>
+
+      <!-- Extracted fields -->
+      <div class="nom-data-card">
+        <div class="nom-data-header">
+          <p class="text-[14px] font-semibold text-[var(--text-primary)]">Policy details</p>
+          <p class="text-[13px] text-[var(--text-muted)]">Review and correct any fields before initiating the transfer.</p>
+        </div>
+
+        <div class="nom-data-grid">
+          <div class="nom-field">
+            <label class="nom-label">Policy number</label>
+            <UInput :model-value="extracted.policyNumber" size="sm" />
+          </div>
+          <div class="nom-field">
+            <label class="nom-label">Carrier</label>
+            <UInput :model-value="extracted.carrier" size="sm" />
+          </div>
+          <div class="nom-field">
+            <label class="nom-label">Line of business</label>
+            <UInput :model-value="extracted.lob" size="sm" />
+          </div>
+          <div class="nom-field">
+            <label class="nom-label">Premium</label>
+            <UInput :model-value="extracted.premium" size="sm" />
+          </div>
+          <div class="nom-field">
+            <label class="nom-label">Effective date</label>
+            <UInput :model-value="extracted.effectiveDate" size="sm" type="date" />
+          </div>
+          <div class="nom-field">
+            <label class="nom-label">Expiration date</label>
+            <UInput :model-value="extracted.expirationDate" size="sm" type="date" />
+          </div>
+          <div class="nom-field">
+            <label class="nom-label">Current broker</label>
+            <UInput :model-value="extracted.currentBroker" size="sm" />
+          </div>
+        </div>
+
+        <div class="nom-data-divider" />
+
+        <div class="nom-data-grid">
+          <div class="nom-field">
+            <label class="nom-label">Insured name</label>
+            <UInput :model-value="extracted.insuredName" size="sm" />
+          </div>
+          <div class="nom-field">
+            <label class="nom-label">ID number</label>
+            <UInput :model-value="extracted.insuredId" size="sm" />
+          </div>
+          <div class="nom-field">
+            <label class="nom-label">Email</label>
+            <UInput :model-value="extracted.insuredEmail" size="sm" />
+          </div>
+          <div class="nom-field">
+            <label class="nom-label">Phone</label>
+            <UInput :model-value="extracted.insuredPhone" size="sm" />
+          </div>
+        </div>
+
+        <div class="nom-data-divider" />
+
+        <div class="px-5 pb-5">
+          <label class="nom-label">Coverage summary</label>
+          <UTextarea :model-value="extracted.coverageSummary" size="sm" :rows="2" class="mt-1.5" />
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <UButton color="neutral" variant="soft" @click="reset">
+          Start over
+        </UButton>
+        <div class="flex gap-2">
+          <UButton color="neutral" variant="outline">
+            Save as draft
+          </UButton>
+          <UButton color="primary" @click="confirmTransfer">
+            Initiate transfer
+          </UButton>
+        </div>
+      </div>
+    </template>
+
+    <!-- How it works -->
+    <div v-if="uploadState === 'idle'" class="nom-info-section">
+      <p class="text-[13px] font-semibold text-[var(--text-primary)]">How it works</p>
+      <ol class="nom-steps">
+        <li>
+          <span class="nom-step-num">1</span>
+          <div>
+            <p class="text-[13px] font-medium text-[var(--text-primary)]">Upload the policy</p>
+            <p class="text-[12px] text-[var(--text-muted)]">Drop a PDF or image of the policy from the outgoing brokerage.</p>
+          </div>
+        </li>
+        <li>
+          <span class="nom-step-num">2</span>
+          <div>
+            <p class="text-[13px] font-medium text-[var(--text-primary)]">AI extracts the data</p>
+            <p class="text-[12px] text-[var(--text-muted)]">Policy number, carrier, coverage, insured details, and dates are read automatically.</p>
+          </div>
+        </li>
+        <li>
+          <span class="nom-step-num">3</span>
+          <div>
+            <p class="text-[13px] font-medium text-[var(--text-primary)]">Customer matching</p>
+            <p class="text-[12px] text-[var(--text-muted)]">The system checks if the insured is an existing customer or creates a new profile.</p>
+          </div>
+        </li>
+        <li>
+          <span class="nom-step-num">4</span>
+          <div>
+            <p class="text-[13px] font-medium text-[var(--text-primary)]">Review and transfer</p>
+            <p class="text-[12px] text-[var(--text-muted)]">Verify the extracted fields, then initiate the broker of record change.</p>
+          </div>
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* ── Mode toggle ── */
+.nom-mode-toggle {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+}
+.nom-mode-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.nom-mode-active {
+  background: #ffffff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+.nom-mode-inactive {
+  background: transparent;
+  color: var(--text-muted);
+}
+.nom-mode-inactive:hover {
+  color: var(--text-primary);
+}
+
+/* ── Customer association ── */
+.nom-customer-section {
+  padding: 16px 20px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--surface);
+}
+.nom-customer-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.nom-customer-active {
+  background: rgba(1, 105, 111, 0.06);
+  border-color: rgba(1, 105, 111, 0.2);
+  color: #01696f;
+}
+.nom-customer-inactive {
+  background: transparent;
+  border-color: rgba(0, 0, 0, 0.08);
+  color: var(--text-muted);
+}
+.nom-customer-inactive:hover {
+  border-color: rgba(0, 0, 0, 0.15);
+  color: var(--text-primary);
+}
+
+/* ── Upload drop zone ── */
+.nom-upload-zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 220px;
+  padding: 40px 24px;
+  border: 1.5px dashed rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  background: var(--surface);
+  transition: border-color 150ms ease, background 150ms ease;
+  cursor: pointer;
+}
+.nom-upload-zone:hover,
+.nom-upload-zone-active {
+  border-color: #01696f;
+  background: rgba(1, 105, 111, 0.02);
+}
+
+.nom-icon-ring {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: rgba(1, 105, 111, 0.06);
+  color: #01696f;
+}
+
+.nom-browse-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #01696f;
+  background: rgba(1, 105, 111, 0.08);
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.nom-browse-btn:hover {
+  background: rgba(1, 105, 111, 0.14);
+}
+
+/* ── Status card (uploading / processing) ── */
+.nom-status-card {
+  padding: 24px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--surface);
+}
+
+.nom-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgba(1, 105, 111, 0.15);
+  border-top-color: #01696f;
+  border-radius: 50%;
+  animation: nom-spin 0.8s linear infinite;
+  flex-shrink: 0;
+}
+@keyframes nom-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Confidence strip ── */
+.nom-confidence-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: 10px;
+  background: rgba(1, 105, 111, 0.04);
+  border: 1px solid rgba(1, 105, 111, 0.1);
+}
+
+.nom-confidence-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 600;
+  background: rgba(1, 105, 111, 0.1);
+  color: #01696f;
+}
+.nom-confidence-bar-track {
+  width: 80px;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(0,0,0,0.06);
+  overflow: hidden;
+}
+.nom-confidence-bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  background: #01696f;
+  transition: width 600ms ease;
+}
+
+/* ── Customer match cards ── */
+.nom-match-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 10px;
+  border: 1px solid;
+}
+.nom-match-existing {
+  background: rgba(1, 105, 111, 0.03);
+  border-color: rgba(1, 105, 111, 0.1);
+  color: #01696f;
+}
+.nom-match-new {
+  background: rgba(0, 0, 0, 0.02);
+  border-color: rgba(0, 0, 0, 0.08);
+  color: var(--text-muted);
+}
+
+/* ── Data card ── */
+.nom-data-card {
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+.nom-data-header {
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+.nom-data-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  padding: 20px;
+}
+@media (max-width: 639px) {
+  .nom-data-grid { grid-template-columns: 1fr; }
+}
+.nom-data-divider {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.06);
+  margin: 0 20px;
+}
+.nom-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.nom-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+}
+
+/* ── Info section ── */
+.nom-info-section {
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: var(--surface);
+}
+.nom-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 16px;
+  list-style: none;
+  padding: 0;
+}
+.nom-steps li {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.nom-step-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  background: rgba(1, 105, 111, 0.06);
+  color: #01696f;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+</style>
diff --git a/app/pages/onboarding/potential-leads/new.vue b/app/pages/onboarding/potential-leads/new.vue
new file mode 100644
index 0000000..4d65083
--- /dev/null
+++ b/app/pages/onboarding/potential-leads/new.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+usePageTitle('New Potential Lead')
+</script>
+<template>
+  <div class="mx-auto max-w-2xl space-y-6">
+    <div>
+      <h1 class="mt-0.5 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">New Potential Lead</h1>
+    </div>
+    <div class="rounded-xl border border-dashed border-[var(--card-border)] bg-[var(--surface)] px-8 py-12 text-center shadow-sm">
+      <p class="text-sm text-[var(--text-muted)] opacity-70">Potential lead entry form coming online.</p>
+      <NuxtLink to="/onboarding" class="mt-4 inline-block text-[12px] font-medium text-[var(--brand)] hover:text-[var(--brand)]">← Sales Pipeline</NuxtLink>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/onboarding/solicitud.vue b/app/pages/onboarding/solicitud.vue
new file mode 100644
index 0000000..699d1fd
--- /dev/null
+++ b/app/pages/onboarding/solicitud.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import type { FormCatalogProductLine, FormCatalogSelection } from '~/types/form-catalog'
+import { useFormsCatalog } from '~/composables/useFormsCatalog'
+
+definePageMeta({ ssr: false })
+usePageTitle('Nueva solicitud')
+
+const route = useRoute()
+const toast = useToast()
+
+/* ── Pipeline bar ── */
+const { deals: allDeals } = useSalesPipeline()
+const activeDealId = ref<string | null>(route.query.deal as string | null)
+const activeDeals = computed(() => allDeals.value.filter(d => d.currentStage !== 'emission').slice(0, 10))
+const pipelineDeal = computed(() => {
+  if (activeDealId.value) return allDeals.value.find(d => d.id === activeDealId.value) ?? null
+  return null
+})
+function onPipelineNavigate(stage: string) {
+  const stageRoutes: Record<string, string> = {
+    customer: '/quotes/new', get_quotes: '/quotes/new',
+    present_quotes: '/quotes/compare', solicitud: '/onboarding/solicitud', emission: '/onboarding/emissions',
+  }
+  if (stageRoutes[stage]) navigateTo(stageRoutes[stage])
+}
+
+const {
+  filterRows: resolveForms,
+  insurerItems,
+  subRamoItems,
+  productLineItems,
+  fieldGroupsForMatched
+} = useFormsCatalog()
+
+const { profile, touch } = useCustomerProfileVault()
+const { enqueue } = useEmissionsQueue()
+
+const insurerSlug = ref<string | null>(null)
+const subRamoKey = ref<string | null>(null)
+const personKind = ref<'natural' | 'juridica'>('natural')
+const productLine = ref<FormCatalogProductLine | 'any'>('any')
+
+const subRamoOptions = computed(() => subRamoItems(insurerSlug.value))
+
+watch(insurerSlug, () => {
+  subRamoKey.value = null
+})
+
+const bindToken = computed(() => {
+  const b = route.query.bind
+  return typeof b === 'string' ? b : null
+})
+
+const selection = computed(
+  (): FormCatalogSelection => ({
+    insurerSlug: insurerSlug.value,
+    subRamoKey: subRamoKey.value,
+    personKind: personKind.value,
+    productLine: productLine.value
+  })
+)
+
+const matchedForms = computed(() => resolveForms(selection.value))
+const fieldGroups = computed(() => fieldGroupsForMatched(matchedForms.value))
+
+const personItems = [
+  { label: 'Natural', value: 'natural' as const },
+  { label: 'Jurídica', value: 'juridica' as const }
+]
+
+async function copyLabel(label: string) {
+  try {
+    await navigator.clipboard.writeText(label)
+    toast.add({ title: 'Copied', color: 'success' })
+  } catch {
+    toast.add({ title: 'Could not copy', color: 'error' })
+  }
+}
+
+const draftSavedAt = ref<string | null>(null)
+
+function saveProfileDraft() {
+  touch()
+  draftSavedAt.value = new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+  toast.add({ title: 'Profile draft saved locally', color: 'success' })
+}
+
+function submitToEmissions() {
+  if (!insurerSlug.value || !subRamoKey.value) {
+    toast.add({ title: 'Select insurer and sub-ramo', color: 'error' })
+    return
+  }
+  enqueue({
+    customerLabel: profile.value.full_name || 'Customer',
+    insurerSlug: insurerSlug.value,
+    subRamoKey: subRamoKey.value,
+    productLine: String(productLine.value),
+    bindToken: bindToken.value ?? undefined
+  })
+  toast.add({ title: 'Added to emissions queue', color: 'success' })
+}
+</script>
+
+<template>
+  <div class="sol mx-auto max-w-5xl space-y-6 pb-12">
+    <!-- Back -->
+    <NuxtLink to="/onboarding" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Pipeline</UButton>
+    </NuxtLink>
+
+    <!-- Sales flow indicator -->
+    <SalesFlowIndicator current-stage="solicitud" />
+
+    <UAlert
+      v-if="bindToken"
+      color="info"
+      variant="soft"
+      title="Broker intake link"
+      :description="`Bind token: ${bindToken}`"
+    />
+
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">New Solicitud</h1>
+        <p class="mt-1 max-w-2xl text-[13px] text-[var(--text-muted)]">
+        Choose insurer, sub-ramo, person type, and product line. Required forms come from the
+        <NuxtLink to="/settings/forms" class="text-[#01696f] hover:underline">forms library</NuxtLink>.
+      </p>
+      </div>
+    </div>
+
+    <!-- Pipeline bar -->
+    <div v-if="activeDeals.length > 0">
+      <div v-if="!pipelineDeal" style="padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);">
+        <div class="flex items-center gap-2 text-[12px] text-[var(--text-muted)]">
+          <UIcon name="i-heroicons-arrow-path" style="width: 13px; height: 13px; opacity: 0.5;" />
+          <span class="font-medium">Continue an active deal:</span>
+        </div>
+        <div class="flex flex-wrap gap-2 mt-2">
+          <button v-for="d in activeDeals" :key="d.id" type="button" style="display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:#fff;font-size:12px;cursor:pointer;" @click="activeDealId = d.id">
+            <span class="font-semibold">{{ d.customerName.split(' ').slice(0, 2).join(' ') }}</span>
+            <span style="font-size:10px;font-weight:600;padding:0 5px;border-radius:9999px;background:rgba(1,105,111,0.07);color:#01696f;">{{ d.productLine }}</span>
+          </button>
+        </div>
+      </div>
+      <template v-else>
+        <div class="flex items-center justify-between mb-1">
+          <span class="text-[11px] font-semibold uppercase tracking-wider text-[#8a8a86]">Active Deal</span>
+          <button type="button" class="text-[11px] text-[var(--text-muted)] hover:text-[var(--text-primary)]" @click="activeDealId = null">Switch deal</button>
+        </div>
+        <SalesPipelineBar :deal="pipelineDeal" @navigate="onPipelineNavigate" />
+      </template>
+    </div>
+
+    <div class="sol-card">
+      <div class="sol-card-head">
+        <UIcon name="i-heroicons-adjustments-horizontal" style="width: 16px; height: 16px; color: #01696f;" />
+        <span>Selection</span>
+      </div>
+      <div class="sol-card-body grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <UFormField label="Aseguradora" required>
+          <USelect
+            v-model="insurerSlug"
+            :items="insurerItems"
+            value-key="value"
+            label-key="label"
+            placeholder="Select…"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="Sub-ramo" required>
+          <USelect
+            v-model="subRamoKey"
+            :items="subRamoOptions"
+            value-key="value"
+            label-key="label"
+            placeholder="Choose insurer first"
+            :disabled="!insurerSlug"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField label="Tipo de persona">
+          <USelect v-model="personKind" :items="personItems" value-key="value" label-key="label" class="w-full" />
+        </UFormField>
+        <UFormField
+          label="Product line"
+          description="Required for health (local/intl) and auto (full vs DAT). Use “Any” for generic rows only."
+        >
+          <USelect
+            v-model="productLine"
+            :items="productLineItems"
+            value-key="value"
+            label-key="label"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+    </div>
+
+    <div v-if="fieldGroups.length" class="sol-card">
+      <div class="sol-card-head">
+        <UIcon name="i-heroicons-rectangle-group" style="width: 16px; height: 16px; color: #01696f;" />
+        <span>Field groups (review / autofill)</span>
+      </div>
+      <div class="sol-card-body space-y-6">
+        <div v-for="g in fieldGroups" :key="g.id" class="rounded-lg border border-[rgba(0,0,0,0.06)] bg-[rgba(0,0,0,0.015)] p-4">
+          <h3 class="text-[13px] font-semibold text-[var(--text-primary)]">{{ g.title }}</h3>
+          <p class="text-[11px] text-[var(--text-muted)]">{{ g.description }}</p>
+          <p class="mt-2 font-mono text-[10px] text-[var(--text-muted)] opacity-70">Keys: {{ g.fieldKeys.join(', ') }}</p>
+        </div>
+        <div class="grid gap-3 sm:grid-cols-2">
+          <UFormField label="Nombre completo (profile)">
+            <UInput v-model="profile.full_name" class="w-full" />
+          </UFormField>
+          <UFormField label="Documento ID">
+            <UInput v-model="profile.document_id" class="w-full" />
+          </UFormField>
+          <UFormField label="Placa (auto)">
+            <UInput v-model="profile.plate" class="w-full" />
+          </UFormField>
+          <UFormField label="Valor declarado">
+            <UInput v-model="profile.declared_value" class="w-full" />
+          </UFormField>
+        </div>
+        <UButton color="neutral" variant="soft" size="sm" @click="saveProfileDraft">Save profile draft</UButton>
+        <span v-if="draftSavedAt" class="text-[11px] text-emerald-600 font-medium">
+          <UIcon name="i-heroicons-check-circle" style="width: 13px; height: 13px; vertical-align: -2px;" /> Saved at {{ draftSavedAt }}
+        </span>
+      </div>
+    </div>
+
+    <div class="sol-card">
+      <div class="sol-card-head">
+        <UIcon name="i-heroicons-document-text" style="width: 16px; height: 16px; color: #01696f;" />
+        <span>Forms to complete</span>
+        <span class="ml-auto text-[11px] font-medium text-[var(--text-muted)]">{{ matchedForms.length }} forms</span>
+      </div>
+      <div class="sol-card-body">
+        <div v-if="!insurerSlug || !subRamoKey" class="text-[13px] text-[var(--text-muted)] py-2">
+          Select insurer and sub-ramo to list required templates.
+        </div>
+        <div v-else-if="matchedForms.length === 0" class="text-[13px] text-amber-700 py-2">
+          No rows match this combination. Try another product line.
+        </div>
+        <div v-else class="space-y-2">
+          <div
+            v-for="row in matchedForms"
+            :key="row.id"
+            class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-[rgba(0,0,0,0.06)] bg-[rgba(0,0,0,0.015)] px-4 py-3"
+          >
+            <div class="min-w-0 flex-1">
+              <p class="font-mono text-[13px] font-semibold text-[var(--text-primary)]">{{ row.id }}</p>
+              <p class="truncate text-[11px] text-[var(--text-muted)]">{{ row.description }}</p>
+              <a
+                :href="row.fileUrl"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="mt-1 inline-block break-all text-[12px] text-[#01696f] hover:underline"
+              >
+                {{ row.fileLabel }}
+              </a>
+            </div>
+            <div class="flex shrink-0 items-center gap-2">
+              <UButton
+                v-if="row.kind === 'identity'"
+                icon="i-heroicons-document-duplicate"
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                aria-label="Copy file name"
+                @click="copyLabel(row.fileLabel)"
+              />
+              <span v-if="row.badge != null" class="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-[rgba(1,105,111,0.08)] text-[#01696f]">{{ row.badge }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="matchedForms.length" class="sol-card-footer">
+        <NuxtLink to="/onboarding/emissions">
+          <UButton color="neutral" variant="soft" size="sm">Open emissions queue</UButton>
+        </NuxtLink>
+        <UButton color="primary" size="sm" icon="i-heroicons-paper-airplane" @click="submitToEmissions">
+          Send to emissions review
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sol-section-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.06em; color: #8a8a86; margin-bottom: 4px;
+}
+.sol-card {
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.sol-card-head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,0.06);
+  font-size: 13px; font-weight: 600; color: var(--text-primary);
+}
+.sol-card-body { padding: 20px; }
+.sol-card-footer {
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 14px 20px; border-top: 1px solid rgba(0,0,0,0.06);
+}
+</style>
diff --git a/app/pages/policies/[id].vue b/app/pages/policies/[id].vue
new file mode 100644
index 0000000..b2c5619
--- /dev/null
+++ b/app/pages/policies/[id].vue
@@ -0,0 +1,1769 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+usePageTitle('Policy Detail')
+
+const route = useRoute()
+const policyId = route.params.id as string
+
+// ── Types ────────────────────────────────────────────────────────────────────
+interface PolicyDetail {
+  id: string
+  policyNumber: string
+  status: 'active' | 'pending' | 'lapsed' | 'cancelled' | 'expired'
+  lob: 'Auto' | 'Health' | 'Life' | 'General Risk'
+  insurer: string
+  insurerLogo: string
+  effectiveDate: string
+  expirationDate: string
+  issueDate: string
+  lastRenewalDate: string | null
+  annualPremium: number
+  paymentFrequency: 'Monthly' | 'Quarterly' | 'Semi-annual' | 'Annual'
+  nextPaymentDate: string
+  paymentStatus: 'current' | 'overdue' | 'grace_period'
+  coverageAmount: number
+  deductible: number
+  coverageDetails: { label: string; value: string }[]
+  titular: { name: string; cedula: string; phone: string; email: string }
+  agent: string
+  vehicle?: { make: string; model: string; year: number; vin: string; plate: string; color: string; isFleet: boolean; fleetName?: string; groupDiscount?: string }
+  dependents?: { name: string; relationship: string; dob: string; cedula: string }[]
+  beneficiaries?: { name: string; relationship: string; percentage: number; type: 'primary' | 'contingent' }[]
+  mortgageHolder?: { company: string; loanNumber: string; type: string }
+  property?: { address: string; type: string; constructionYear: number; area: string; value: number }
+  endorsements: { id: string; date: string; type: string; description: string; premium: number }[]
+  claims: { id: string; date: string; type: string; status: string; amount: number; description: string }[]
+  renewals: { period: string; premium: number; status: string }[]
+  documents: { id: string; name: string; type: string; date: string; size: string }[]
+  activity: { date: string; agent: string; action: string; detail: string }[]
+  economicGroup: string | null
+  relatedPolicies: { id: string; policyNumber: string; lob: string; titular: string; status: string }[]
+  billing: {
+    outstandingBalance: number
+    lastPaymentDate: string
+    lastPaymentAmount: number
+    paymentMethod: string
+    paymentHistory: { date: string; amount: number; method: string; status: string }[]
+  }
+  commission: {
+    rate: number
+    amount: number
+    status: string
+    producer: string
+    earned: number
+    paid: number
+    owed: number
+    nextPaymentDate: string
+  }
+}
+
+// ── Mock data ────────────────────────────────────────────────────────────────
+const policy = ref<PolicyDetail>({
+  id: 'POL-4401',
+  policyNumber: 'AUTO-2024-004401',
+  status: 'active',
+  lob: 'Auto',
+  insurer: 'ASSA Compañía de Seguros',
+  insurerLogo: 'i-heroicons-shield-check',
+  effectiveDate: '2024-03-15',
+  expirationDate: '2025-03-15',
+  issueDate: '2024-03-10',
+  lastRenewalDate: '2024-03-15',
+  annualPremium: 1_245_000,
+  paymentFrequency: 'Quarterly',
+  nextPaymentDate: '2025-06-15',
+  paymentStatus: 'current',
+  coverageAmount: 45_000_000,
+  deductible: 500_000,
+  coverageDetails: [
+    { label: 'Responsabilidad Civil', value: '₡25,000,000' },
+    { label: 'Daños Propios', value: '₡45,000,000' },
+    { label: 'Robo Total', value: '₡45,000,000' },
+    { label: 'Asistencia en Carretera', value: 'Incluida' },
+    { label: 'Vidrios y Espejos', value: '₡1,500,000' },
+    { label: 'Gastos Médicos', value: '₡5,000,000' },
+    { label: 'Extensión Territorial', value: 'Centroamérica' },
+  ],
+  titular: {
+    name: 'Transportes del Norte S.A.',
+    cedula: '3-101-456789',
+    phone: '+506 2222-8800',
+    email: 'seguros@transportesnorte.cr',
+  },
+  agent: 'María Fernanda Solís',
+  vehicle: {
+    make: 'Toyota',
+    model: 'Hilux SRV 4x4',
+    year: 2024,
+    vin: 'JT3HN87R5Y0234567',
+    plate: '123-ABC',
+    color: 'Blanco Perlado',
+    isFleet: true,
+    fleetName: 'Flota Transportes Norte',
+    groupDiscount: '12%',
+  },
+  endorsements: [
+    { id: 'END-001', date: '2024-06-20', type: 'Adición', description: 'Agregar cobertura de vidrios polarizados', premium: 35_000 },
+    { id: 'END-002', date: '2024-09-05', type: 'Modificación', description: 'Cambio de deducible de ₡750,000 a ₡500,000', premium: 48_000 },
+  ],
+  claims: [
+    { id: 'CLM-2201', date: '2024-05-12', type: 'Colisión', status: 'Resuelto', amount: 2_350_000, description: 'Colisión lateral en Ruta 1, San José. Daño en puerta derecha y guardafango.' },
+    { id: 'CLM-2202', date: '2024-08-23', type: 'Vidrios', status: 'Resuelto', amount: 185_000, description: 'Reemplazo de parabrisas por impacto de piedra en carretera Interamericana.' },
+    { id: 'CLM-2203', date: '2025-01-10', type: 'Robo parcial', status: 'En revisión', amount: 890_000, description: 'Robo de accesorios del vehículo estacionado en parqueo de Alajuela.' },
+  ],
+  renewals: [
+    { period: '2021-2022', premium: 980_000, status: 'Completado' },
+    { period: '2022-2023', premium: 1_050_000, status: 'Completado' },
+    { period: '2023-2024', premium: 1_150_000, status: 'Completado' },
+    { period: '2024-2025', premium: 1_245_000, status: 'Vigente' },
+  ],
+  documents: [
+    { id: 'DOC-01', name: 'Póliza Original AUTO-2024-004401', type: 'Póliza', date: '2024-03-10', size: '2.4 MB' },
+    { id: 'DOC-02', name: 'Endoso END-001 — Vidrios Polarizados', type: 'Endoso', date: '2024-06-20', size: '580 KB' },
+    { id: 'DOC-03', name: 'Endoso END-002 — Cambio Deducible', type: 'Endoso', date: '2024-09-05', size: '612 KB' },
+    { id: 'DOC-04', name: 'Certificado de Seguro Vigente', type: 'Certificado', date: '2025-01-15', size: '340 KB' },
+    { id: 'DOC-05', name: 'Recibo de Prima Q1-2025', type: 'Recibo', date: '2025-03-15', size: '128 KB' },
+  ],
+  activity: [
+    { date: '2025-03-15', agent: 'María Fernanda Solís', action: 'Renovación procesada', detail: 'Renovación período 2024-2025 confirmada con ASSA. Prima ajustada +8.3%.' },
+    { date: '2025-01-15', agent: 'Sistema', action: 'Certificado emitido', detail: 'Certificado de seguro vigente generado automáticamente.' },
+    { date: '2025-01-10', agent: 'Carlos Méndez', action: 'Reclamo abierto', detail: 'CLM-2203 registrado: robo parcial de accesorios en Alajuela.' },
+    { date: '2024-09-05', agent: 'María Fernanda Solís', action: 'Endoso aplicado', detail: 'END-002: Reducción de deducible aprobada por ASSA.' },
+    { date: '2024-06-20', agent: 'María Fernanda Solís', action: 'Endoso aplicado', detail: 'END-001: Cobertura de vidrios polarizados agregada.' },
+    { date: '2024-03-10', agent: 'María Fernanda Solís', action: 'Póliza emitida', detail: 'Póliza AUTO-2024-004401 emitida por ASSA para Toyota Hilux 2024.' },
+  ],
+  billing: {
+    outstandingBalance: 0,
+    lastPaymentDate: '2025-03-15',
+    lastPaymentAmount: 311_250,
+    paymentMethod: 'Transferencia bancaria',
+    paymentHistory: [
+      { date: '2025-03-15', amount: 311_250, method: 'Transferencia', status: 'Pagado' },
+      { date: '2024-12-15', amount: 311_250, method: 'Transferencia', status: 'Pagado' },
+      { date: '2024-09-15', amount: 311_250, method: 'Transferencia', status: 'Pagado' },
+      { date: '2024-06-15', amount: 311_250, method: 'Cheque', status: 'Pagado' },
+    ],
+  },
+  commission: {
+    rate: 15,
+    amount: 186_750,
+    status: 'Earned',
+    producer: 'María Fernanda Solís',
+    earned: 186_750,
+    paid: 140_063,
+    owed: 46_687,
+    nextPaymentDate: '2025-04-30',
+  },
+  economicGroup: 'Grupo Transportes del Norte',
+  relatedPolicies: [
+    { id: 'POL-4402', policyNumber: 'AUTO-2024-004402', lob: 'Auto', titular: 'Transportes del Norte S.A.', status: 'active' },
+    { id: 'POL-3310', policyNumber: 'PROP-2023-003310', lob: 'General Risk', titular: 'Transportes del Norte S.A.', status: 'active' },
+  ],
+})
+
+// ── Tabs ──────────────────────────────────────────────────────────────────────
+type TabId = 'overview' | 'claims' | 'renewals' | 'documents' | 'view-policy' | 'activity'
+const activeTab = ref<TabId>('overview')
+const tabs: { id: TabId; label: string; icon: string }[] = [
+  { id: 'overview', label: 'Overview', icon: 'i-heroicons-squares-2x2' },
+  { id: 'claims', label: 'Claims', icon: 'i-heroicons-document-text' },
+  { id: 'renewals', label: 'Renewals', icon: 'i-heroicons-arrow-path' },
+  { id: 'documents', label: 'Documents', icon: 'i-heroicons-folder-open' },
+  { id: 'view-policy', label: 'View Policy', icon: 'i-heroicons-document-magnifying-glass' },
+  { id: 'activity', label: 'Activity', icon: 'i-heroicons-clock' },
+]
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+const fmtMoney = (n: number) => '₡' + n.toLocaleString('es-CR')
+const fmtDate = (d: string) => new Date(d).toLocaleDateString('es-CR', { day: '2-digit', month: 'short', year: 'numeric' })
+
+const statusClass = (s: string) => {
+  const map: Record<string, string> = {
+    active: 'pol-status-active', pending: 'pol-status-pending', lapsed: 'pol-status-lapsed',
+    cancelled: 'pol-status-cancelled', expired: 'pol-status-expired',
+    'Resuelto': 'pol-status-active', 'En revisión': 'pol-status-pending', 'Denegado': 'pol-status-lapsed',
+    'Completado': 'pol-status-active', 'Vigente': 'pol-status-pending',
+  }
+  return map[s] ?? 'pol-status-cancelled'
+}
+
+const statusLabel = (s: string) => {
+  const map: Record<string, string> = { active: 'Active', pending: 'Pending', lapsed: 'Lapsed', cancelled: 'Cancelled', expired: 'Expired' }
+  return map[s] ?? s
+}
+
+const paymentStatusClass = (s: string) => {
+  const map: Record<string, string> = { current: 'pol-pay-current', overdue: 'pol-pay-overdue', grace_period: 'pol-pay-grace' }
+  return map[s] ?? ''
+}
+const paymentStatusLabel = (s: string) => {
+  const map: Record<string, string> = { current: 'Current', overdue: 'Overdue', grace_period: 'Grace Period' }
+  return map[s] ?? s
+}
+
+const docTypeClass = (t: string) => {
+  const map: Record<string, string> = {
+    'Póliza': 'pol-doc-poliza', 'Endoso': 'pol-doc-endoso',
+    'Certificado': 'pol-doc-certificado', 'Recibo': 'pol-doc-recibo',
+  }
+  return map[t] ?? 'pol-doc-other'
+}
+
+const renewalChange = (idx: number) => {
+  if (idx === 0) return null
+  const prev = policy.value.renewals[idx - 1].premium
+  const curr = policy.value.renewals[idx].premium
+  return ((curr - prev) / prev * 100).toFixed(1)
+}
+
+const lobIcon = (lob: string) => {
+  const map: Record<string, string> = { Auto: 'i-heroicons-truck', Health: 'i-heroicons-heart', Life: 'i-heroicons-shield-check', 'General Risk': 'i-heroicons-building-office-2' }
+  return map[lob] ?? 'i-heroicons-document'
+}
+
+const daysUntilExpiration = computed(() => {
+  const now = new Date()
+  const exp = new Date(policy.value.expirationDate)
+  return Math.max(0, Math.ceil((exp.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)))
+})
+
+const expandedClaim = ref<string | null>(null)
+const toggleClaim = (id: string) => { expandedClaim.value = expandedClaim.value === id ? null : id }
+
+// ── Viewable Documents (View Policy tab) ────────────────────────────────────
+const viewableDocs = [
+  { id: 'VD-001', name: 'Póliza Original AUTO-2024-004401', type: 'policy', url: '#', pages: 12 },
+  { id: 'VD-002', name: 'Endoso END-001 — Vidrios Polarizados', type: 'endorsement', url: '#', pages: 2 },
+  { id: 'VD-003', name: 'Endoso END-002 — Reducción Deducible', type: 'endorsement', url: '#', pages: 1 },
+  { id: 'VD-004', name: 'Certificado de Seguro Vigente', type: 'certificate', url: '#', pages: 1 },
+  { id: 'VD-005', name: 'Póliza Relacionada AUTO-2024-004402', type: 'related', url: '#', pages: 8 },
+  { id: 'VD-006', name: 'Póliza Relacionada PROP-2023-003310', type: 'related', url: '#', pages: 15 },
+]
+
+const selectedDoc = ref(viewableDocs[0])
+
+const viewableDocGroups = computed(() => [
+  { label: 'Policy', items: viewableDocs.filter(d => d.type === 'policy') },
+  { label: 'Endorsements', items: viewableDocs.filter(d => d.type === 'endorsement') },
+  { label: 'Certificates', items: viewableDocs.filter(d => d.type === 'certificate') },
+  { label: 'Related Policies', items: viewableDocs.filter(d => d.type === 'related') },
+])
+
+const docTypeBadgeClass = (t: string) => {
+  const map: Record<string, string> = {
+    policy: 'pol-vd-badge-policy', endorsement: 'pol-vd-badge-endorsement',
+    certificate: 'pol-vd-badge-certificate', related: 'pol-vd-badge-related',
+  }
+  return map[t] ?? ''
+}
+
+const docTypeBadgeLabel = (t: string) => {
+  const map: Record<string, string> = {
+    policy: 'Policy', endorsement: 'Endorsement',
+    certificate: 'Certificate', related: 'Related',
+  }
+  return map[t] ?? t
+}
+</script>
+
+<template>
+  <div class="pol-root mx-auto max-w-6xl pb-12">
+    <!-- Back link -->
+    <NuxtLink to="/policies" class="pol-back-link">
+      <UIcon name="i-heroicons-arrow-left" class="w-3.5 h-3.5" />
+      Back to Policies
+    </NuxtLink>
+
+    <!-- Header -->
+    <div class="pol-detail-header">
+      <div class="pol-detail-header-left">
+        <div class="pol-detail-title-row">
+          <h1 class="pol-detail-title">{{ policy.policyNumber }}</h1>
+          <span class="pol-status-badge pol-status-pill" :class="statusClass(policy.status)">{{ statusLabel(policy.status) }}</span>
+          <span class="pol-lob-chip" :class="`pol-lob-${policy.lob.toLowerCase().replace(' ', '-')}`">
+            <UIcon :name="lobIcon(policy.lob)" class="w-3 h-3" />
+            {{ policy.lob }}
+          </span>
+        </div>
+        <div class="pol-detail-subtitle">
+          <UIcon :name="policy.insurerLogo" class="w-4 h-4" style="color: #01696f;" />
+          <span>{{ policy.insurer }}</span>
+          <span class="pol-detail-sep">·</span>
+          <span>{{ policy.titular.name }}</span>
+        </div>
+      </div>
+      <div class="pol-detail-header-right">
+        <button class="pol-btn-secondary">
+          <UIcon name="i-heroicons-arrow-path" class="w-3.5 h-3.5" />
+          Renew
+        </button>
+        <button class="pol-btn-secondary">
+          <UIcon name="i-heroicons-arrow-down-tray" class="w-3.5 h-3.5" />
+          Download
+        </button>
+        <button class="pol-btn-secondary">
+          <UIcon name="i-heroicons-printer" class="w-3.5 h-3.5" />
+          Print
+        </button>
+      </div>
+    </div>
+
+    <!-- Tab navigation -->
+    <div class="pol-main-tabs">
+      <button
+        v-for="t in tabs"
+        :key="t.id"
+        type="button"
+        class="pol-main-tab"
+        :class="activeTab === t.id ? 'pol-main-tab-on' : 'pol-main-tab-off'"
+        @click="activeTab = t.id"
+      >
+        <UIcon :name="t.icon" class="w-3.5 h-3.5" />
+        {{ t.label }}
+        <span v-if="t.id === 'claims'" class="pol-tab-count" :class="activeTab === 'claims' ? 'pol-tab-count-on' : ''">{{ policy.claims.length }}</span>
+        <span v-if="t.id === 'documents'" class="pol-tab-count" :class="activeTab === 'documents' ? 'pol-tab-count-on' : ''">{{ policy.documents.length }}</span>
+      </button>
+    </div>
+
+    <!-- Quick Info Strip -->
+    <div class="pol-quick-strip">
+      <div class="pol-quick-item">
+        <UIcon name="i-heroicons-calendar" class="w-4 h-4 pol-quick-icon" />
+        <div class="pol-quick-data">
+          <span class="pol-quick-value" :class="daysUntilExpiration <= 30 ? 'pol-quick-warn' : ''">{{ daysUntilExpiration }}</span>
+          <span class="pol-quick-label">Days to Expiry</span>
+        </div>
+      </div>
+      <div class="pol-quick-sep" />
+      <div class="pol-quick-item">
+        <UIcon name="i-heroicons-banknotes" class="w-4 h-4 pol-quick-icon" />
+        <div class="pol-quick-data">
+          <span class="pol-quick-value">{{ fmtMoney(policy.billing.outstandingBalance) }}</span>
+          <span class="pol-quick-label">Outstanding</span>
+        </div>
+      </div>
+      <div class="pol-quick-sep" />
+      <div class="pol-quick-item">
+        <UIcon name="i-heroicons-document-text" class="w-4 h-4 pol-quick-icon" />
+        <div class="pol-quick-data">
+          <span class="pol-quick-value">{{ policy.claims.length }}</span>
+          <span class="pol-quick-label">Total Claims</span>
+        </div>
+      </div>
+      <div class="pol-quick-sep" />
+      <div class="pol-quick-item">
+        <UIcon name="i-heroicons-currency-dollar" class="w-4 h-4 pol-quick-icon" />
+        <div class="pol-quick-data">
+          <span class="pol-quick-value">{{ fmtMoney(policy.commission.amount) }}</span>
+          <span class="pol-quick-label">Commission</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══════════════════ OVERVIEW TAB ═══════════════════ -->
+    <template v-if="activeTab === 'overview'">
+      <div class="pol-grid-2">
+        <!-- Policy Information -->
+        <div class="pol-card pol-card-padded pol-grid-span-2">
+          <div class="pol-card-title">Policy Information</div>
+          <div class="pol-info-grid">
+            <div class="pol-info-item">
+              <span class="pol-label">Policy Number</span>
+              <span class="pol-value pol-mono">{{ policy.policyNumber }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Status</span>
+              <span class="pol-status-badge pol-status-pill" :class="statusClass(policy.status)">{{ statusLabel(policy.status) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Line of Business</span>
+              <span class="pol-value">{{ policy.lob }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Insurer</span>
+              <span class="pol-value">{{ policy.insurer }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Effective Date</span>
+              <span class="pol-value">{{ fmtDate(policy.effectiveDate) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Expiration Date</span>
+              <span class="pol-value">{{ fmtDate(policy.expirationDate) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Issue Date</span>
+              <span class="pol-value">{{ fmtDate(policy.issueDate) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Last Renewal</span>
+              <span class="pol-value">{{ policy.lastRenewalDate ? fmtDate(policy.lastRenewalDate) : '—' }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Annual Premium</span>
+              <span class="pol-value pol-value-bold">{{ fmtMoney(policy.annualPremium) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Payment Frequency</span>
+              <span class="pol-value">{{ policy.paymentFrequency }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Next Payment</span>
+              <span class="pol-value">{{ fmtDate(policy.nextPaymentDate) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Payment Status</span>
+              <span class="pol-pay-badge" :class="paymentStatusClass(policy.paymentStatus)">{{ paymentStatusLabel(policy.paymentStatus) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Coverage Details -->
+        <div class="pol-card pol-card-padded">
+          <div class="pol-card-title">Coverage Details</div>
+          <div class="pol-coverage-header">
+            <div class="pol-info-item">
+              <span class="pol-label">Coverage Amount</span>
+              <span class="pol-value pol-value-bold">{{ fmtMoney(policy.coverageAmount) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Deductible</span>
+              <span class="pol-value pol-value-bold">{{ fmtMoney(policy.deductible) }}</span>
+            </div>
+          </div>
+          <div class="pol-divider" />
+          <div class="pol-coverage-list">
+            <div v-for="c in policy.coverageDetails" :key="c.label" class="pol-coverage-row">
+              <span class="pol-coverage-label">{{ c.label }}</span>
+              <span class="pol-coverage-value">{{ c.value }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Policyholder -->
+        <div class="pol-card pol-card-padded">
+          <div class="pol-card-title">Policyholder</div>
+          <div class="pol-holder-info">
+            <div class="pol-holder-avatar">
+              <UIcon name="i-heroicons-building-office" class="w-5 h-5" />
+            </div>
+            <div>
+              <div class="pol-holder-name">{{ policy.titular.name }}</div>
+              <div class="pol-holder-cedula">{{ policy.titular.cedula }}</div>
+            </div>
+          </div>
+          <div class="pol-divider" />
+          <div class="pol-info-item" style="margin-bottom: 10px;">
+            <span class="pol-label">Phone</span>
+            <span class="pol-value">{{ policy.titular.phone }}</span>
+          </div>
+          <div class="pol-info-item" style="margin-bottom: 10px;">
+            <span class="pol-label">Email</span>
+            <span class="pol-value">{{ policy.titular.email }}</span>
+          </div>
+          <div class="pol-info-item">
+            <span class="pol-label">Agent</span>
+            <span class="pol-value">{{ policy.agent }}</span>
+          </div>
+        </div>
+
+        <!-- LOB-Specific: Auto -->
+        <template v-if="policy.lob === 'Auto' && policy.vehicle">
+          <div class="pol-card pol-card-padded pol-grid-span-2">
+            <div class="pol-card-title">
+              <UIcon name="i-heroicons-truck" class="w-4 h-4" style="color: #2563eb;" />
+              Vehicle Details
+            </div>
+            <div class="pol-info-grid">
+              <div class="pol-info-item">
+                <span class="pol-label">Make / Model</span>
+                <span class="pol-value pol-value-bold">{{ policy.vehicle.year }} {{ policy.vehicle.make }} {{ policy.vehicle.model }}</span>
+              </div>
+              <div class="pol-info-item">
+                <span class="pol-label">Color</span>
+                <span class="pol-value">{{ policy.vehicle.color }}</span>
+              </div>
+              <div class="pol-info-item">
+                <span class="pol-label">VIN</span>
+                <span class="pol-value pol-mono">{{ policy.vehicle.vin }}</span>
+              </div>
+              <div class="pol-info-item">
+                <span class="pol-label">Plate</span>
+                <span class="pol-value pol-mono">{{ policy.vehicle.plate }}</span>
+              </div>
+            </div>
+            <template v-if="policy.vehicle.isFleet">
+              <div class="pol-divider" />
+              <div class="pol-fleet-banner">
+                <UIcon name="i-heroicons-truck" class="w-4 h-4" />
+                <div>
+                  <span class="pol-fleet-name">{{ policy.vehicle.fleetName }}</span>
+                  <span class="pol-fleet-discount">Group discount: {{ policy.vehicle.groupDiscount }}</span>
+                </div>
+              </div>
+            </template>
+          </div>
+        </template>
+
+        <!-- LOB-Specific: Health -->
+        <template v-if="policy.lob === 'Health' && policy.dependents">
+          <div class="pol-card pol-card-flush pol-grid-span-2">
+            <div class="pol-card-head">
+              <span>Dependents</span>
+              <span class="pol-card-head-count">{{ policy.dependents.length }}</span>
+            </div>
+            <div class="pol-table-wrap">
+              <table class="pol-table">
+                <thead><tr>
+                  <th class="pol-th">Name</th><th class="pol-th">Relationship</th><th class="pol-th">Date of Birth</th><th class="pol-th">Cédula</th>
+                </tr></thead>
+                <tbody>
+                  <tr v-for="d in policy.dependents" :key="d.cedula" class="pol-row">
+                    <td class="pol-td pol-value-bold">{{ d.name }}</td>
+                    <td class="pol-td">{{ d.relationship }}</td>
+                    <td class="pol-td">{{ fmtDate(d.dob) }}</td>
+                    <td class="pol-td pol-mono">{{ d.cedula }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </template>
+
+        <!-- LOB-Specific: Life -->
+        <template v-if="policy.lob === 'Life' && policy.beneficiaries">
+          <div class="pol-card pol-card-flush pol-grid-span-2">
+            <div class="pol-card-head">
+              <span>Beneficiaries</span>
+              <span class="pol-card-head-count">{{ policy.beneficiaries.length }}</span>
+            </div>
+            <div class="pol-table-wrap">
+              <table class="pol-table">
+                <thead><tr>
+                  <th class="pol-th">Name</th><th class="pol-th">Relationship</th><th class="pol-th">Type</th><th class="pol-th pol-th-right">%</th>
+                </tr></thead>
+                <tbody>
+                  <tr v-for="b in policy.beneficiaries" :key="b.name" class="pol-row">
+                    <td class="pol-td pol-value-bold">{{ b.name }}</td>
+                    <td class="pol-td">{{ b.relationship }}</td>
+                    <td class="pol-td"><span class="pol-status-badge" :class="b.type === 'primary' ? 'pol-status-active' : 'pol-status-cancelled'">{{ b.type }}</span></td>
+                    <td class="pol-td pol-td-right pol-value-bold">{{ b.percentage }}%</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div v-if="policy.mortgageHolder" class="pol-card pol-card-padded pol-grid-span-2">
+            <div class="pol-card-title">Mortgage Holder</div>
+            <div class="pol-info-grid">
+              <div class="pol-info-item"><span class="pol-label">Company</span><span class="pol-value">{{ policy.mortgageHolder.company }}</span></div>
+              <div class="pol-info-item"><span class="pol-label">Loan Number</span><span class="pol-value pol-mono">{{ policy.mortgageHolder.loanNumber }}</span></div>
+              <div class="pol-info-item"><span class="pol-label">Type</span><span class="pol-value">{{ policy.mortgageHolder.type }}</span></div>
+            </div>
+          </div>
+        </template>
+
+        <!-- LOB-Specific: General Risk / Property -->
+        <template v-if="policy.lob === 'General Risk' && policy.property">
+          <div class="pol-card pol-card-padded pol-grid-span-2">
+            <div class="pol-card-title">
+              <UIcon name="i-heroicons-building-office-2" class="w-4 h-4" style="color: #d97706;" />
+              Property Details
+            </div>
+            <div class="pol-info-grid">
+              <div class="pol-info-item"><span class="pol-label">Address</span><span class="pol-value">{{ policy.property.address }}</span></div>
+              <div class="pol-info-item"><span class="pol-label">Type</span><span class="pol-value">{{ policy.property.type }}</span></div>
+              <div class="pol-info-item"><span class="pol-label">Construction Year</span><span class="pol-value">{{ policy.property.constructionYear }}</span></div>
+              <div class="pol-info-item"><span class="pol-label">Area</span><span class="pol-value">{{ policy.property.area }}</span></div>
+              <div class="pol-info-item"><span class="pol-label">Insured Value</span><span class="pol-value pol-value-bold">{{ fmtMoney(policy.property.value) }}</span></div>
+            </div>
+          </div>
+        </template>
+
+        <!-- Endorsements -->
+        <div v-if="policy.endorsements.length > 0" class="pol-card pol-card-flush pol-grid-span-2">
+          <div class="pol-card-head">
+            <span>Endorsements</span>
+            <span class="pol-card-head-count">{{ policy.endorsements.length }}</span>
+          </div>
+          <div class="pol-table-wrap">
+            <table class="pol-table">
+              <thead><tr>
+                <th class="pol-th">ID</th><th class="pol-th">Date</th><th class="pol-th">Type</th><th class="pol-th">Description</th><th class="pol-th pol-th-right">Premium Impact</th>
+              </tr></thead>
+              <tbody>
+                <tr v-for="e in policy.endorsements" :key="e.id" class="pol-row">
+                  <td class="pol-td pol-mono">{{ e.id }}</td>
+                  <td class="pol-td">{{ fmtDate(e.date) }}</td>
+                  <td class="pol-td"><span class="pol-endorse-type">{{ e.type }}</span></td>
+                  <td class="pol-td">{{ e.description }}</td>
+                  <td class="pol-td pol-td-right pol-value-bold" style="color: #d97706;">+{{ fmtMoney(e.premium) }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Billing & Payments -->
+        <div class="pol-card pol-card-padded">
+          <div class="pol-card-title">
+            <UIcon name="i-heroicons-banknotes" class="w-4 h-4" style="color: #01696f;" />
+            Billing & Payments
+          </div>
+          <div class="pol-info-grid">
+            <div class="pol-info-item">
+              <span class="pol-label">Outstanding Balance</span>
+              <span class="pol-value pol-value-bold" :style="policy.billing.outstandingBalance === 0 ? 'color: #059669;' : 'color: #e11d48;'">
+                {{ fmtMoney(policy.billing.outstandingBalance) }}
+                <span v-if="policy.billing.outstandingBalance === 0" class="pol-billing-current-tag">Current</span>
+              </span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Last Payment</span>
+              <span class="pol-value">{{ fmtDate(policy.billing.lastPaymentDate) }} — {{ fmtMoney(policy.billing.lastPaymentAmount) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Payment Method</span>
+              <span class="pol-value">{{ policy.billing.paymentMethod }}</span>
+            </div>
+          </div>
+          <div class="pol-divider" />
+          <div class="pol-label" style="margin-bottom: 8px;">Recent Payments</div>
+          <div class="pol-table-wrap">
+            <table class="pol-table pol-table-compact">
+              <thead><tr>
+                <th class="pol-th">Date</th><th class="pol-th pol-th-right">Amount</th><th class="pol-th">Method</th><th class="pol-th">Status</th>
+              </tr></thead>
+              <tbody>
+                <tr v-for="p in policy.billing.paymentHistory" :key="p.date" class="pol-row">
+                  <td class="pol-td">{{ fmtDate(p.date) }}</td>
+                  <td class="pol-td pol-td-right pol-value-bold">{{ fmtMoney(p.amount) }}</td>
+                  <td class="pol-td">{{ p.method }}</td>
+                  <td class="pol-td"><span class="pol-status-badge pol-status-pill pol-status-active">{{ p.status }}</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Commission -->
+        <div class="pol-card pol-card-padded">
+          <div class="pol-card-title">
+            <UIcon name="i-heroicons-currency-dollar" class="w-4 h-4" style="color: #01696f;" />
+            Commission
+          </div>
+          <div class="pol-commission-highlight">
+            <span class="pol-commission-amount">{{ fmtMoney(policy.commission.amount) }}</span>
+            <span class="pol-commission-rate">{{ policy.commission.rate }}% of {{ fmtMoney(policy.annualPremium) }}</span>
+          </div>
+          <div class="pol-divider" />
+          <div class="pol-info-grid">
+            <div class="pol-info-item">
+              <span class="pol-label">Commission Rate</span>
+              <span class="pol-value pol-value-bold">{{ policy.commission.rate }}%</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Annual Amount</span>
+              <span class="pol-value pol-value-bold">{{ fmtMoney(policy.commission.amount) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Status</span>
+              <span class="pol-status-badge pol-status-pill pol-status-active">{{ policy.commission.status }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Producer / Agent of Record</span>
+              <span class="pol-value">{{ policy.commission.producer }}</span>
+            </div>
+          </div>
+
+          <!-- Agent Payout Breakdown -->
+          <div class="pol-divider" />
+          <div class="pol-card-title" style="margin-top: 4px;">
+            <UIcon name="i-heroicons-banknotes" class="w-4 h-4" style="color: #01696f;" />
+            Agent Payout
+          </div>
+          <div class="pol-agent-payout">
+            <div class="pol-payout-bar">
+              <div class="pol-payout-paid" :style="{ width: (policy.commission.paid / policy.commission.earned * 100) + '%' }" />
+            </div>
+            <div class="pol-payout-legend">
+              <span class="pol-payout-legend-item"><span class="pol-payout-dot pol-payout-dot-paid" /> Paid {{ fmtMoney(policy.commission.paid) }}</span>
+              <span class="pol-payout-legend-item"><span class="pol-payout-dot pol-payout-dot-owed" /> Owed {{ fmtMoney(policy.commission.owed) }}</span>
+            </div>
+          </div>
+          <div class="pol-info-grid" style="margin-top: 12px;">
+            <div class="pol-info-item">
+              <span class="pol-label">Total Earned</span>
+              <span class="pol-value pol-value-bold">{{ fmtMoney(policy.commission.earned) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Paid to Agent</span>
+              <span class="pol-value" style="color: #059669;">{{ fmtMoney(policy.commission.paid) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Amount Owed</span>
+              <span class="pol-value pol-value-bold" style="color: #d97706;">{{ fmtMoney(policy.commission.owed) }}</span>
+            </div>
+            <div class="pol-info-item">
+              <span class="pol-label">Next Payment Date</span>
+              <span class="pol-value">{{ fmtDate(policy.commission.nextPaymentDate) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Related Policies -->
+        <div v-if="policy.economicGroup" class="pol-card pol-card-flush pol-grid-span-2">
+          <div class="pol-card-head">
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <UIcon name="i-heroicons-building-library" class="w-4 h-4" style="color: #01696f;" />
+              <span>{{ policy.economicGroup }}</span>
+            </div>
+            <span class="pol-card-head-count">{{ policy.relatedPolicies.length }} related</span>
+          </div>
+          <div class="pol-table-wrap">
+            <table class="pol-table">
+              <thead><tr>
+                <th class="pol-th">Policy #</th><th class="pol-th">LOB</th><th class="pol-th">Titular</th><th class="pol-th">Status</th>
+              </tr></thead>
+              <tbody>
+                <tr v-for="rp in policy.relatedPolicies" :key="rp.id" class="pol-row" style="cursor: pointer;">
+                  <td class="pol-td"><NuxtLink :to="`/policies/${rp.id}`" class="pol-customer-link">{{ rp.policyNumber }}</NuxtLink></td>
+                  <td class="pol-td">{{ rp.lob }}</td>
+                  <td class="pol-td">{{ rp.titular }}</td>
+                  <td class="pol-td"><span class="pol-status-badge pol-status-pill" :class="statusClass(rp.status)">{{ statusLabel(rp.status) }}</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- ═══════════════════ CLAIMS TAB ═══════════════════ -->
+    <template v-if="activeTab === 'claims'">
+      <div class="pol-card pol-card-flush">
+        <div class="pol-card-head">
+          <span>Claims History</span>
+          <span class="pol-card-head-count">{{ policy.claims.length }}</span>
+        </div>
+        <div class="pol-table-wrap">
+          <table class="pol-table">
+            <thead><tr>
+              <th class="pol-th">Claim ID</th><th class="pol-th">Date Filed</th><th class="pol-th">Type</th><th class="pol-th">Status</th><th class="pol-th pol-th-right">Amount</th><th class="pol-th pol-th-actions" />
+            </tr></thead>
+            <tbody>
+              <template v-for="c in policy.claims" :key="c.id">
+                <tr class="pol-row pol-row-clickable" @click="toggleClaim(c.id)">
+                  <td class="pol-td"><NuxtLink :to="`/claims/${c.id}`" class="pol-policy-link pol-mono" @click.stop>{{ c.id }}</NuxtLink></td>
+                  <td class="pol-td">{{ fmtDate(c.date) }}</td>
+                  <td class="pol-td">{{ c.type }}</td>
+                  <td class="pol-td"><span class="pol-status-badge pol-status-pill" :class="statusClass(c.status)">{{ c.status }}</span></td>
+                  <td class="pol-td pol-td-right pol-value-bold">{{ fmtMoney(c.amount) }}</td>
+                  <td class="pol-td pol-td-actions">
+                    <UIcon :name="expandedClaim === c.id ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'" class="w-4 h-4" style="color: #8a8a86;" />
+                  </td>
+                </tr>
+                <tr v-if="expandedClaim === c.id" class="pol-claim-expand-row">
+                  <td colspan="6" class="pol-claim-expand-cell">
+                    <p class="pol-claim-desc">{{ c.description }}</p>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </template>
+
+    <!-- ═══════════════════ RENEWALS TAB ═══════════════════ -->
+    <template v-if="activeTab === 'renewals'">
+      <div class="pol-card pol-card-flush">
+        <div class="pol-card-head">
+          <span>Renewal History</span>
+          <span class="pol-card-head-count">{{ policy.renewals.length }} periods</span>
+        </div>
+        <div class="pol-table-wrap">
+          <table class="pol-table">
+            <thead><tr>
+              <th class="pol-th">Period</th><th class="pol-th pol-th-right">Premium</th><th class="pol-th pol-th-right">Change</th><th class="pol-th">Status</th>
+            </tr></thead>
+            <tbody>
+              <tr v-for="(r, idx) in policy.renewals" :key="r.period" class="pol-row">
+                <td class="pol-td pol-value-bold">{{ r.period }}</td>
+                <td class="pol-td pol-td-right pol-value-bold">{{ fmtMoney(r.premium) }}</td>
+                <td class="pol-td pol-td-right">
+                  <span v-if="renewalChange(idx) !== null" class="pol-renewal-change" :class="Number(renewalChange(idx)) > 0 ? 'pol-change-up' : 'pol-change-down'">
+                    {{ Number(renewalChange(idx)) > 0 ? '+' : '' }}{{ renewalChange(idx) }}%
+                  </span>
+                  <span v-else class="pol-value" style="color: #8a8a86;">—</span>
+                </td>
+                <td class="pol-td"><span class="pol-status-badge pol-status-pill" :class="statusClass(r.status)">{{ r.status }}</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </template>
+
+    <!-- ═══════════════════ DOCUMENTS TAB ═══════════════════ -->
+    <template v-if="activeTab === 'documents'">
+      <div class="pol-docs-grid">
+        <div v-for="doc in policy.documents" :key="doc.id" class="pol-card pol-card-padded pol-doc-card">
+          <div class="pol-doc-row">
+            <div class="pol-doc-icon-wrap">
+              <UIcon name="i-heroicons-document-text" class="w-5 h-5" />
+            </div>
+            <div class="pol-doc-info">
+              <div class="pol-doc-name">{{ doc.name }}</div>
+              <div class="pol-doc-meta">
+                <span class="pol-doc-type-badge" :class="docTypeClass(doc.type)">{{ doc.type }}</span>
+                <span>{{ fmtDate(doc.date) }}</span>
+                <span class="pol-detail-sep">·</span>
+                <span>{{ doc.size }}</span>
+              </div>
+            </div>
+            <button class="pol-btn-secondary pol-btn-sm">
+              <UIcon name="i-heroicons-arrow-down-tray" class="w-3.5 h-3.5" />
+              Download
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- ═══════════════════ VIEW POLICY TAB ═══════════════════ -->
+    <template v-if="activeTab === 'view-policy'">
+      <div class="pol-vd-layout">
+        <!-- Sidebar -->
+        <div class="pol-vd-sidebar">
+          <template v-for="group in viewableDocGroups" :key="group.label">
+            <template v-if="group.items.length">
+              <div class="pol-vd-group-label">{{ group.label }}</div>
+              <button
+                v-for="doc in group.items"
+                :key="doc.id"
+                class="pol-vd-card"
+                :class="selectedDoc.id === doc.id ? 'pol-vd-card-active' : ''"
+                @click="selectedDoc = doc"
+              >
+                <div class="pol-vd-card-name">{{ doc.name }}</div>
+                <div class="pol-vd-card-meta">
+                  <span class="pol-vd-type-badge" :class="docTypeBadgeClass(doc.type)">{{ docTypeBadgeLabel(doc.type) }}</span>
+                  <span class="pol-vd-pages">{{ doc.pages }} {{ doc.pages === 1 ? 'page' : 'pages' }}</span>
+                </div>
+              </button>
+            </template>
+          </template>
+        </div>
+
+        <!-- Viewer Panel -->
+        <div class="pol-vd-viewer">
+          <!-- Toolbar -->
+          <div class="pol-vd-toolbar">
+            <div class="pol-vd-toolbar-left">
+              <UIcon name="i-heroicons-document-text" class="w-4 h-4" style="color: #01696f;" />
+              <span class="pol-vd-toolbar-name">{{ selectedDoc.name }}</span>
+            </div>
+            <div class="pol-vd-toolbar-center">
+              <span class="pol-vd-page-indicator">Page 1 of {{ selectedDoc.pages }}</span>
+            </div>
+            <div class="pol-vd-toolbar-right">
+              <button class="pol-vd-zoom-btn" title="Zoom out">
+                <UIcon name="i-heroicons-minus" class="w-3.5 h-3.5" />
+              </button>
+              <span class="pol-vd-zoom-level">100%</span>
+              <button class="pol-vd-zoom-btn" title="Zoom in">
+                <UIcon name="i-heroicons-plus" class="w-3.5 h-3.5" />
+              </button>
+              <div class="pol-vd-toolbar-sep" />
+              <button class="pol-btn-secondary pol-btn-sm">
+                <UIcon name="i-heroicons-arrow-down-tray" class="w-3.5 h-3.5" />
+                Download
+              </button>
+            </div>
+          </div>
+
+          <!-- PDF Placeholder -->
+          <div class="pol-vd-pdf-area">
+            <div class="pol-vd-pdf-paper">
+              <UIcon name="i-heroicons-document-text" class="pol-vd-pdf-icon" />
+              <div class="pol-vd-pdf-label">PDF preview</div>
+              <div class="pol-vd-pdf-docname">{{ selectedDoc.name }}</div>
+              <div class="pol-vd-pdf-pages">{{ selectedDoc.pages }} {{ selectedDoc.pages === 1 ? 'page' : 'pages' }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- ═══════════════════ ACTIVITY TAB ═══════════════════ -->
+    <template v-if="activeTab === 'activity'">
+      <div class="pol-card pol-card-padded">
+        <div class="pol-card-title" style="margin-bottom: 16px;">Activity Timeline</div>
+        <div class="pol-timeline">
+          <div v-for="(a, idx) in policy.activity" :key="idx" class="pol-timeline-item">
+            <div class="pol-timeline-line-wrap">
+              <div class="pol-timeline-dot" />
+              <div v-if="idx < policy.activity.length - 1" class="pol-timeline-line" />
+            </div>
+            <div class="pol-timeline-content">
+              <div class="pol-timeline-header">
+                <span class="pol-timeline-action">{{ a.action }}</span>
+                <span class="pol-timeline-date">{{ fmtDate(a.date) }}</span>
+              </div>
+              <div class="pol-timeline-detail">{{ a.detail }}</div>
+              <div class="pol-timeline-agent">
+                <span class="pol-agent-circle">{{ a.agent.split(' ').map(w => w[0]).join('').slice(0, 2) }}</span>
+                {{ a.agent }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* =====================================================================
+   POLICY DETAIL PAGE — scoped, pol- prefix
+   ===================================================================== */
+
+.pol-root {
+  --pol-brand: #01696f;
+  --pol-brand-soft: rgba(1, 105, 111, 0.06);
+  --pol-border: rgba(0, 0, 0, 0.06);
+  --pol-border-strong: rgba(0, 0, 0, 0.08);
+  --pol-muted: #8a8a86;
+  --pol-surface: #ffffff;
+}
+
+/* ---- Back link ---- */
+.pol-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--pol-muted);
+  text-decoration: none;
+  margin-bottom: 12px;
+  transition: color 150ms ease;
+}
+.pol-back-link:hover { color: var(--pol-brand); }
+
+/* ---- Detail header ---- */
+.pol-detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+.pol-detail-header-left { display: flex; flex-direction: column; gap: 6px; }
+.pol-detail-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.pol-detail-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.pol-detail-title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--text-primary, #1a1a1a);
+  line-height: 1;
+}
+.pol-detail-subtitle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-muted, #5c5650);
+}
+.pol-detail-sep { color: var(--pol-muted); opacity: 0.5; }
+
+/* ---- LOB chip ---- */
+.pol-lob-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px 2px 5px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+.pol-lob-auto { background: rgba(59, 130, 246, 0.08); color: #2563eb; }
+.pol-lob-health { background: rgba(236, 72, 153, 0.08); color: #db2777; }
+.pol-lob-life { background: rgba(16, 185, 129, 0.08); color: #059669; }
+.pol-lob-general-risk { background: rgba(245, 158, 11, 0.08); color: #d97706; }
+
+/* ---- Main tabs ---- */
+.pol-main-tabs {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.04);
+  margin-bottom: 20px;
+}
+.pol-main-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.pol-main-tab-on {
+  background: #fff;
+  color: var(--text-primary, #1a1a1a);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+.pol-main-tab-off {
+  background: transparent;
+  color: var(--pol-muted);
+}
+.pol-main-tab-off:hover { color: var(--text-primary, #1a1a1a); }
+
+/* ---- Tab count badge ---- */
+.pol-tab-count {
+  font-size: 9px;
+  font-weight: 600;
+  padding: 0px 5px;
+  border-radius: 9999px;
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--pol-muted);
+}
+.pol-tab-count-on { background: rgba(1, 105, 111, 0.1); color: var(--pol-brand); }
+
+/* ---- Cards ---- */
+.pol-card {
+  background: var(--pol-surface);
+  border-radius: 12px;
+  border: 1px solid var(--pol-border);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+.pol-card-padded { padding: 20px; }
+.pol-card-flush { overflow: hidden; }
+.pol-card-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+  margin-bottom: 14px;
+}
+.pol-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--pol-border);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+}
+.pol-card-head-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--pol-muted);
+  background: rgba(0, 0, 0, 0.04);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+/* ---- 2-col grid ---- */
+.pol-grid-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.pol-grid-span-2 { grid-column: span 2; }
+
+/* ---- Info grid (label/value pairs) ---- */
+.pol-info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px 24px;
+}
+.pol-info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.pol-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pol-muted);
+}
+.pol-value {
+  font-size: 13px;
+  color: var(--text-primary, #1a1a1a);
+}
+.pol-value-bold { font-weight: 600; }
+.pol-mono {
+  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
+  font-size: 12px;
+}
+
+/* ---- Buttons ---- */
+.pol-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #ffffff;
+  background: var(--pol-brand);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.pol-btn-primary:hover { background: #015258; }
+.pol-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+  background: #ffffff;
+  border: 1px solid var(--pol-border-strong);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.pol-btn-secondary:hover {
+  border-color: rgba(1, 105, 111, 0.2);
+  color: var(--pol-brand);
+}
+.pol-btn-sm { padding: 5px 10px; font-size: 11px; }
+
+/* ---- Status badges ---- */
+.pol-status-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+.pol-status-pill { border-radius: 9999px; }
+.pol-status-active { background: rgba(16, 185, 129, 0.1); color: #059669; }
+.pol-status-pending { background: rgba(245, 158, 11, 0.1); color: #d97706; }
+.pol-status-lapsed { background: rgba(244, 63, 94, 0.1); color: #e11d48; }
+.pol-status-cancelled { background: rgba(0, 0, 0, 0.05); color: var(--pol-muted); }
+.pol-status-expired { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
+
+/* ---- Payment status ---- */
+.pol-pay-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  white-space: nowrap;
+}
+.pol-pay-current { background: rgba(16, 185, 129, 0.1); color: #059669; }
+.pol-pay-overdue { background: rgba(244, 63, 94, 0.1); color: #e11d48; }
+.pol-pay-grace { background: rgba(245, 158, 11, 0.1); color: #d97706; }
+
+/* ---- Divider ---- */
+.pol-divider {
+  height: 1px;
+  background: var(--pol-border);
+  margin: 12px 0;
+}
+
+/* ---- Coverage ---- */
+.pol-coverage-header {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+.pol-coverage-list { display: flex; flex-direction: column; gap: 0; }
+.pol-coverage-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+}
+.pol-coverage-row:last-child { border-bottom: none; }
+.pol-coverage-label { font-size: 13px; color: var(--text-muted, #5c5650); }
+.pol-coverage-value { font-size: 13px; font-weight: 600; color: var(--text-primary, #1a1a1a); }
+
+/* ---- Policyholder ---- */
+.pol-holder-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+.pol-holder-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: var(--pol-brand-soft);
+  color: var(--pol-brand);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.pol-holder-name { font-size: 14px; font-weight: 600; color: var(--text-primary, #1a1a1a); }
+.pol-holder-cedula { font-size: 12px; color: var(--pol-muted); font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace; }
+
+/* ---- Fleet banner ---- */
+.pol-fleet-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: rgba(59, 130, 246, 0.04);
+  border: 1px solid rgba(59, 130, 246, 0.1);
+  color: #2563eb;
+}
+.pol-fleet-name { font-size: 13px; font-weight: 600; display: block; }
+.pol-fleet-discount { font-size: 11px; font-weight: 500; opacity: 0.8; display: block; margin-top: 1px; }
+
+/* ---- Table ---- */
+.pol-table-wrap { overflow-x: auto; }
+.pol-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.pol-th {
+  padding: 8px 12px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pol-muted);
+  border-bottom: 1px solid var(--pol-border);
+  white-space: nowrap;
+}
+.pol-th-right { text-align: right; }
+.pol-th-actions { text-align: center; width: 48px; }
+.pol-td {
+  padding: 8px 12px;
+  vertical-align: middle;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+  font-size: 13px;
+}
+.pol-td-right { text-align: right; }
+.pol-td-actions { text-align: center; white-space: nowrap; }
+.pol-row { transition: background 120ms ease; }
+.pol-row:hover { background: rgba(0, 0, 0, 0.015); }
+.pol-row:last-child .pol-td { border-bottom: none; }
+.pol-row-clickable { cursor: pointer; }
+
+/* ---- Customer link ---- */
+.pol-customer-link {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--pol-brand);
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+.pol-customer-link:hover { color: #015258; text-decoration: underline; }
+
+/* ---- Endorsement type ---- */
+.pol-endorse-type {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 6px;
+  background: rgba(139, 92, 246, 0.08);
+  color: #7c3aed;
+}
+
+/* ---- Claims expand ---- */
+.pol-claim-expand-row { background: rgba(0, 0, 0, 0.015); }
+.pol-claim-expand-cell { padding: 12px 16px !important; border-bottom: 1px solid var(--pol-border); }
+.pol-claim-desc { font-size: 13px; color: var(--text-muted, #5c5650); line-height: 1.5; margin: 0; }
+
+/* ---- Renewal change ---- */
+.pol-renewal-change { font-size: 12px; font-weight: 600; }
+.pol-change-up { color: #e11d48; }
+.pol-change-down { color: #059669; }
+
+/* ---- Documents grid ---- */
+.pol-docs-grid { display: flex; flex-direction: column; gap: 8px; }
+.pol-doc-card { padding: 14px 18px !important; }
+.pol-doc-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.pol-doc-icon-wrap {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: var(--pol-brand-soft);
+  color: var(--pol-brand);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.pol-doc-info { flex: 1; min-width: 0; }
+.pol-doc-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pol-doc-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--pol-muted);
+  margin-top: 3px;
+}
+.pol-doc-type-badge {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+.pol-doc-poliza { background: rgba(1, 105, 111, 0.08); color: var(--pol-brand); }
+.pol-doc-endoso { background: rgba(139, 92, 246, 0.08); color: #7c3aed; }
+.pol-doc-certificado { background: rgba(59, 130, 246, 0.08); color: #2563eb; }
+.pol-doc-recibo { background: rgba(245, 158, 11, 0.08); color: #d97706; }
+.pol-doc-other { background: rgba(0, 0, 0, 0.05); color: var(--pol-muted); }
+
+/* ---- Activity timeline ---- */
+.pol-timeline { display: flex; flex-direction: column; }
+.pol-timeline-item { display: flex; gap: 14px; }
+.pol-timeline-line-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 16px;
+}
+.pol-timeline-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--pol-brand);
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+.pol-timeline-line {
+  width: 2px;
+  flex: 1;
+  background: var(--pol-border);
+  min-height: 20px;
+}
+.pol-timeline-content {
+  flex: 1;
+  padding-bottom: 20px;
+}
+.pol-timeline-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.pol-timeline-action {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+}
+.pol-timeline-date {
+  font-size: 11px;
+  color: var(--pol-muted);
+  white-space: nowrap;
+}
+.pol-timeline-detail {
+  font-size: 13px;
+  color: var(--text-muted, #5c5650);
+  line-height: 1.5;
+  margin-bottom: 6px;
+}
+.pol-timeline-agent {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--pol-muted);
+  font-weight: 500;
+}
+.pol-agent-circle {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--pol-brand-soft);
+  color: var(--pol-brand);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+/* ---- Quick Info Strip ---- */
+.pol-quick-strip {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 12px 20px;
+  background: var(--pol-surface);
+  border-radius: 12px;
+  border: 1px solid var(--pol-border);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  margin-bottom: 20px;
+}
+.pol-quick-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 0;
+}
+.pol-quick-icon { color: var(--pol-brand); flex-shrink: 0; }
+.pol-quick-data { display: flex; flex-direction: column; gap: 1px; }
+.pol-quick-value {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary, #1a1a1a);
+  line-height: 1.2;
+}
+.pol-quick-warn { color: #e11d48; }
+.pol-quick-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pol-muted);
+}
+.pol-quick-sep {
+  width: 1px;
+  height: 32px;
+  background: var(--pol-border);
+  margin: 0 16px;
+  flex-shrink: 0;
+}
+
+/* ---- Billing current tag ---- */
+.pol-billing-current-tag {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: rgba(16, 185, 129, 0.1);
+  color: #059669;
+  margin-left: 6px;
+  vertical-align: middle;
+}
+
+/* ---- Compact table ---- */
+.pol-table-compact .pol-th { padding: 6px 10px; font-size: 10px; }
+.pol-table-compact .pol-td { padding: 6px 10px; font-size: 12px; }
+
+/* ---- Commission highlight ---- */
+.pol-commission-highlight {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 16px;
+  border-radius: 8px;
+  background: rgba(1, 105, 111, 0.04);
+  border: 1px solid rgba(1, 105, 111, 0.08);
+  margin-bottom: 4px;
+}
+.pol-commission-amount {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--pol-brand);
+  line-height: 1;
+}
+.pol-commission-rate {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--pol-muted);
+}
+
+/* ---- Agent Payout ---- */
+.pol-agent-payout { padding: 0 0 4px; }
+.pol-payout-bar {
+  height: 8px;
+  border-radius: 4px;
+  background: rgba(217, 119, 6, 0.15);
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+.pol-payout-paid {
+  height: 100%;
+  border-radius: 4px;
+  background: #059669;
+  transition: width 0.3s ease;
+}
+.pol-payout-legend {
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  color: var(--pol-text);
+}
+.pol-payout-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.pol-payout-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.pol-payout-dot-paid { background: #059669; }
+.pol-payout-dot-owed { background: #d97706; }
+
+/* ---- View Policy (PDF Viewer) Tab ---- */
+.pol-vd-layout {
+  display: flex;
+  gap: 0;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+  min-height: 600px;
+}
+.pol-vd-sidebar {
+  width: 280px;
+  flex-shrink: 0;
+  padding: 16px;
+  overflow-y: auto;
+  background: #fafaf9;
+  border-right: 1px solid rgba(0, 0, 0, 0.06);
+}
+.pol-vd-group-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  margin: 16px 0 6px;
+}
+.pol-vd-group-label:first-child {
+  margin-top: 0;
+}
+.pol-vd-card {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #fff;
+  margin-bottom: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.pol-vd-card:hover {
+  border-color: rgba(1, 105, 111, 0.25);
+  background: rgba(1, 105, 111, 0.02);
+}
+.pol-vd-card-active {
+  border-color: #01696f;
+  background: rgba(1, 105, 111, 0.06);
+  box-shadow: 0 0 0 1px rgba(1, 105, 111, 0.15);
+}
+.pol-vd-card-name {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #1a1a18;
+  line-height: 1.3;
+  margin-bottom: 6px;
+}
+.pol-vd-card-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pol-vd-type-badge {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+.pol-vd-badge-policy { background: rgba(1, 105, 111, 0.1); color: #01696f; }
+.pol-vd-badge-endorsement { background: rgba(168, 85, 247, 0.1); color: #7c3aed; }
+.pol-vd-badge-certificate { background: rgba(16, 185, 129, 0.1); color: #059669; }
+.pol-vd-badge-related { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
+.pol-vd-pages {
+  font-size: 11px;
+  color: #8a8a86;
+}
+
+/* Viewer panel */
+.pol-vd-viewer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.pol-vd-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: #fafaf9;
+  gap: 12px;
+}
+.pol-vd-toolbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+}
+.pol-vd-toolbar-name {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: #1a1a18;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pol-vd-toolbar-center {
+  flex-shrink: 0;
+}
+.pol-vd-page-indicator {
+  font-size: 12px;
+  color: #8a8a86;
+  font-weight: 500;
+}
+.pol-vd-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+.pol-vd-zoom-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #fff;
+  color: #6b6b67;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.pol-vd-zoom-btn:hover {
+  border-color: rgba(0, 0, 0, 0.12);
+  color: #1a1a18;
+}
+.pol-vd-zoom-level {
+  font-size: 11.5px;
+  font-weight: 500;
+  color: #6b6b67;
+  min-width: 36px;
+  text-align: center;
+}
+.pol-vd-toolbar-sep {
+  width: 1px;
+  height: 20px;
+  background: rgba(0, 0, 0, 0.08);
+  margin: 0 4px;
+}
+
+/* PDF area */
+.pol-vd-pdf-area {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background: #f0f0ee;
+}
+.pol-vd-pdf-paper {
+  width: 100%;
+  max-width: 520px;
+  min-height: 400px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.08),
+    0 4px 12px rgba(0, 0, 0, 0.04),
+    0 0 0 1px rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 40px 24px;
+}
+.pol-vd-pdf-icon {
+  width: 48px;
+  height: 48px;
+  color: #c4c4c0;
+}
+.pol-vd-pdf-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #8a8a86;
+  letter-spacing: 0.02em;
+}
+.pol-vd-pdf-docname {
+  font-size: 12.5px;
+  color: #6b6b67;
+  text-align: center;
+  max-width: 360px;
+  line-height: 1.4;
+}
+.pol-vd-pdf-pages {
+  font-size: 11px;
+  color: #a3a3a0;
+  margin-top: 4px;
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 768px) {
+  .pol-grid-2 { grid-template-columns: 1fr; }
+  .pol-grid-span-2 { grid-column: span 1; }
+  .pol-info-grid { grid-template-columns: 1fr; }
+  .pol-detail-header { flex-direction: column; }
+  .pol-detail-header-right { width: 100%; }
+  .pol-main-tabs { overflow-x: auto; width: 100%; }
+  .pol-quick-strip { flex-wrap: wrap; gap: 12px; }
+  .pol-quick-sep { display: none; }
+  .pol-quick-item { flex: 0 0 calc(50% - 6px); }
+  .pol-vd-layout { flex-direction: column; }
+  .pol-vd-sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); max-height: 240px; }
+}
+</style>
diff --git a/app/pages/policies/[application_id].vue b/app/pages/policies/app/[application_id].vue
similarity index 95%
rename from app/pages/policies/[application_id].vue
rename to app/pages/policies/app/[application_id].vue
index 4f51bb1..8197f0e 100644
--- a/app/pages/policies/[application_id].vue
+++ b/app/pages/policies/app/[application_id].vue
@@ -156,7 +156,7 @@ const applicantRows = computed(() => {
             </UBadge>
             <UBadge color="gray" variant="outline">CAR</UBadge>
           </div>
-          <h1 class="text-2xl font-bold text-slate-900">{{ policy.applicant_display_name }}</h1>
+          <h1 class="text-2xl font-semibold text-[var(--text-primary)]">{{ policy.applicant_display_name }}</h1>
           <p class="text-gray-500 text-sm font-mono">{{ policy.application_id }}</p>
         </div>
         <UButton icon="i-heroicons-arrow-path" color="gray" variant="soft" :loading="pending" @click="refresh()" />
@@ -168,7 +168,7 @@ const applicantRows = computed(() => {
         <!-- Applicant — dynamic rows based on client_type -->
         <UCard>
           <template #header>
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
+            <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
               <UIcon name="i-heroicons-user" class="w-4 h-4" />
               {{ policy.client_type === 'juridico' ? 'Legal Entity' : 'Applicant' }}
               <UBadge :color="clientTypeColor(policy.client_type)" variant="soft" size="xs">
@@ -187,7 +187,7 @@ const applicantRows = computed(() => {
         <!-- Vehicle -->
         <UCard>
           <template #header>
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
+            <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
               <UIcon name="i-heroicons-truck" class="w-4 h-4" /> Vehicle
             </p>
           </template>
@@ -204,7 +204,7 @@ const applicantRows = computed(() => {
         <!-- Issued policy -->
         <UCard v-if="policy.policy_number">
           <template #header>
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
+            <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
               <UIcon name="i-heroicons-check-badge" class="w-4 h-4 text-green-500" /> Policy
             </p>
           </template>
@@ -220,7 +220,7 @@ const applicantRows = computed(() => {
         <!-- Providers -->
         <UCard>
           <template #header>
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
+            <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
               <UIcon name="i-heroicons-building-office" class="w-4 h-4" /> Providers
               <UBadge color="gray" variant="soft" size="xs">{{ policy.selected_providers?.length ?? 0 }}</UBadge>
             </p>
@@ -243,7 +243,7 @@ const applicantRows = computed(() => {
       <UCard v-if="quotes.length > 0">
         <template #header>
           <div class="flex justify-between items-center">
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
+            <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
               <UIcon name="i-heroicons-table-cells" class="w-4 h-4" /> Quote Comparison
               <UBadge color="gray" variant="soft" size="xs">{{ allPlans.length }} plans</UBadge>
             </p>
@@ -265,7 +265,7 @@ const applicantRows = computed(() => {
                     <UBadge v-if="plan.plan_id === policy.accepted_plan_id" color="green" variant="soft" size="xs">
                       Selected
                     </UBadge>
-                    <p class="font-semibold text-slate-800">{{ plan.name }}</p>
+                    <p class="font-semibold text-[var(--text-primary)]">{{ plan.name }}</p>
                     <p class="text-xs font-mono text-gray-400">{{ plan.provider_id?.slice(0, 8) }}...</p>
                   </div>
                 </th>
@@ -276,7 +276,7 @@ const applicantRows = computed(() => {
                 <td class="py-3 px-4 font-medium text-gray-600">Premium</td>
                 <td v-for="plan in allPlans" :key="plan.plan_id" class="py-3 px-4 text-center"
                   :class="plan.plan_id === policy.accepted_plan_id ? 'bg-green-50' : ''">
-                  <span class="font-bold text-lg text-slate-900">${{ Number(plan.premium).toLocaleString() }}</span>
+                  <span class="font-bold text-lg text-[var(--text-primary)]">${{ Number(plan.premium).toLocaleString() }}</span>
                   <span class="text-xs text-gray-400 block">/year</span>
                 </td>
               </tr>
@@ -332,7 +332,7 @@ const applicantRows = computed(() => {
       <UCard v-if="policy.solicitation_id">
         <template #header>
           <div class="flex justify-between items-center">
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
+            <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
               <UIcon name="i-heroicons-document-text" class="w-4 h-4" /> Solicitation Document
             </p>
             <div class="flex items-center gap-2">
@@ -377,7 +377,7 @@ const applicantRows = computed(() => {
         <div class="flex flex-col h-full">
           <div class="flex justify-between items-center p-6 border-b">
             <div>
-              <h2 class="text-lg font-semibold text-slate-900">Accept Plan</h2>
+              <h2 class="text-lg font-semibold text-[var(--text-primary)]">Accept Plan</h2>
               <p v-if="selectedPlan" class="text-sm text-gray-500">
                 {{ selectedPlan.name }} — ${{ Number(selectedPlan.premium).toLocaleString() }}/yr
               </p>
@@ -413,7 +413,7 @@ const applicantRows = computed(() => {
             <!-- Optional solicitation fields -->
             <div class="space-y-3">
               <div class="flex justify-between items-center">
-                <p class="font-medium text-sm text-slate-700">Additional Fields</p>
+                <p class="font-medium text-sm text-[var(--text-primary)]">Additional Fields</p>
                 <UButton
                   icon="i-heroicons-plus" color="gray" variant="soft" size="xs"
                   @click="solicitationFields[`field_${Object.keys(solicitationFields).length + 1}`] = ''"
diff --git a/app/pages/policies/book.vue b/app/pages/policies/book.vue
new file mode 100644
index 0000000..a372a7b
--- /dev/null
+++ b/app/pages/policies/book.vue
@@ -0,0 +1,836 @@
+<script setup lang="ts">
+import { MOCK_CUSTOMERS, fmtMoney, type MockPolicy } from '~/data/mock-customers'
+
+definePageMeta({ ssr: false })
+usePageTitle('Book of Business')
+
+const { items } = useEmissionsQueue()
+const inForce = computed(() => items.value.filter((x) => x.status === 'in_force'))
+
+/* ── Flatten all mock policies with customer info ── */
+type FlatPolicy = MockPolicy & { customerName: string; customerId: string }
+
+const allPolicies = computed<FlatPolicy[]>(() => {
+  const rows: FlatPolicy[] = []
+  for (const cust of MOCK_CUSTOMERS) {
+    for (const pol of cust.policies) {
+      rows.push({ ...pol, customerName: cust.name, customerId: cust.id })
+    }
+  }
+  return rows
+})
+
+/* ── KPIs ── */
+const totalGWP = computed(() => allPolicies.value.reduce((s, p) => s + p.premium, 0))
+const activePolicies = computed(() => allPolicies.value.filter((p) => p.status === 'Active').length)
+const retentionRate = computed(() => {
+  const total = allPolicies.value.length
+  const active = allPolicies.value.filter((p) => p.status === 'Active').length
+  return total > 0 ? Math.round((active / total) * 100) : 0
+})
+const avgPremium = computed(() => {
+  const count = allPolicies.value.length
+  return count > 0 ? Math.round(totalGWP.value / count) : 0
+})
+
+/* ── Line of business breakdown ── */
+type LineRow = { line: string; count: number; totalPremium: number; pctOfBook: number; icon: string }
+
+const lineBreakdown = computed<LineRow[]>(() => {
+  const map = new Map<string, { count: number; total: number; icon: string }>()
+  for (const pol of allPolicies.value) {
+    const existing = map.get(pol.line)
+    if (existing) {
+      existing.count++
+      existing.total += pol.premium
+    } else {
+      map.set(pol.line, { count: 1, total: pol.premium, icon: lineIcon(pol.line) })
+    }
+  }
+  const gwp = totalGWP.value || 1
+  const rows: LineRow[] = []
+  for (const [line, data] of map.entries()) {
+    rows.push({
+      line,
+      count: data.count,
+      totalPremium: data.total,
+      pctOfBook: Math.round((data.total / gwp) * 100),
+      icon: data.icon
+    })
+  }
+  rows.sort((a, b) => b.totalPremium - a.totalPremium)
+  return rows
+})
+
+/* ── Top carriers ── */
+type CarrierRow = { carrier: string; count: number; gwp: number; pctShare: number }
+
+const topCarriers = computed<CarrierRow[]>(() => {
+  const map = new Map<string, { count: number; gwp: number }>()
+  for (const pol of allPolicies.value) {
+    const existing = map.get(pol.carrier)
+    if (existing) {
+      existing.count++
+      existing.gwp += pol.premium
+    } else {
+      map.set(pol.carrier, { count: 1, gwp: pol.premium })
+    }
+  }
+  const gwp = totalGWP.value || 1
+  const rows: CarrierRow[] = []
+  for (const [carrier, data] of map.entries()) {
+    rows.push({
+      carrier,
+      count: data.count,
+      gwp: data.gwp,
+      pctShare: Math.round((data.gwp / gwp) * 100)
+    })
+  }
+  rows.sort((a, b) => b.gwp - a.gwp)
+  return rows
+})
+
+/* ── Recent activity ── */
+type ActivityItem = { date: string; text: string; type: string; customerName: string }
+
+const recentActivity = computed<ActivityItem[]>(() => {
+  const events: ActivityItem[] = []
+  for (const cust of MOCK_CUSTOMERS) {
+    for (const evt of cust.activity) {
+      if (evt.type === 'policy' || evt.type === 'renewal' || evt.type === 'claim') {
+        events.push({ ...evt, customerName: cust.name })
+      }
+    }
+  }
+  const order = ['Today', 'Yesterday']
+  events.sort((a, b) => {
+    const ai = order.indexOf(a.date)
+    const bi = order.indexOf(b.date)
+    if (ai >= 0 && bi >= 0) return ai - bi
+    if (ai >= 0) return -1
+    if (bi >= 0) return 1
+    return b.date.localeCompare(a.date)
+  })
+  return events.slice(0, 5)
+})
+
+/* ── Helpers ── */
+function lineIcon(line: string) {
+  switch (line) {
+    case 'Auto':     return 'i-heroicons-truck'
+    case 'Health':   return 'i-heroicons-heart'
+    case 'Life':     return 'i-heroicons-shield-check'
+    case 'Home':     return 'i-heroicons-home-modern'
+    case 'Renter':   return 'i-heroicons-home-modern'
+    case 'Umbrella': return 'i-heroicons-shield-exclamation'
+    default:         return 'i-heroicons-document'
+  }
+}
+
+function lineColorClass(line: string) {
+  switch (line) {
+    case 'Auto':     return 'bk-line-auto'
+    case 'Health':   return 'bk-line-health'
+    case 'Life':     return 'bk-line-life'
+    case 'Home':     return 'bk-line-home'
+    case 'Renter':   return 'bk-line-home'
+    case 'Umbrella': return 'bk-line-umbrella'
+    default:         return 'bk-line-default'
+  }
+}
+
+function activityIcon(type: string) {
+  switch (type) {
+    case 'policy':  return 'i-heroicons-document-check'
+    case 'renewal': return 'i-heroicons-arrow-path'
+    case 'claim':   return 'i-heroicons-shield-exclamation'
+    default:        return 'i-heroicons-document'
+  }
+}
+
+function activityColor(type: string) {
+  switch (type) {
+    case 'policy':  return 'background: rgba(1,105,111,0.08); color: #01696f;'
+    case 'renewal': return 'background: rgba(245,158,11,0.08); color: #d97706;'
+    case 'claim':   return 'background: rgba(244,63,94,0.08); color: #e11d48;'
+    default:        return 'background: rgba(0,0,0,0.04); color: #8a8a86;'
+  }
+}
+
+/* ── Tab state ── */
+const activeTab = ref<'overview' | 'carriers'>('overview')
+</script>
+
+<template>
+  <div class="bk-root mx-auto max-w-6xl space-y-6 pb-12">
+    <!-- Header -->
+    <div class="flex items-start justify-between">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Book of Business</h1>
+        <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+          Consolidated view of all policies, lines, and carriers
+        </p>
+      </div>
+      <div class="flex items-center gap-2">
+        <NuxtLink to="/policies">
+          <button class="bk-btn-secondary">
+            <UIcon name="i-heroicons-arrow-left" class="w-3.5 h-3.5" />
+            All Policies
+          </button>
+        </NuxtLink>
+      </div>
+    </div>
+
+    <!-- Process note -->
+    <div style="display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: rgba(147,51,234,0.05); border: 1px solid rgba(147,51,234,0.12);">
+      <UIcon name="i-heroicons-beaker" style="width: 16px; height: 16px; color: #9333ea; flex-shrink: 0; margin-top: 1px;" />
+      <div>
+        <p style="font-size: 13px; font-weight: 600; color: #7c3aed;">Cartera Global in development</p>
+        <p style="font-size: 12px; color: #8b5cf6; margin-top: 2px; line-height: 1.5;">Portfolio views, carrier breakdowns, retention analytics, and book-level reporting are actively being defined. Layout and feature scope may change.</p>
+      </div>
+    </div>
+
+    <!-- KPI strip -->
+    <div class="bk-kpi-strip">
+      <div class="bk-kpi-item">
+        <span class="bk-kpi-label">Total Book GWP</span>
+        <span class="bk-kpi-value">{{ fmtMoney(totalGWP) }}<span class="bk-kpi-suffix">/yr</span></span>
+      </div>
+      <div class="bk-kpi-divider" />
+      <div class="bk-kpi-item">
+        <span class="bk-kpi-label">Active Policies</span>
+        <span class="bk-kpi-value">{{ activePolicies }}</span>
+      </div>
+      <div class="bk-kpi-divider" />
+      <div class="bk-kpi-item">
+        <span class="bk-kpi-label">Retention Rate</span>
+        <span class="bk-kpi-value">{{ retentionRate }}%</span>
+      </div>
+      <div class="bk-kpi-divider" />
+      <div class="bk-kpi-item">
+        <span class="bk-kpi-label">Avg Premium</span>
+        <span class="bk-kpi-value">{{ fmtMoney(avgPremium) }}</span>
+      </div>
+    </div>
+
+    <!-- In-force from emissions queue (real data) -->
+    <div v-if="inForce.length > 0" class="bk-card bk-card-flush">
+      <div class="bk-card-head">
+        <span>In-Force from Emissions</span>
+        <span class="bk-card-head-count">{{ inForce.length }}</span>
+      </div>
+      <div class="bk-table-wrap">
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th class="bk-th">Customer</th>
+              <th class="bk-th">Insurer</th>
+              <th class="bk-th">Product</th>
+              <th class="bk-th">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in inForce" :key="row.id" class="bk-row">
+              <td class="bk-td">
+                <span class="bk-text-primary">{{ row.customerLabel }}</span>
+              </td>
+              <td class="bk-td">
+                <span class="bk-text-muted">{{ row.insurerSlug }}</span>
+              </td>
+              <td class="bk-td">
+                <span class="bk-text-muted">{{ row.subRamoKey }} · {{ row.productLine }}</span>
+              </td>
+              <td class="bk-td">
+                <span class="bk-status-badge bk-status-active">In force</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Tab toggle -->
+    <div class="bk-tab-container">
+      <button
+        class="bk-tab"
+        :class="{ 'bk-tab-active': activeTab === 'overview' }"
+        @click="activeTab = 'overview'"
+      >
+        Overview
+      </button>
+      <button
+        class="bk-tab"
+        :class="{ 'bk-tab-active': activeTab === 'carriers' }"
+        @click="activeTab = 'carriers'"
+      >
+        Carriers
+      </button>
+    </div>
+
+    <!-- Overview tab -->
+    <template v-if="activeTab === 'overview'">
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Line of Business breakdown -->
+        <div class="bk-card bk-card-flush">
+          <div class="bk-card-head">
+            <span>By Line of Business</span>
+            <span class="bk-card-head-count">{{ lineBreakdown.length }} lines</span>
+          </div>
+          <div class="bk-table-wrap">
+            <table class="bk-table">
+              <thead>
+                <tr>
+                  <th class="bk-th">Line</th>
+                  <th class="bk-th" style="text-align: center;">Policies</th>
+                  <th class="bk-th" style="text-align: right;">Premium</th>
+                  <th class="bk-th" style="text-align: right; width: 80px;">% of Book</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in lineBreakdown" :key="row.line" class="bk-row">
+                  <td class="bk-td">
+                    <div class="flex items-center gap-2.5">
+                      <div class="bk-line-icon-wrap" :class="lineColorClass(row.line)">
+                        <UIcon :name="row.icon" class="w-3.5 h-3.5" />
+                      </div>
+                      <span class="bk-text-primary" style="font-weight: 600;">{{ row.line }}</span>
+                    </div>
+                  </td>
+                  <td class="bk-td" style="text-align: center;">
+                    <span class="bk-text-muted">{{ row.count }}</span>
+                  </td>
+                  <td class="bk-td" style="text-align: right;">
+                    <span class="bk-text-primary" style="font-weight: 600;">{{ fmtMoney(row.totalPremium) }}</span>
+                  </td>
+                  <td class="bk-td" style="text-align: right;">
+                    <div class="bk-pct-cell">
+                      <div class="bk-pct-bar">
+                        <div class="bk-pct-bar-fill" :style="{ width: row.pctOfBook + '%' }" />
+                      </div>
+                      <span class="bk-pct-label">{{ row.pctOfBook }}%</span>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Recent Activity -->
+        <div class="bk-card bk-card-flush">
+          <div class="bk-card-head">
+            <span>Recent Activity</span>
+            <span class="bk-card-head-count">Last 5</span>
+          </div>
+          <div class="bk-activity-list">
+            <div v-for="(evt, i) in recentActivity" :key="i" class="bk-activity-item">
+              <div class="bk-activity-icon" :style="activityColor(evt.type)">
+                <UIcon :name="activityIcon(evt.type)" class="w-3.5 h-3.5" />
+              </div>
+              <div class="bk-activity-body">
+                <p class="bk-activity-text">{{ evt.text }}</p>
+                <p class="bk-activity-meta">{{ evt.customerName }} · {{ evt.date }}</p>
+              </div>
+            </div>
+            <div v-if="recentActivity.length === 0" class="bk-empty-small">
+              <p>No recent policy activity</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Premium distribution visual -->
+      <div class="bk-card bk-card-flush">
+        <div class="bk-card-head">
+          <span>Premium Distribution</span>
+        </div>
+        <div style="padding: 20px;">
+          <div class="bk-dist-bar">
+            <div
+              v-for="row in lineBreakdown"
+              :key="row.line"
+              class="bk-dist-segment"
+              :class="lineColorClass(row.line)"
+              :style="{ width: row.pctOfBook + '%' }"
+              :title="`${row.line}: ${row.pctOfBook}%`"
+            />
+          </div>
+          <div class="bk-dist-legend">
+            <div v-for="row in lineBreakdown" :key="row.line" class="bk-dist-legend-item">
+              <span class="bk-dist-dot" :class="lineColorClass(row.line)" />
+              <span class="bk-dist-legend-label">{{ row.line }}</span>
+              <span class="bk-dist-legend-pct">{{ row.pctOfBook }}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Carriers tab -->
+    <template v-if="activeTab === 'carriers'">
+      <div class="bk-card bk-card-flush">
+        <div class="bk-card-head">
+          <span>Top Carriers</span>
+          <span class="bk-card-head-count">{{ topCarriers.length }} carriers</span>
+        </div>
+        <div class="bk-table-wrap">
+          <table class="bk-table">
+            <thead>
+              <tr>
+                <th class="bk-th" style="width: 36px;">#</th>
+                <th class="bk-th">Carrier</th>
+                <th class="bk-th" style="text-align: center;">Policies</th>
+                <th class="bk-th" style="text-align: right;">GWP</th>
+                <th class="bk-th" style="text-align: right; width: 100px;">Share</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, idx) in topCarriers" :key="row.carrier" class="bk-row">
+                <td class="bk-td">
+                  <span class="bk-rank">{{ idx + 1 }}</span>
+                </td>
+                <td class="bk-td">
+                  <span class="bk-text-primary" style="font-weight: 600;">{{ row.carrier }}</span>
+                </td>
+                <td class="bk-td" style="text-align: center;">
+                  <span class="bk-text-muted">{{ row.count }}</span>
+                </td>
+                <td class="bk-td" style="text-align: right;">
+                  <span class="bk-text-primary" style="font-weight: 600;">{{ fmtMoney(row.gwp) }}</span>
+                </td>
+                <td class="bk-td" style="text-align: right;">
+                  <div class="bk-pct-cell">
+                    <div class="bk-pct-bar">
+                      <div class="bk-pct-bar-fill" :style="{ width: row.pctShare + '%' }" />
+                    </div>
+                    <span class="bk-pct-label">{{ row.pctShare }}%</span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Carrier premium breakdown -->
+      <div class="bk-card bk-card-flush">
+        <div class="bk-card-head">
+          <span>Carrier Premium Share</span>
+        </div>
+        <div style="padding: 20px;">
+          <div class="bk-carrier-bars">
+            <div v-for="row in topCarriers" :key="row.carrier" class="bk-carrier-bar-row">
+              <span class="bk-carrier-bar-label">{{ row.carrier }}</span>
+              <div class="bk-carrier-bar-track">
+                <div class="bk-carrier-bar-fill" :style="{ width: row.pctShare + '%' }" />
+              </div>
+              <span class="bk-carrier-bar-value">{{ fmtMoney(row.gwp) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* =====================================================================
+   BOOK OF BUSINESS — DESIGN SYSTEM (scoped, bk- prefix)
+   ===================================================================== */
+
+.bk-root {
+  --bk-brand: #01696f;
+  --bk-brand-soft: rgba(1, 105, 111, 0.06);
+  --bk-border: rgba(0, 0, 0, 0.06);
+  --bk-muted: #8a8a86;
+}
+
+
+/* ---- Card system ---- */
+.bk-card {
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+.bk-card-flush {
+  overflow: hidden;
+}
+.bk-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+}
+.bk-card-head-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: #8a8a86;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+/* ---- KPI strip ---- */
+.bk-kpi-strip {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  padding: 16px 0;
+}
+.bk-kpi-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+.bk-kpi-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+}
+.bk-kpi-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary, #1a1a1a);
+  letter-spacing: -0.01em;
+}
+.bk-kpi-suffix {
+  font-size: 13px;
+  font-weight: 500;
+  color: #8a8a86;
+  margin-left: 2px;
+}
+.bk-kpi-divider {
+  width: 1px;
+  height: 36px;
+  background: rgba(0, 0, 0, 0.06);
+  flex-shrink: 0;
+}
+
+/* ---- Buttons ---- */
+.bk-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.bk-btn-secondary:hover {
+  border-color: rgba(1, 105, 111, 0.2);
+  color: #01696f;
+}
+
+/* ---- Tab toggle ---- */
+.bk-tab-container {
+  display: inline-flex;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
+  padding: 3px;
+  gap: 2px;
+}
+.bk-tab {
+  padding: 6px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #8a8a86;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.bk-tab:hover {
+  color: var(--text-primary, #1a1a1a);
+}
+.bk-tab-active {
+  background: #ffffff;
+  color: var(--text-primary, #1a1a1a);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* ---- Table ---- */
+.bk-table-wrap {
+  overflow-x: auto;
+}
+.bk-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.bk-th {
+  padding: 10px 16px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  white-space: nowrap;
+}
+.bk-td {
+  padding: 12px 16px;
+  vertical-align: middle;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+}
+.bk-row {
+  transition: background 120ms ease;
+}
+.bk-row:hover {
+  background: rgba(0, 0, 0, 0.015);
+}
+.bk-row:last-child .bk-td {
+  border-bottom: none;
+}
+
+/* ---- Text helpers ---- */
+.bk-text-primary {
+  font-size: 13px;
+  color: var(--text-primary, #1a1a1a);
+}
+.bk-text-muted {
+  font-size: 13px;
+  color: var(--text-muted, #5c5650);
+}
+
+/* ---- Status badge ---- */
+.bk-status-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+.bk-status-active { background: rgba(16, 185, 129, 0.1); color: #059669; }
+
+/* ---- Line icon wrap ---- */
+.bk-line-icon-wrap {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  flex-shrink: 0;
+}
+
+/* ---- Line colors (used for icons, dist segments, dots) ---- */
+.bk-line-auto     { background: rgba(59, 130, 246, 0.08); color: #2563eb; }
+.bk-line-health   { background: rgba(236, 72, 153, 0.08); color: #db2777; }
+.bk-line-life     { background: rgba(16, 185, 129, 0.08); color: #059669; }
+.bk-line-home     { background: rgba(245, 158, 11, 0.08); color: #d97706; }
+.bk-line-umbrella { background: rgba(139, 92, 246, 0.08); color: #7c3aed; }
+.bk-line-default  { background: rgba(0, 0, 0, 0.04); color: #8a8a86; }
+
+/* ---- Percentage cell ---- */
+.bk-pct-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.bk-pct-bar {
+  width: 48px;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.bk-pct-bar-fill {
+  height: 100%;
+  background: #01696f;
+  border-radius: 2px;
+  transition: width 300ms ease;
+}
+.bk-pct-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #8a8a86;
+  min-width: 28px;
+  text-align: right;
+}
+
+/* ---- Rank badge ---- */
+.bk-rank {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.04);
+  font-size: 11px;
+  font-weight: 700;
+  color: #8a8a86;
+}
+
+/* ---- Distribution bar ---- */
+.bk-dist-bar {
+  display: flex;
+  height: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  gap: 2px;
+}
+.bk-dist-segment {
+  height: 100%;
+  min-width: 4px;
+  border-radius: 3px;
+  transition: width 300ms ease;
+}
+/* Reuse line color classes for segment backgrounds */
+.bk-dist-segment.bk-line-auto     { background: #3b82f6; }
+.bk-dist-segment.bk-line-health   { background: #ec4899; }
+.bk-dist-segment.bk-line-life     { background: #10b981; }
+.bk-dist-segment.bk-line-home     { background: #f59e0b; }
+.bk-dist-segment.bk-line-umbrella { background: #8b5cf6; }
+.bk-dist-segment.bk-line-default  { background: #8a8a86; }
+
+.bk-dist-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 14px;
+}
+.bk-dist-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.bk-dist-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+/* Dot colors match segment colors */
+.bk-dist-dot.bk-line-auto     { background: #3b82f6; }
+.bk-dist-dot.bk-line-health   { background: #ec4899; }
+.bk-dist-dot.bk-line-life     { background: #10b981; }
+.bk-dist-dot.bk-line-home     { background: #f59e0b; }
+.bk-dist-dot.bk-line-umbrella { background: #8b5cf6; }
+.bk-dist-dot.bk-line-default  { background: #8a8a86; }
+
+.bk-dist-legend-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary, #1a1a1a);
+}
+.bk-dist-legend-pct {
+  font-size: 11px;
+  font-weight: 600;
+  color: #8a8a86;
+}
+
+/* ---- Carrier horizontal bars ---- */
+.bk-carrier-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.bk-carrier-bar-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.bk-carrier-bar-label {
+  width: 120px;
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+  text-align: right;
+}
+.bk-carrier-bar-track {
+  flex: 1;
+  height: 8px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.bk-carrier-bar-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #01696f, #018f97);
+  border-radius: 4px;
+  transition: width 300ms ease;
+}
+.bk-carrier-bar-value {
+  width: 80px;
+  flex-shrink: 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted, #5c5650);
+}
+
+/* ---- Activity list ---- */
+.bk-activity-list {
+  display: flex;
+  flex-direction: column;
+}
+.bk-activity-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+  transition: background 120ms ease;
+}
+.bk-activity-item:hover {
+  background: rgba(0, 0, 0, 0.01);
+}
+.bk-activity-item:last-child {
+  border-bottom: none;
+}
+.bk-activity-icon {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  flex-shrink: 0;
+}
+.bk-activity-body {
+  flex: 1;
+  min-width: 0;
+}
+.bk-activity-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary, #1a1a1a);
+  line-height: 1.4;
+}
+.bk-activity-meta {
+  font-size: 11px;
+  color: #8a8a86;
+  margin-top: 2px;
+}
+
+/* ---- Empty small ---- */
+.bk-empty-small {
+  padding: 32px 20px;
+  text-align: center;
+  font-size: 13px;
+  color: #8a8a86;
+}
+</style>
diff --git a/app/pages/policies/groups/index.vue b/app/pages/policies/groups/index.vue
new file mode 100644
index 0000000..953d229
--- /dev/null
+++ b/app/pages/policies/groups/index.vue
@@ -0,0 +1,965 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+usePageTitle('Colectivos · Cartera')
+
+const { accounts, activeAccounts, totalMembers, totalDependents, totalPremium } = useColectivos()
+
+/* ── Filters & sort ── */
+
+const search = ref('')
+const viewMode = ref<'card' | 'list'>('card')
+const lobFilter = ref<string>('all')
+const statusFilter = ref<string>('all')
+const carrierFilter = ref<string>('all')
+const agentFilter = ref<string>('all')
+const sortBy = ref<string>('premium_desc')
+
+const lobOptions = [
+  { label: 'All LOBs', value: 'all' },
+  { label: 'Health', value: 'Health' },
+  { label: 'Life', value: 'Life' },
+  { label: 'Disability', value: 'Disability' },
+]
+
+const statusOptions = [
+  { label: 'All statuses', value: 'all' },
+  { label: 'Active', value: 'active' },
+  { label: 'Onboarding', value: 'onboarding' },
+  { label: 'Renewal Due', value: 'renewal_due' },
+  { label: 'Suspended', value: 'suspended' },
+]
+
+const sortOptions = [
+  { label: 'Premium (high → low)', value: 'premium_desc' },
+  { label: 'Members (high → low)', value: 'members_desc' },
+  { label: 'Renewal date', value: 'renewal' },
+  { label: 'Alphabetical', value: 'alpha' },
+]
+
+const carrierOptions = computed(() => [
+  { label: 'All Carriers', value: 'all' },
+  ...([...new Set(accounts.value.map(a => a.carrier))].sort().map(c => ({ label: c, value: c })))
+])
+
+const agentOptions = computed(() => [
+  { label: 'All Agents', value: 'all' },
+  ...([...new Set(accounts.value.map(a => a.agent))].sort().map(a => ({ label: a, value: a })))
+])
+
+/* ── Derived data ── */
+
+const onboardingCount = computed(() =>
+  accounts.value.filter(a => a.status === 'onboarding').length,
+)
+const renewalDueCount = computed(() =>
+  accounts.value.filter(a => a.status === 'renewal_due').length,
+)
+const suspendedCount = computed(() =>
+  accounts.value.filter(a => a.status === 'suspended').length,
+)
+const totalMonthlyPremium = computed(() =>
+  accounts.value.reduce((s, a) => s + a.monthlyPremium, 0),
+)
+const avgCommission = computed(() => {
+  if (!accounts.value.length) return 0
+  return accounts.value.reduce((s, a) => s + a.commissionPct, 0) / accounts.value.length
+})
+
+const filtered = computed(() => {
+  let rows = [...accounts.value]
+
+  if (lobFilter.value !== 'all') rows = rows.filter(a => a.lob === lobFilter.value)
+  if (statusFilter.value !== 'all') rows = rows.filter(a => a.status === statusFilter.value)
+  if (carrierFilter.value !== 'all') rows = rows.filter(a => a.carrier === carrierFilter.value)
+  if (agentFilter.value !== 'all') rows = rows.filter(a => a.agent === agentFilter.value)
+
+  const q = search.value.trim().toLowerCase()
+  if (q) {
+    rows = rows.filter(a =>
+      a.name.toLowerCase().includes(q) ||
+      a.carrier.toLowerCase().includes(q) ||
+      a.product.toLowerCase().includes(q),
+    )
+  }
+
+  switch (sortBy.value) {
+    case 'premium_desc': rows.sort((a, b) => b.annualPremium - a.annualPremium); break
+    case 'members_desc': rows.sort((a, b) => b.totalMembers - a.totalMembers); break
+    case 'renewal': rows.sort((a, b) => a.renewalDate.localeCompare(b.renewalDate)); break
+    case 'alpha': rows.sort((a, b) => a.name.localeCompare(b.name)); break
+  }
+
+  return rows
+})
+
+const filteredTotalAnnual = computed(() =>
+  filtered.value.reduce((s, a) => s + a.annualPremium, 0),
+)
+const filteredTotalMembers = computed(() =>
+  filtered.value.reduce((s, a) => s + a.totalMembers, 0),
+)
+const filteredTotalDependents = computed(() =>
+  filtered.value.reduce((s, a) => s + a.dependentsCount, 0),
+)
+
+/* ── Portfolio health segments ── */
+
+const healthSegments = computed(() => {
+  const total = accounts.value.length || 1
+  const active = activeAccounts.value.length
+  const onboarding = onboardingCount.value
+  const renewal = renewalDueCount.value
+  const suspended = suspendedCount.value
+  return [
+    { label: 'Active', count: active, pct: (active / total) * 100, color: '#16a34a' },
+    { label: 'Onboarding', count: onboarding, pct: (onboarding / total) * 100, color: '#3b82f6' },
+    { label: 'Renewal Due', count: renewal, pct: (renewal / total) * 100, color: '#f59e0b' },
+    { label: 'Suspended', count: suspended, pct: (suspended / total) * 100, color: '#dc2626' },
+  ]
+})
+
+/* ── KPI cards config ── */
+
+const kpiCards = computed(() => [
+  {
+    label: 'Total Groups',
+    value: accounts.value.length.toString(),
+    icon: 'i-heroicons-building-office-2',
+    iconBg: 'rgba(1,105,111,0.08)',
+    iconColor: '#01696f',
+    accent: '',
+  },
+  {
+    label: 'Active Groups',
+    value: activeAccounts.value.length.toString(),
+    icon: 'i-heroicons-check-badge',
+    iconBg: 'rgba(22,163,74,0.08)',
+    iconColor: '#16a34a',
+    accent: '',
+  },
+  {
+    label: 'Total Members',
+    value: totalMembers.value.toLocaleString(),
+    icon: 'i-heroicons-users',
+    iconBg: 'rgba(59,130,246,0.08)',
+    iconColor: '#3b82f6',
+    accent: '',
+  },
+  {
+    label: 'Total Dependents',
+    value: totalDependents.value.toLocaleString(),
+    icon: 'i-heroicons-user-plus',
+    iconBg: 'rgba(139,92,246,0.08)',
+    iconColor: '#8b5cf6',
+    accent: '',
+  },
+  {
+    label: 'Annual Premium',
+    value: fmtCurrency(totalPremium.value),
+    icon: 'i-heroicons-banknotes',
+    iconBg: 'rgba(1,105,111,0.08)',
+    iconColor: '#01696f',
+    accent: 'gc-kpi--teal',
+  },
+  {
+    label: 'Monthly Premium',
+    value: fmtCurrency(totalMonthlyPremium.value),
+    icon: 'i-heroicons-calendar-days',
+    iconBg: 'rgba(1,105,111,0.08)',
+    iconColor: '#01696f',
+    accent: 'gc-kpi--teal',
+  },
+  {
+    label: 'Renewals Due',
+    value: renewalDueCount.value.toString(),
+    icon: 'i-heroicons-clock',
+    iconBg: 'rgba(245,158,11,0.08)',
+    iconColor: '#f59e0b',
+    accent: 'gc-kpi--amber',
+  },
+  {
+    label: 'Onboarding',
+    value: onboardingCount.value.toString(),
+    icon: 'i-heroicons-arrow-path',
+    iconBg: 'rgba(59,130,246,0.08)',
+    iconColor: '#3b82f6',
+    accent: '',
+  },
+  {
+    label: 'Avg Commission',
+    value: avgCommission.value.toFixed(1) + '%',
+    icon: 'i-heroicons-chart-bar',
+    iconBg: 'rgba(139,92,246,0.08)',
+    iconColor: '#8b5cf6',
+    accent: '',
+  },
+])
+
+/* ── Helpers ── */
+
+function fmtCurrency(n: number) {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(n)
+}
+
+function fmtDate(d: string) {
+  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+function lobColor(lob: string) {
+  switch (lob) {
+    case 'Health': return 'success'
+    case 'Life': return 'info'
+    case 'Disability': return 'warning'
+    default: return 'neutral'
+  }
+}
+
+function statusBadge(s: string) {
+  switch (s) {
+    case 'active': return { label: 'Active', color: 'success' as const }
+    case 'onboarding': return { label: 'Onboarding', color: 'info' as const }
+    case 'renewal_due': return { label: 'Renewal Due', color: 'warning' as const }
+    case 'quoting': return { label: 'Quoting', color: 'neutral' as const }
+    case 'suspended': return { label: 'Suspended', color: 'error' as const }
+    case 'cancelled': return { label: 'Cancelled', color: 'neutral' as const }
+    default: return { label: s, color: 'neutral' as const }
+  }
+}
+
+function renewalClass(d: string) {
+  const diff = (new Date(d).getTime() - Date.now()) / 86_400_000
+  if (diff < 0) return 'gc-renewal--overdue'
+  if (diff <= 30) return 'gc-renewal--urgent'
+  if (diff <= 90) return 'gc-renewal--soon'
+  return ''
+}
+
+function renewalDotClass(d: string) {
+  const diff = (new Date(d).getTime() - Date.now()) / 86_400_000
+  if (diff < 0) return 'gc-rdot gc-rdot--red'
+  if (diff <= 30) return 'gc-rdot gc-rdot--orange'
+  if (diff <= 90) return 'gc-rdot gc-rdot--amber'
+  return ''
+}
+
+function initials(name: string) {
+  return name.split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase()
+}
+
+function initialsColor(name: string) {
+  const colors = ['#01696f', '#3b82f6', '#8b5cf6', '#16a34a', '#ea580c', '#dc2626', '#ca8a04']
+  let hash = 0
+  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  return colors[Math.abs(hash) % colors.length]
+}
+</script>
+
+<template>
+  <div class="gc-page">
+    <!-- Header -->
+    <div class="gc-header">
+      <div class="gc-header-left">
+        <h1 class="gc-title">Colectivos</h1>
+        <span class="gc-count-badge">{{ filtered.length }}</span>
+      </div>
+      <div class="gc-header-right">
+        <NuxtLink to="/support/collectivos" class="gc-header-link">
+          <UIcon name="i-heroicons-cog-6-tooth" class="gc-header-link-icon" />
+          Go to Operations
+        </NuxtLink>
+      </div>
+    </div>
+
+    <!-- Filter bar -->
+    <div class="gc-filters">
+      <UInput
+        v-model="search"
+        icon="i-heroicons-magnifying-glass"
+        placeholder="Search group name, carrier, product..."
+        class="gc-filter-search"
+      />
+      <USelect v-model="lobFilter" :items="lobOptions" value-key="value" label-key="label" class="gc-filter-select" />
+      <USelect v-model="statusFilter" :items="statusOptions" value-key="value" label-key="label" class="gc-filter-select" />
+      <USelect v-model="carrierFilter" :items="carrierOptions" value-key="value" label-key="label" class="gc-filter-select" />
+      <USelect v-model="agentFilter" :items="agentOptions" value-key="value" label-key="label" class="gc-filter-select" />
+      <USelect v-model="sortBy" :items="sortOptions" value-key="value" label-key="label" class="gc-filter-select" />
+      <div class="gc-view-toggle">
+        <button type="button" :class="['gc-view-toggle-btn', viewMode === 'card' && 'gc-view-toggle-btn--active']" title="Card view" @click="viewMode = 'card'">
+          <UIcon name="i-heroicons-squares-2x2" style="width: 16px; height: 16px;" />
+        </button>
+        <button type="button" :class="['gc-view-toggle-btn', viewMode === 'list' && 'gc-view-toggle-btn--active']" title="List view" @click="viewMode = 'list'">
+          <UIcon name="i-heroicons-bars-3" style="width: 16px; height: 16px;" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Card View -->
+    <div v-if="viewMode === 'card'" class="gc-card-grid">
+      <NuxtLink
+        v-for="a in filtered"
+        :key="a.id"
+        :to="`/support/collectivos/${a.id}`"
+        class="gc-card-item"
+      >
+        <div class="gc-card-item__top">
+          <span class="gc-avatar" :style="{ background: initialsColor(a.name) + '12', color: initialsColor(a.name) }">{{ initials(a.name) }}</span>
+          <div style="flex: 1; min-width: 0;">
+            <p class="gc-card-item__name">{{ a.name }}</p>
+            <span class="gc-ruc">{{ a.ruc }}</span>
+          </div>
+          <span class="gc-lob-pill" :class="'gc-lob--' + lobColor(a.lob)">{{ a.lob }}</span>
+        </div>
+        <div class="gc-card-item__body">
+          <div class="gc-card-item__field">
+            <span class="gc-card-item__label">Carrier</span>
+            <span class="gc-card-item__value">{{ a.carrier }}</span>
+          </div>
+          <div class="gc-card-item__field">
+            <span class="gc-card-item__label">Members</span>
+            <span class="gc-card-item__value">{{ a.totalMembers.toLocaleString() }} <span class="gc-dependents">({{ a.dependentsCount }})</span></span>
+          </div>
+          <div class="gc-card-item__field">
+            <span class="gc-card-item__label">Annual Premium</span>
+            <span class="gc-card-item__value" style="font-weight: 600;">{{ fmtCurrency(a.annualPremium) }}</span>
+          </div>
+          <div class="gc-card-item__field">
+            <span class="gc-card-item__label">Commission</span>
+            <span class="gc-card-item__value">{{ a.commissionPct }}%</span>
+          </div>
+          <div class="gc-card-item__field">
+            <span class="gc-card-item__label">Status</span>
+            <span class="gc-status-pill" :class="'gc-status--' + statusBadge(a.status).color">{{ statusBadge(a.status).label }}</span>
+          </div>
+          <div class="gc-card-item__field">
+            <span class="gc-card-item__label">Renewal</span>
+            <span :class="renewalClass(a.renewalDate)">{{ fmtDate(a.renewalDate) }}</span>
+          </div>
+          <div class="gc-card-item__field">
+            <span class="gc-card-item__label">Agent</span>
+            <span class="gc-card-item__value">{{ a.agent }}</span>
+          </div>
+        </div>
+        <div v-if="a.hasUrgentIssues" class="gc-card-item__urgent">
+          <UIcon name="i-heroicons-exclamation-triangle" style="width: 12px; height: 12px;" />
+          Urgent issues
+        </div>
+      </NuxtLink>
+      <div v-if="filtered.length === 0" class="gc-empty" style="grid-column: 1 / -1;">No group accounts match your filters.</div>
+    </div>
+
+    <!-- List View -->
+    <div v-else class="gc-table-wrap">
+      <table class="gc-table">
+        <thead>
+          <tr>
+            <th class="gc-th gc-th--left">Group Name</th>
+            <th class="gc-th gc-th--left">LOB</th>
+            <th class="gc-th gc-th--left gc-hide-mobile">Carrier</th>
+            <th class="gc-th gc-th--right">Members</th>
+            <th class="gc-th gc-th--right">Annual Premium</th>
+            <th class="gc-th gc-th--right gc-hide-tablet">Monthly Premium</th>
+            <th class="gc-th gc-th--right gc-hide-tablet">Comm %</th>
+            <th class="gc-th gc-th--left">Status</th>
+            <th class="gc-th gc-th--left gc-hide-mobile">Renewal</th>
+            <th class="gc-th gc-th--left gc-hide-tablet">Agent</th>
+            <th class="gc-th gc-th--center" title="Issues">
+              <UIcon name="i-heroicons-exclamation-triangle" class="gc-th-icon" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="a in filtered" :key="a.id" class="gc-row">
+            <td class="gc-td">
+              <div class="gc-group-cell">
+                <span
+                  class="gc-avatar"
+                  :style="{ background: initialsColor(a.name) + '12', color: initialsColor(a.name) }"
+                >{{ initials(a.name) }}</span>
+                <div>
+                  <NuxtLink :to="`/support/collectivos/${a.id}`" class="gc-group-link">
+                    {{ a.name }}
+                  </NuxtLink>
+                  <span class="gc-ruc">{{ a.ruc }}</span>
+                </div>
+              </div>
+            </td>
+            <td class="gc-td">
+              <span class="gc-lob-pill" :class="'gc-lob--' + lobColor(a.lob)">{{ a.lob }}</span>
+            </td>
+            <td class="gc-td gc-hide-mobile">{{ a.carrier }}</td>
+            <td class="gc-td gc-td--num">
+              {{ a.totalMembers.toLocaleString() }}
+              <span class="gc-dependents">({{ a.dependentsCount }})</span>
+            </td>
+            <td class="gc-td gc-td--num gc-td--premium">{{ fmtCurrency(a.annualPremium) }}</td>
+            <td class="gc-td gc-td--num gc-hide-tablet">{{ fmtCurrency(a.monthlyPremium) }}</td>
+            <td class="gc-td gc-td--num gc-hide-tablet">{{ a.commissionPct }}%</td>
+            <td class="gc-td">
+              <span class="gc-status-pill" :class="'gc-status--' + statusBadge(a.status).color">
+                {{ statusBadge(a.status).label }}
+              </span>
+            </td>
+            <td class="gc-td gc-hide-mobile" :class="renewalClass(a.renewalDate)">
+              <span :class="renewalDotClass(a.renewalDate)" />
+              {{ fmtDate(a.renewalDate) }}
+            </td>
+            <td class="gc-td gc-hide-tablet">{{ a.agent }}</td>
+            <td class="gc-td gc-td--center">
+              <span
+                v-if="a.hasUrgentIssues"
+                class="gc-dot gc-dot--red"
+                :title="`Urgent issues on ${a.name}`"
+              />
+              <span
+                v-else-if="a.pendingTasks > 0"
+                class="gc-dot gc-dot--amber"
+                :title="`${a.pendingTasks} pending task${a.pendingTasks !== 1 ? 's' : ''} on ${a.name}`"
+              />
+              <span v-else class="gc-dot gc-dot--clear" />
+            </td>
+          </tr>
+          <tr v-if="filtered.length === 0">
+            <td colspan="11" class="gc-empty">No group accounts match your filters.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- 6. Bottom Summary Bar -->
+    <div class="gc-bottom-bar">
+      <div class="gc-bottom-inner">
+        <span class="gc-bottom-item">
+          <UIcon name="i-heroicons-table-cells" class="gc-bottom-icon" />
+          {{ filtered.length }} group{{ filtered.length !== 1 ? 's' : '' }} shown
+        </span>
+        <span class="gc-bottom-sep" />
+        <span class="gc-bottom-item">
+          Annual premium: <strong>{{ fmtCurrency(filteredTotalAnnual) }}</strong>
+        </span>
+        <span class="gc-bottom-sep" />
+        <span class="gc-bottom-item">
+          Members + dependents: <strong>{{ (filteredTotalMembers + filteredTotalDependents).toLocaleString() }}</strong>
+        </span>
+      </div>
+    </div>
+
+    <!-- 7. Cross-links -->
+    <div class="gc-crosslinks">
+      <NuxtLink to="/support/collectivos" class="gc-crosslink">
+        Go to Operations
+        <UIcon name="i-heroicons-arrow-right" class="gc-crosslink-icon" />
+      </NuxtLink>
+      <NuxtLink to="/policies" class="gc-crosslink">
+        View All Policies
+        <UIcon name="i-heroicons-arrow-right" class="gc-crosslink-icon" />
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* ── gc- prefix: group cartera scoped styles ── */
+
+.gc-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-bottom: 48px;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+/* ── Header ── */
+
+.gc-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.gc-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.gc-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.gc-count-badge {
+  font-size: 11px;
+  font-weight: 700;
+  color: #01696f;
+  background: rgba(1,105,111,0.08);
+  padding: 2px 9px;
+  border-radius: 10px;
+}
+
+.gc-title {
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+  line-height: 1;
+}
+
+.gc-header-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #01696f;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 150ms ease;
+}
+
+.gc-header-link:hover { text-decoration: underline; }
+
+.gc-header-link-icon {
+  width: 14px;
+  height: 14px;
+}
+
+/* ── View toggle ── */
+
+.gc-view-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  margin-left: auto;
+}
+.gc-view-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 28px;
+  border-radius: 7px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.gc-view-toggle-btn:hover { color: var(--text-primary); }
+.gc-view-toggle-btn--active {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* ── Card grid ── */
+
+.gc-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+@media (max-width: 1023px) { .gc-card-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 639px) { .gc-card-grid { grid-template-columns: 1fr; } }
+
+.gc-card-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  text-decoration: none;
+  transition: all 0.15s ease;
+  cursor: pointer;
+}
+.gc-card-item:hover {
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
+  border-color: rgba(1, 105, 111, 0.15);
+}
+.gc-card-item__top {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.gc-card-item__name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gc-card-item__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+}
+.gc-card-item__field {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.gc-card-item__label {
+  font-size: 12px;
+  color: #8a8a86;
+}
+.gc-card-item__value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.gc-card-item__urgent {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #dc2626;
+  padding: 4px 8px;
+  background: rgba(239, 68, 68, 0.06);
+  border-radius: 6px;
+  margin-top: 2px;
+}
+
+/* ── Filters ── */
+
+.gc-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+.gc-filter-search {
+  flex: 1 1 220px;
+  min-width: 180px;
+}
+
+.gc-filter-select {
+  width: 100%;
+  max-width: 180px;
+}
+
+@media (max-width: 639px) {
+  .gc-filter-select { max-width: 100%; }
+}
+
+/* ── Table ── */
+
+.gc-table-wrap {
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  overflow-x: auto;
+}
+
+.gc-table {
+  width: 100%;
+  font-size: 13px;
+  border-collapse: collapse;
+}
+
+.gc-th {
+  padding: 10px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  background: rgba(0, 0, 0, 0.015);
+  white-space: nowrap;
+}
+
+.gc-th--left { text-align: left; }
+.gc-th--right { text-align: right; }
+.gc-th--center { text-align: center; }
+
+.gc-th-icon {
+  width: 13px;
+  height: 13px;
+  color: #8a8a86;
+}
+
+.gc-row {
+  transition: all 150ms ease;
+}
+
+.gc-row:hover {
+  background: rgba(1, 105, 111, 0.03);
+}
+
+.gc-row:not(:last-child) .gc-td {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.gc-td {
+  padding: 10px 14px;
+  vertical-align: middle;
+  color: var(--text-primary);
+}
+
+.gc-td--num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.gc-td--premium {
+  font-weight: 600;
+}
+
+.gc-td--center {
+  text-align: center;
+}
+
+/* ── Group name cell with avatar ── */
+
+.gc-group-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.gc-avatar {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+.gc-group-link {
+  font-weight: 600;
+  color: #01696f;
+  text-decoration: none;
+  display: block;
+  line-height: 1.3;
+  transition: all 150ms ease;
+}
+
+.gc-group-link:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.gc-ruc {
+  display: block;
+  font-size: 11px;
+  color: #8a8a86;
+  margin-top: 1px;
+}
+
+.gc-dependents {
+  color: #8a8a86;
+  font-size: 11px;
+  margin-left: 2px;
+}
+
+/* ── Custom pill badges (LOB) ── */
+
+.gc-lob-pill {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 9999px;
+  white-space: nowrap;
+  line-height: 1.6;
+}
+
+.gc-lob--success {
+  color: #16a34a;
+  background: rgba(22, 163, 74, 0.1);
+}
+
+.gc-lob--info {
+  color: #3b82f6;
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.gc-lob--warning {
+  color: #ca8a04;
+  background: rgba(202, 138, 4, 0.1);
+}
+
+.gc-lob--neutral {
+  color: #8a8a86;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+/* ── Custom pill badges (Status) ── */
+
+.gc-status-pill {
+  display: inline-block;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 9999px;
+  white-space: nowrap;
+  line-height: 1.6;
+}
+
+.gc-status--success {
+  color: #16a34a;
+  background: rgba(22, 163, 74, 0.1);
+}
+
+.gc-status--info {
+  color: #3b82f6;
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.gc-status--warning {
+  color: #ca8a04;
+  background: rgba(202, 138, 4, 0.1);
+}
+
+.gc-status--error {
+  color: #dc2626;
+  background: rgba(220, 38, 38, 0.1);
+}
+
+.gc-status--neutral {
+  color: #8a8a86;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+/* ── Renewal color-coding ── */
+
+.gc-renewal--overdue { color: #dc2626; font-weight: 600; }
+.gc-renewal--urgent { color: #ea580c; font-weight: 600; }
+.gc-renewal--soon { color: #ca8a04; }
+
+/* ── Renewal date dots ── */
+
+.gc-rdot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+
+.gc-rdot--red { background: #dc2626; }
+.gc-rdot--orange { background: #ea580c; }
+.gc-rdot--amber { background: #f59e0b; }
+
+/* ── Issues dot ── */
+
+.gc-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  cursor: default;
+}
+
+.gc-dot--red { background: #dc2626; }
+.gc-dot--amber { background: #f59e0b; }
+.gc-dot--clear { background: transparent; }
+
+/* ── Empty state ── */
+
+.gc-empty {
+  padding: 40px 14px;
+  text-align: center;
+  color: #8a8a86;
+  font-size: 14px;
+}
+
+/* ── Responsive hide classes ── */
+
+@media (max-width: 767px) {
+  .gc-hide-mobile { display: none; }
+}
+
+@media (max-width: 1023px) {
+  .gc-hide-tablet { display: none; }
+}
+
+/* ── Bottom Summary Bar ── */
+
+.gc-bottom-bar {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  padding: 14px 20px;
+}
+
+.gc-bottom-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.gc-bottom-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.gc-bottom-item strong {
+  color: var(--text-primary);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.gc-bottom-icon {
+  width: 14px;
+  height: 14px;
+  color: #8a8a86;
+}
+
+.gc-bottom-sep {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #d4d4d0;
+  flex-shrink: 0;
+}
+
+/* ── Cross-links ── */
+
+.gc-crosslinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.gc-crosslink {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #01696f;
+  text-decoration: none;
+  transition: all 150ms ease;
+}
+
+.gc-crosslink:hover { text-decoration: underline; }
+
+.gc-crosslink-icon {
+  width: 14px;
+  height: 14px;
+}
+</style>
diff --git a/app/pages/policies/index.vue b/app/pages/policies/index.vue
index d5eccb2..701ae61 100644
--- a/app/pages/policies/index.vue
+++ b/app/pages/policies/index.vue
@@ -1,27 +1,65 @@
 <script setup lang="ts">
 import { refDebounced } from '@vueuse/core'
 import type { SelectItem } from '@nuxt/ui'
+import { MOCK_CUSTOMERS, fmtMoney, type MockPolicy, type MockCustomer } from '~/data/mock-customers'
+
+usePageTitle('Policies')
 
 const page          = ref(1)
 const search        = ref('')
 const statusFilter  = ref<string | null>(null)
+const lineFilter    = ref<string[]>([])
+const carrierFilter = ref<string[]>([])
+const agentFilter   = ref<string[]>([])
+const channelFilter = ref<string[]>([])
+const viewMode      = ref<'card' | 'list'>('card')
+const sortBy        = ref<string>('renewal_asc')
 const debouncedSearch = refDebounced(search, 300)
 
+// Multi-select dropdown open states
+const openDropdown = ref<string | null>(null)
+function toggleDropdown(name: string) {
+  openDropdown.value = openDropdown.value === name ? null : name
+}
+function toggleLine(val: string) {
+  lineFilter.value = lineFilter.value.includes(val) ? lineFilter.value.filter(v => v !== val) : [...lineFilter.value, val]
+}
+function toggleCarrier(val: string) {
+  carrierFilter.value = carrierFilter.value.includes(val) ? carrierFilter.value.filter(v => v !== val) : [...carrierFilter.value, val]
+}
+function toggleAgent(val: string) {
+  agentFilter.value = agentFilter.value.includes(val) ? agentFilter.value.filter(v => v !== val) : [...agentFilter.value, val]
+}
+function toggleChannel(val: string) {
+  channelFilter.value = channelFilter.value.includes(val) ? channelFilter.value.filter(v => v !== val) : [...channelFilter.value, val]
+}
+// Close dropdown on outside click
+if (import.meta.client) {
+  document.addEventListener('click', (e) => {
+    const el = e.target as HTMLElement
+    if (!el.closest('.pol-multi-dropdown')) openDropdown.value = null
+  })
+}
+
 const statusItems = ref<SelectItem[]>([
   { label: 'All Statuses',      value: null              },
   { label: 'Quote Requested',   value: 'quote_requested' },
   { label: 'Quotes Received',   value: 'quotes_received' },
   { label: 'Solicitation Sent', value: 'solicitation_sent' },
-  { label: 'Active',            value: 'active'          }
+  { label: 'Issued',            value: 'issued'          }
 ])
 
 watch(debouncedSearch, () => { page.value = 1 })
 watch(statusFilter,    () => { page.value = 1 })
+watch(lineFilter,      () => { page.value = 1 }, { deep: true })
+watch(carrierFilter,   () => { page.value = 1 }, { deep: true })
+watch(agentFilter,     () => { page.value = 1 }, { deep: true })
+watch(channelFilter,   () => { page.value = 1 }, { deep: true })
 
 const { data, error, pending, refresh } = usePolicy('/policies', {
   query: computed(() => ({
-    page_size: 20,
-    page: page.value,
+    'page[number]': page.value,
+    'page[size]': 20,
     ...(statusFilter.value && {
       'filters[0][field]': 'status',
       'filters[0][op]':    '==',
@@ -35,15 +73,95 @@ const { data, error, pending, refresh } = usePolicy('/policies', {
   }))
 })
 
-const policies = computed(() => data.value?.data ?? [])
-const meta     = computed(() => data.value?.meta)
+const apiPolicies = computed(() => data.value?.data ?? [])
+const meta        = computed(() => data.value?.meta)
 
+/* ── Mock fallback: flatten all policies across mock customers ── */
+type FlatMockPolicy = MockPolicy & { customerName: string; customerId: string; agent: string }
+
+const mockPolicies = computed<FlatMockPolicy[]>(() => {
+  const rows: FlatMockPolicy[] = []
+  for (const cust of MOCK_CUSTOMERS) {
+    for (const pol of cust.policies) {
+      rows.push({ ...pol, customerName: cust.name || 'Unnamed customer', customerId: cust.id, agent: cust.agent })
+    }
+  }
+  return rows
+})
+
+const filteredMockPolicies = computed(() => {
+  let rows = mockPolicies.value
+  if (lineFilter.value.length > 0) {
+    rows = rows.filter((p) => lineFilter.value.includes(p.line))
+  }
+  if (carrierFilter.value.length > 0) {
+    rows = rows.filter((p) => carrierFilter.value.includes(p.carrier))
+  }
+  if (debouncedSearch.value) {
+    const q = debouncedSearch.value.toLowerCase()
+    rows = rows.filter((p) =>
+      p.product.toLowerCase().includes(q) ||
+      p.carrier.toLowerCase().includes(q) ||
+      p.customerName.toLowerCase().includes(q) ||
+      p.id.toLowerCase().includes(q)
+    )
+  }
+  if (statusFilter.value) {
+    const map: Record<string, string> = { active: 'Active', quote_requested: 'Pending', solicitation_sent: 'Pending', quotes_received: 'Pending' }
+    const target = map[statusFilter.value] ?? statusFilter.value
+    rows = rows.filter((p) => p.status === target)
+  }
+  if (agentFilter.value.length > 0) {
+    rows = rows.filter((p) => agentFilter.value.includes(p.agent))
+  }
+  if (channelFilter.value.length > 0) {
+    rows = rows.filter((p) => p.referralChannel != null && channelFilter.value.includes(p.referralChannel))
+  }
+  return rows
+})
+
+const usingApi  = computed(() => apiPolicies.value.length > 0)
+const policies  = computed(() => usingApi.value ? apiPolicies.value : filteredMockPolicies.value)
+const usingMock = computed(() => !usingApi.value && mockPolicies.value.length > 0)
+
+/* ── Filter dropdown items ── */
+const lineOptions = ['Auto', 'Home', 'Life', 'General Risk', 'Fianza']
+const carrierOptions = computed(() => [...new Set(mockPolicies.value.map((p) => p.carrier))].sort())
+const agentOptions = computed(() => [...new Set(mockPolicies.value.map((p) => p.agent))].sort())
+const channelOptions = computed(() => [...new Set(mockPolicies.value.map((p) => p.referralChannel).filter(Boolean) as string[])].sort())
+
+function multiLabel(selected: string[], allLabel: string) {
+  if (selected.length === 0) return allLabel
+  if (selected.length === 1) return selected[0]
+  return `${selected.length} selected`
+}
+
+/* ── Renewal urgency ── */
+function renewalUrgency(dateStr: string) {
+  const now = new Date()
+  const d = new Date(dateStr)
+  const days = Math.round((d.getTime() - now.getTime()) / 86400000)
+  if (days < -90) return { label: `${Math.abs(days)}d past`, class: 'pol-renew-expired', days }
+  if (days < -30) return { label: `${Math.abs(days)}d past`, class: 'pol-renew-past', days }
+  if (days < 0) return { label: `${Math.abs(days)}d past`, class: 'pol-renew-overdue', days }
+  if (days <= 14) return { label: `${days}d`, class: 'pol-renew-urgent', days }
+  if (days <= 30) return { label: `${days}d`, class: 'pol-renew-soon', days }
+  if (days <= 90) return { label: `${days}d`, class: 'pol-renew-ok', days }
+  return { label: formatDate(dateStr), class: 'pol-renew-far', days }
+}
+
+/* ── Status helpers ── */
 const statusColor = (status: string) => {
   switch (status) {
     case 'quote_requested':   return 'yellow'
     case 'quotes_received':   return 'blue'
     case 'solicitation_sent': return 'purple'
-    case 'active':            return 'green'
+    case 'issued':
+    case 'active':
+    case 'Active':            return 'green'
+    case 'Pending':           return 'amber'
+    case 'Lapsed':            return 'rose'
+    case 'Cancelled':         return 'gray'
     default:                  return 'gray'
   }
 }
@@ -53,150 +171,1170 @@ const statusLabel = (status: string) => {
     case 'quote_requested':   return 'Quote Requested'
     case 'quotes_received':   return 'Quotes Received'
     case 'solicitation_sent': return 'Solicitation Sent'
+    case 'issued':            return 'Issued'
     case 'active':            return 'Active'
     default:                  return status
   }
 }
 
-const statusIcon = (status: string) => {
-  switch (status) {
-    case 'quote_requested':   return 'i-heroicons-clock'
-    case 'quotes_received':   return 'i-heroicons-inbox'
-    case 'solicitation_sent': return 'i-heroicons-paper-airplane'
-    case 'active':            return 'i-heroicons-check-badge'
-    default:                  return 'i-heroicons-document'
+function policyApplicantName(p: { applicant_info?: Record<string, unknown> }) {
+  const info = p.applicant_info
+  if (!info || typeof info !== 'object') return '—'
+  const company = info.company_name
+  if (typeof company === 'string' && company) return company
+  const name = info.name
+  if (typeof name === 'string' && name) return name
+  return '—'
+}
+
+function policyApplicantDoc(p: { applicant_info?: Record<string, unknown> }) {
+  const info = p.applicant_info
+  if (!info || typeof info !== 'object') return '—'
+  const doc = info.document_id
+  if (typeof doc === 'string' && doc) return doc
+  const ruc = info.ruc
+  if (typeof ruc === 'string' && ruc) return ruc
+  return '—'
+}
+
+function policyDetailsSummary(p: {
+  policy_type: string
+  policy_details?: Record<string, unknown> | null
+}) {
+  const d = p.policy_details
+  if (!d || typeof d !== 'object') return '—'
+  if (p.policy_type === 'car') {
+    const y = d.year
+    const make = d.make
+    const model = d.model
+    const parts = [y, make, model].filter((x) => x !== undefined && x !== null && String(x) !== '')
+    return parts.length ? parts.map(String).join(' ') : '—'
+  }
+  if (p.policy_type === 'life') {
+    const b = d.beneficiary
+    return typeof b === 'string' && b ? `Life · ${b}` : 'Life'
+  }
+  if (p.policy_type === 'fire') {
+    const a = d.property_address
+    return typeof a === 'string' && a ? a : '—'
+  }
+  return '—'
+}
+
+const lineIcon = (line: string) => {
+  switch (line) {
+    case 'Auto':         return 'i-heroicons-truck'
+    case 'Life':         return 'i-heroicons-shield-check'
+    case 'Home':         return 'i-heroicons-home-modern'
+    case 'General Risk': return 'i-heroicons-shield-exclamation'
+    case 'Fianza':       return 'i-heroicons-document-check'
+    default:             return 'i-heroicons-document'
   }
 }
 
-const clientTypeLabel = (ct: string) =>
-  ct === 'juridico' ? 'Jurídico' : 'Natural'
+const formatDate = (d: string) => {
+  const date = new Date(d)
+  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+}
 
-const clientTypeColor = (ct: string) =>
-  ct === 'juridico' ? 'purple' : 'blue'
+/* ── Tab filter for table ── */
+type TableFilter = 'all' | 'active' | 'pending' | 'lapsed' | 'cancelled'
+const tableTab = ref<TableFilter>('all')
+
+const tabFilteredPolicies = computed(() => {
+  let base = filteredMockPolicies.value
+
+  /* tab filter */
+  if (tableTab.value === 'active') base = base.filter(p => p.status === 'Active')
+  else if (tableTab.value === 'pending') base = base.filter(p => p.status === 'Pending')
+  else if (tableTab.value === 'lapsed') base = base.filter(p => p.status === 'Lapsed')
+  else if (tableTab.value === 'cancelled') base = base.filter(p => p.status === 'Cancelled')
+
+  /* sort */
+  const sorted = [...base]
+  switch (sortBy.value) {
+    case 'renewal_asc':
+      sorted.sort((a, b) => new Date(a.renewal).getTime() - new Date(b.renewal).getTime())
+      break
+    case 'premium_desc':
+      sorted.sort((a, b) => b.premium - a.premium)
+      break
+    case 'premium_asc':
+      sorted.sort((a, b) => a.premium - b.premium)
+      break
+    case 'customer_name':
+      sorted.sort((a, b) => a.customerName.localeCompare(b.customerName))
+      break
+  }
+  return sorted
+})
+
+const tabCounts = computed(() => ({
+  all: filteredMockPolicies.value.length,
+  active: filteredMockPolicies.value.filter(p => p.status === 'Active').length,
+  pending: filteredMockPolicies.value.filter(p => p.status === 'Pending').length,
+  lapsed: filteredMockPolicies.value.filter(p => p.status === 'Lapsed').length,
+  cancelled: filteredMockPolicies.value.filter(p => p.status === 'Cancelled').length,
+}))
+
+/* ── Bottom bar totals ── */
+const visiblePremiumTotal = computed(() =>
+  tabFilteredPolicies.value.reduce((s, p) => s + p.premium, 0)
+)
 </script>
 
 <template>
-  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
-    <!-- Header -->
-    <div class="flex justify-between items-center">
-      <div>
-        <h1 class="text-3xl text-slate-900 font-bold">Policies</h1>
-        <p class="text-gray-500 text-sm">Car Insurance Policy Management</p>
+  <div class="pol-root mx-auto max-w-7xl pb-12">
+    <!-- Header row -->
+    <div class="pol-header">
+      <div class="pol-header-left">
+        <h1 class="pol-title">Policies</h1>
+        <span class="pol-count-badge">{{ usingMock ? mockPolicies.length : (meta?.total_count ?? 0) }}</span>
       </div>
-      <div class="flex items-center gap-3">
-        <UBadge color="gray" variant="soft" size="lg">
-          {{ meta?.total_count ?? 0 }} policies
-        </UBadge>
+      <div class="pol-header-right">
+        <NuxtLink to="/policies/book">
+          <button class="pol-btn-secondary">
+            <UIcon name="i-heroicons-book-open" class="w-3.5 h-3.5" />
+            Book of Business
+          </button>
+        </NuxtLink>
         <NuxtLink to="/policies/new">
-          <UButton icon="i-heroicons-plus" color="primary">New Policy</UButton>
+          <button class="pol-btn-primary">
+            <UIcon name="i-heroicons-plus" class="w-3.5 h-3.5" />
+            New Policy
+          </button>
         </NuxtLink>
       </div>
     </div>
 
-    <!-- Filters -->
-    <div class="flex gap-4 items-center flex-wrap">
-      <UInput
-        v-model="search"
-        icon="i-heroicons-magnifying-glass"
-        placeholder="Search by name, plate, policy #..."
-        class="w-80"
-      />
-      <USelect v-model="statusFilter" :items="statusItems" class="w-52" />
-      <UButton
-        icon="i-heroicons-arrow-path"
-        color="gray" variant="soft"
-        :loading="pending"
-        @click="refresh()"
-      >
+    <!-- Filter bar -->
+    <div class="pol-filter-bar">
+      <div class="pol-search-wrap">
+        <UIcon name="i-heroicons-magnifying-glass" class="pol-search-icon" />
+        <input
+          v-model="search"
+          type="text"
+          placeholder="Search by policy #, customer, carrier..."
+          class="pol-search-input"
+        />
+      </div>
+      <!-- Lines multi-select -->
+      <div class="pol-multi-dropdown">
+        <button type="button" class="pol-select" @click.stop="toggleDropdown('line')">
+          {{ multiLabel(lineFilter, 'All Lines') }}
+          <UIcon name="i-heroicons-chevron-down" class="pol-select-chevron" />
+        </button>
+        <div v-if="openDropdown === 'line'" class="pol-dropdown-panel">
+          <label v-for="opt in lineOptions" :key="opt" class="pol-dropdown-option" @click.stop>
+            <input type="checkbox" :checked="lineFilter.includes(opt)" @change="toggleLine(opt)" />
+            <span>{{ opt }}</span>
+          </label>
+          <button v-if="lineFilter.length > 0" type="button" class="pol-dropdown-clear" @click.stop="lineFilter = []">Clear</button>
+        </div>
+      </div>
+
+      <!-- Carriers multi-select -->
+      <div class="pol-multi-dropdown">
+        <button type="button" class="pol-select" @click.stop="toggleDropdown('carrier')">
+          {{ multiLabel(carrierFilter, 'All Carriers') }}
+          <UIcon name="i-heroicons-chevron-down" class="pol-select-chevron" />
+        </button>
+        <div v-if="openDropdown === 'carrier'" class="pol-dropdown-panel">
+          <label v-for="opt in carrierOptions" :key="opt" class="pol-dropdown-option" @click.stop>
+            <input type="checkbox" :checked="carrierFilter.includes(opt)" @change="toggleCarrier(opt)" />
+            <span>{{ opt }}</span>
+          </label>
+          <button v-if="carrierFilter.length > 0" type="button" class="pol-dropdown-clear" @click.stop="carrierFilter = []">Clear</button>
+        </div>
+      </div>
+
+      <!-- Agents multi-select -->
+      <div class="pol-multi-dropdown">
+        <button type="button" class="pol-select" @click.stop="toggleDropdown('agent')">
+          {{ multiLabel(agentFilter, 'All Agents') }}
+          <UIcon name="i-heroicons-chevron-down" class="pol-select-chevron" />
+        </button>
+        <div v-if="openDropdown === 'agent'" class="pol-dropdown-panel">
+          <label v-for="opt in agentOptions" :key="opt" class="pol-dropdown-option" @click.stop>
+            <input type="checkbox" :checked="agentFilter.includes(opt)" @change="toggleAgent(opt)" />
+            <span>{{ opt }}</span>
+          </label>
+          <button v-if="agentFilter.length > 0" type="button" class="pol-dropdown-clear" @click.stop="agentFilter = []">Clear</button>
+        </div>
+      </div>
+
+      <!-- Channels multi-select -->
+      <div class="pol-multi-dropdown">
+        <button type="button" class="pol-select" @click.stop="toggleDropdown('channel')">
+          {{ multiLabel(channelFilter, 'All Channels') }}
+          <UIcon name="i-heroicons-chevron-down" class="pol-select-chevron" />
+        </button>
+        <div v-if="openDropdown === 'channel'" class="pol-dropdown-panel">
+          <label v-for="opt in channelOptions" :key="opt" class="pol-dropdown-option" @click.stop>
+            <input type="checkbox" :checked="channelFilter.includes(opt)" @change="toggleChannel(opt)" />
+            <span>{{ opt }}</span>
+          </label>
+          <button v-if="channelFilter.length > 0" type="button" class="pol-dropdown-clear" @click.stop="channelFilter = []">Clear</button>
+        </div>
+      </div>
+      <select v-model="sortBy" class="pol-select">
+        <option value="renewal_asc">Sort: Renewal date</option>
+        <option value="premium_desc">Sort: Premium (high-low)</option>
+        <option value="premium_asc">Sort: Premium (low-high)</option>
+        <option value="customer_name">Sort: Customer name</option>
+      </select>
+      <button class="pol-btn-ghost" :disabled="pending" @click="refresh()">
+        <UIcon name="i-heroicons-arrow-path" class="w-3.5 h-3.5" :class="{ 'animate-spin': pending }" />
         Refresh
-      </UButton>
+      </button>
+      <div class="pol-view-toggle">
+        <button type="button" :class="['pol-view-toggle-btn', viewMode === 'card' && 'pol-view-toggle-btn--active']" title="Card view" @click="viewMode = 'card'">
+          <UIcon name="i-heroicons-squares-2x2" style="width: 16px; height: 16px;" />
+        </button>
+        <button type="button" :class="['pol-view-toggle-btn', viewMode === 'list' && 'pol-view-toggle-btn--active']" title="List view" @click="viewMode = 'list'">
+          <UIcon name="i-heroicons-bars-3" style="width: 16px; height: 16px;" />
+        </button>
+      </div>
     </div>
 
-    <UAlert v-if="error" color="red" variant="soft" title="Failed to load policies" :description="error.message" />
-
-    <div v-else-if="pending" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-      <UCard v-for="n in 6" :key="n">
-        <div class="h-48 animate-pulse bg-gray-200 rounded" />
-      </UCard>
+    <!-- Error state -->
+    <div v-if="error && !usingMock" class="pol-card" style="border-color: rgba(193,56,56,0.15); background: rgba(193,56,56,0.03);">
+      <div style="padding: 16px 20px; display: flex; align-items: center; gap: 10px;">
+        <UIcon name="i-heroicons-exclamation-circle" class="w-5 h-5 text-rose-500 flex-shrink-0" />
+        <div>
+          <p class="text-sm font-semibold text-rose-700">Failed to load policies</p>
+          <p class="text-xs text-rose-500 mt-0.5">{{ error.message }}</p>
+        </div>
+      </div>
     </div>
 
-    <template v-else>
-      <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+    <!-- Loading state -->
+    <div v-if="pending && !usingMock" class="pol-card">
+      <div style="padding: 20px;">
+        <div v-for="n in 8" :key="n" class="pol-skeleton-row">
+          <div class="pol-skeleton" style="width: 80px; height: 12px;" />
+          <div class="pol-skeleton" style="width: 140px; height: 12px;" />
+          <div class="pol-skeleton" style="width: 50px; height: 18px; border-radius: 10px;" />
+          <div class="pol-skeleton" style="width: 100px; height: 12px;" />
+          <div class="pol-skeleton" style="width: 100px; height: 12px;" />
+          <div class="pol-skeleton" style="width: 70px; height: 12px;" />
+          <div class="pol-skeleton" style="width: 50px; height: 18px; border-radius: 10px;" />
+          <div class="pol-skeleton" style="width: 80px; height: 12px;" />
+          <div class="pol-skeleton" style="width: 60px; height: 12px;" />
+        </div>
+      </div>
+    </div>
+
+
+    <!-- Policy views (mock data) -->
+    <template v-if="!pending || usingMock">
+      <!-- ═══ Card View ═══ -->
+      <div v-if="viewMode === 'card' && usingMock" class="pol-card-grid">
         <NuxtLink
-          v-for="policy in policies"
-          :key="policy.application_id"
-          :to="`/policies/${policy.application_id}`"
+          v-for="pol in tabFilteredPolicies"
+          :key="pol.id"
+          :to="`/policies/${pol.id}`"
+          class="pol-card-item"
         >
-          <UCard class="hover:shadow-md transition-shadow cursor-pointer h-full">
-            <div class="space-y-4">
-              <!-- Status + type badges -->
-              <div class="flex justify-between items-start">
-                <UBadge :color="statusColor(policy.status)" variant="soft" class="flex items-center gap-1">
-                  <UIcon :name="statusIcon(policy.status)" class="w-3 h-3" />
-                  {{ statusLabel(policy.status) }}
-                </UBadge>
-                <div class="flex gap-1">
-                  <UBadge :color="clientTypeColor(policy.client_type)" variant="outline" size="xs">
-                    {{ clientTypeLabel(policy.client_type) }}
-                  </UBadge>
-                  <UBadge color="gray" variant="outline" size="xs">CAR</UBadge>
-                </div>
-              </div>
-
-              <!-- Applicant -->
-              <div>
-                <p class="font-semibold text-slate-900 text-lg leading-tight">
-                  {{ policy.applicant_display_name }}
-                </p>
-                <p class="text-gray-400 text-sm">{{ policy.applicant_document }}</p>
-              </div>
-
-              <!-- Vehicle -->
-              <div class="bg-gray-50 rounded-lg p-3 space-y-1.5 text-sm">
-                <div class="flex justify-between">
-                  <span class="text-gray-500">Plate</span>
-                  <span class="font-medium font-mono">{{ policy.policy_details.plate }}</span>
-                </div>
-                <div class="flex justify-between">
-                  <span class="text-gray-500">Vehicle</span>
-                  <span class="font-medium">{{ policy.policy_details.year }} {{ policy.policy_details.make }} {{ policy.policy_details.model }}</span>
-                </div>
-                <div class="flex justify-between">
-                  <span class="text-gray-500">Value</span>
-                  <span class="font-medium">${{ Number(policy.policy_details.car_value).toLocaleString() }}</span>
-                </div>
-                <div v-if="policy.policy_number" class="flex justify-between">
-                  <span class="text-gray-500">Policy #</span>
-                  <span class="font-medium font-mono text-green-600">{{ policy.policy_details.policy_number }}</span>
-                </div>
-              </div>
-
-              <!-- Footer -->
-              <div class="flex justify-between items-center text-xs text-gray-400 pt-1 border-t">
-                <div class="flex items-center gap-1">
-                  <UIcon name="i-heroicons-chat-bubble-left-right" class="w-3.5 h-3.5" />
-                  <span>
-                    {{ Object.keys(policy.quotes ?? {}).length }} /
-                    {{ (policy.selected_providers ?? []).length }} quotes
-                  </span>
-                </div>
-                <span>{{ new Date(policy.submitted_at).toLocaleDateString('es-PA') }}</span>
-              </div>
+          <div class="pol-card-item__top">
+            <span class="pol-policy-number pol-policy-link">{{ pol.id }}</span>
+            <span class="pol-status-badge" :class="`pol-status-${pol.status.toLowerCase()}`">{{ pol.status }}</span>
+          </div>
+          <p class="pol-card-item__customer">{{ pol.customerName }}</p>
+          <div class="pol-card-item__body">
+            <div class="pol-card-item__field">
+              <span class="pol-card-item__label">Line</span>
+              <span class="pol-line-chip" :class="`pol-line-${pol.line.toLowerCase()}`">
+                <UIcon :name="pol.icon || lineIcon(pol.line)" class="pol-line-chip-icon" />
+                {{ pol.line }}
+              </span>
             </div>
-          </UCard>
+            <div class="pol-card-item__field">
+              <span class="pol-card-item__label">Carrier</span>
+              <span class="pol-card-item__value">{{ pol.carrier }}</span>
+            </div>
+            <div class="pol-card-item__field">
+              <span class="pol-card-item__label">Product</span>
+              <span class="pol-card-item__value">{{ pol.product }}</span>
+            </div>
+            <div class="pol-card-item__field">
+              <span class="pol-card-item__label">Premium</span>
+              <span class="pol-card-item__value" style="font-weight: 600;">{{ fmtMoney(pol.premium) }}<span class="pol-premium-period">/yr</span></span>
+            </div>
+            <div class="pol-card-item__field">
+              <span class="pol-card-item__label">Renewal</span>
+              <span :class="renewalUrgency(pol.renewal).class">{{ renewalUrgency(pol.renewal).label }}</span>
+            </div>
+            <div class="pol-card-item__field">
+              <span class="pol-card-item__label">Agent</span>
+              <span class="pol-card-item__value">{{ pol.agent }}</span>
+            </div>
+          </div>
         </NuxtLink>
+        <div v-if="tabFilteredPolicies.length === 0" class="pol-empty" style="grid-column: 1 / -1;">
+          <UIcon name="i-heroicons-document-magnifying-glass" class="w-10 h-10" style="color: #8a8a86; opacity: 0.5;" />
+          <p class="pol-empty-title">No policies match your filters</p>
+          <p class="pol-empty-sub">Try adjusting your search or filter criteria</p>
+        </div>
+      </div>
 
-        <div v-if="policies.length === 0" class="col-span-3 text-center py-16 text-gray-400">
-          <UIcon name="i-heroicons-document-text" class="w-12 h-12 mx-auto mb-4" />
-          <p class="text-lg font-medium">No policies found</p>
-          <p class="text-sm">Create a new policy or adjust your filters</p>
+      <!-- ═══ List View ═══ -->
+      <div v-if="viewMode === 'list' && usingMock" class="pol-card pol-card-flush">
+        <!-- Status tabs -->
+        <div class="pol-card-head">
+          <div class="pol-table-tabs">
+            <button
+              v-for="t in ([
+                { id: 'all', label: 'All' },
+                { id: 'active', label: 'Active' },
+                { id: 'pending', label: 'Pending' },
+                { id: 'lapsed', label: 'Lapsed' },
+                { id: 'cancelled', label: 'Cancelled' },
+              ] as { id: TableFilter; label: string }[])"
+              :key="t.id"
+              type="button"
+              class="pol-table-tab"
+              :class="tableTab === t.id ? 'pol-tab-on' : 'pol-tab-off'"
+              @click="tableTab = t.id"
+            >
+              {{ t.label }}
+              <span class="pol-tab-count" :class="tableTab === t.id ? 'pol-tab-count-on' : ''">{{ tabCounts[t.id] }}</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Table -->
+        <div class="pol-table-wrap">
+          <table class="pol-table">
+            <thead>
+              <tr>
+                <th class="pol-th">Policy #</th>
+                <th class="pol-th">Customer</th>
+                <th class="pol-th">Line</th>
+                <th class="pol-th">Carrier</th>
+                <th class="pol-th">Product</th>
+                <th class="pol-th pol-th-right">Premium</th>
+                <th class="pol-th">Status</th>
+                <th class="pol-th">Renewal</th>
+                <th class="pol-th">Agent</th>
+                <th class="pol-th pol-th-actions">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="pol in tabFilteredPolicies"
+                :key="pol.id"
+                class="pol-row"
+              >
+                <td class="pol-td">
+                  <NuxtLink :to="`/policies/${pol.id}`" class="pol-policy-number pol-policy-link">{{ pol.id }}</NuxtLink>
+                </td>
+                <td class="pol-td">
+                  <NuxtLink :to="`/customers/${pol.customerId}`" class="pol-customer-link">
+                    {{ pol.customerName }}
+                  </NuxtLink>
+                </td>
+                <td class="pol-td">
+                  <span class="pol-line-chip" :class="`pol-line-${pol.line.toLowerCase()}`">
+                    <UIcon :name="pol.icon || lineIcon(pol.line)" class="pol-line-chip-icon" />
+                    {{ pol.line }}
+                  </span>
+                </td>
+                <td class="pol-td">
+                  <span class="pol-carrier">{{ pol.carrier }}</span>
+                </td>
+                <td class="pol-td">
+                  <span class="pol-product">{{ pol.product }}</span>
+                  <span v-if="pol.details" class="pol-product-detail">{{ pol.details }}</span>
+                </td>
+                <td class="pol-td pol-td-right">
+                  <span class="pol-premium">{{ fmtMoney(pol.premium) }}</span>
+                  <span class="pol-premium-period">/yr</span>
+                </td>
+                <td class="pol-td">
+                  <span
+                    class="pol-status-badge"
+                    :class="`pol-status-${pol.status.toLowerCase()}`"
+                  >{{ pol.status }}</span>
+                </td>
+                <td class="pol-td">
+                  <span :class="renewalUrgency(pol.renewal).class">
+                    {{ renewalUrgency(pol.renewal).label }}
+                  </span>
+                </td>
+                <td class="pol-td">
+                  <span class="pol-agent">{{ pol.agent }}</span>
+                </td>
+                <td class="pol-td pol-td-actions">
+                  <NuxtLink :to="`/policies/${pol.id}`" class="pol-action-btn" title="View policy">
+                    <UIcon name="i-heroicons-eye" class="w-3.5 h-3.5" />
+                  </NuxtLink>
+                  <NuxtLink :to="`/customers/${pol.customerId}`" class="pol-action-btn" title="View customer">
+                    <UIcon name="i-heroicons-user" class="w-3.5 h-3.5" />
+                  </NuxtLink>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Empty filtered state -->
+        <div v-if="tabFilteredPolicies.length === 0" class="pol-empty">
+          <UIcon name="i-heroicons-document-magnifying-glass" class="w-10 h-10" style="color: #8a8a86; opacity: 0.5;" />
+          <p class="pol-empty-title">No policies match your filters</p>
+          <p class="pol-empty-sub">Try adjusting your search or filter criteria</p>
+        </div>
+
+        <!-- Bottom bar -->
+        <div v-if="tabFilteredPolicies.length > 0" class="pol-bottom-bar">
+          <span class="pol-bottom-count">{{ tabFilteredPolicies.length }} {{ tabFilteredPolicies.length === 1 ? 'policy' : 'policies' }}</span>
+          <span class="pol-bottom-sep"></span>
+          <span class="pol-bottom-premium">Total visible premium: <strong>{{ fmtMoney(visiblePremiumTotal) }}</strong>/yr</span>
+        </div>
+      </div>
+
+      <!-- API policy table -->
+      <div v-else-if="apiPolicies.length > 0" class="pol-card pol-card-flush">
+        <div class="pol-card-head">
+          <span>Policies</span>
+          <span class="pol-card-head-count">{{ meta?.total_count ?? apiPolicies.length }}</span>
+        </div>
+        <div class="pol-table-wrap">
+          <table class="pol-table">
+            <thead>
+              <tr>
+                <th class="pol-th">Applicant</th>
+                <th class="pol-th">Document</th>
+                <th class="pol-th">Details</th>
+                <th class="pol-th">Status</th>
+                <th class="pol-th">Quotes</th>
+                <th class="pol-th">Submitted</th>
+              </tr>
+            </thead>
+            <tbody>
+              <NuxtLink
+                v-for="policy in apiPolicies"
+                :key="policy.application_id"
+                :to="`/policies/app/${policy.application_id}`"
+                custom
+                v-slot="{ navigate }"
+              >
+                <tr class="pol-row" style="cursor: pointer;" @click="navigate">
+                  <td class="pol-td">
+                    <p class="pol-product-name">{{ policyApplicantName(policy) }}</p>
+                  </td>
+                  <td class="pol-td">
+                    <span class="pol-policy-number">{{ policyApplicantDoc(policy) }}</span>
+                  </td>
+                  <td class="pol-td">
+                    <span class="pol-carrier">
+                      {{ policyDetailsSummary(policy) }}
+                    </span>
+                  </td>
+                  <td class="pol-td">
+                    <span
+                      class="pol-status-badge"
+                      :class="{
+                        'pol-status-active': policy.status === 'issued',
+                        'pol-status-pending': policy.status === 'quote_requested' || policy.status === 'solicitation_sent',
+                        'pol-status-lapsed': policy.status === 'quotes_received',
+                      }"
+                    >{{ statusLabel(policy.status) }}</span>
+                  </td>
+                  <td class="pol-td">
+                    <span class="pol-carrier">
+                      {{ Object.keys(policy.quotes ?? {}).length }} / {{ (policy.selected_providers ?? []).length }}
+                    </span>
+                  </td>
+                  <td class="pol-td">
+                    <span class="pol-renewal-date">{{ new Date(policy.submitted_at).toLocaleDateString('es-PA') }}</span>
+                  </td>
+                </tr>
+              </NuxtLink>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Empty state (API, no results) -->
+      <div v-else-if="!usingMock && apiPolicies.length === 0 && !pending" class="pol-card">
+        <div class="pol-empty">
+          <UIcon name="i-heroicons-document-text" class="w-10 h-10" style="color: #8a8a86; opacity: 0.5;" />
+          <p class="pol-empty-title">No policies found</p>
+          <p class="pol-empty-sub">Create a new policy or adjust your filters</p>
         </div>
       </div>
 
       <!-- Pagination -->
-      <div v-if="meta && meta.total_pages > 1" class="flex justify-center">
+      <div v-if="meta && meta.total_pages > 1" class="flex justify-center pt-2">
         <UPagination v-model="page" :total="meta.total_count" :page-count="meta.page_size" />
       </div>
     </template>
   </div>
 </template>
+
+<style scoped>
+/* =====================================================================
+   POLICIES INDEX — TABLE-FIRST LAYOUT (scoped, pol- prefix)
+   ===================================================================== */
+
+.pol-root {
+  --pol-brand: #01696f;
+  --pol-brand-soft: rgba(1, 105, 111, 0.06);
+  --pol-border: rgba(0, 0, 0, 0.06);
+  --pol-border-strong: rgba(0, 0, 0, 0.08);
+  --pol-muted: #8a8a86;
+  --pol-surface: #ffffff;
+}
+
+/* ---- Header ---- */
+.pol-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pol-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.pol-title {
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--text-primary, #1a1a1a);
+  line-height: 1;
+}
+.pol-count-badge {
+  font-size: 11px;
+  font-weight: 700;
+  color: #01696f;
+  background: rgba(1, 105, 111, 0.08);
+  padding: 2px 9px;
+  border-radius: 10px;
+  letter-spacing: 0.01em;
+}
+.pol-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ---- Filter bar ---- */
+.pol-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+/* ---- Card system ---- */
+.pol-card {
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+.pol-card-flush {
+  overflow: hidden;
+}
+.pol-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+}
+.pol-card-head-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: #8a8a86;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+/* ---- Buttons ---- */
+.pol-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #ffffff;
+  background: #01696f;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.pol-btn-primary:hover { background: #015258; }
+
+.pol-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.pol-btn-secondary:hover {
+  border-color: rgba(1, 105, 111, 0.2);
+  color: #01696f;
+}
+
+.pol-btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #8a8a86;
+  background: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.pol-btn-ghost:hover { color: var(--text-primary, #1a1a1a); border-color: rgba(0, 0, 0, 0.12); }
+
+/* ---- View toggle ---- */
+.pol-view-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  margin-left: auto;
+}
+.pol-view-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 28px;
+  border-radius: 7px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.pol-view-toggle-btn:hover { color: var(--text-primary, #1a1a1a); }
+.pol-view-toggle-btn--active {
+  background: #fff;
+  color: var(--text-primary, #1a1a1a);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* ---- Card grid ---- */
+.pol-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+@media (max-width: 1024px) { .pol-card-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 640px) { .pol-card-grid { grid-template-columns: 1fr; } }
+
+.pol-card-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  text-decoration: none;
+  transition: all 0.15s ease;
+  cursor: pointer;
+}
+.pol-card-item:hover {
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
+  border-color: rgba(1, 105, 111, 0.15);
+}
+.pol-card-item__top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pol-card-item__customer {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pol-card-item__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+}
+.pol-card-item__field {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.pol-card-item__label {
+  font-size: 12px;
+  color: #8a8a86;
+}
+.pol-card-item__value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary, #1a1a1a);
+}
+
+/* ---- Search ---- */
+.pol-search-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  min-width: 200px;
+  max-width: 340px;
+}
+.pol-search-icon {
+  position: absolute;
+  left: 10px;
+  width: 14px;
+  height: 14px;
+  color: #8a8a86;
+  pointer-events: none;
+}
+.pol-search-input {
+  padding: 6px 10px 6px 30px;
+  width: 100%;
+  font-size: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  background: #ffffff;
+  color: var(--text-primary, #1a1a1a);
+  outline: none;
+  transition: border-color 150ms ease;
+}
+.pol-search-input::placeholder { color: #8a8a86; }
+.pol-search-input:focus { border-color: rgba(1, 105, 111, 0.3); }
+
+/* ---- Native select ---- */
+.pol-select {
+  appearance: none;
+  padding: 6px 28px 6px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary, #1a1a1a);
+  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a8a86'/%3E%3C/svg%3E") no-repeat right 10px center;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 150ms ease;
+  white-space: nowrap;
+}
+.pol-select:focus { border-color: rgba(1, 105, 111, 0.3); }
+
+/* ---- Multi-select dropdown ---- */
+.pol-multi-dropdown {
+  position: relative;
+}
+.pol-multi-dropdown .pol-select {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  text-align: left;
+  min-width: 120px;
+}
+.pol-select-chevron {
+  width: 12px;
+  height: 12px;
+  color: #8a8a86;
+  margin-left: auto;
+}
+.pol-multi-dropdown .pol-select {
+  background-image: none;
+  padding-right: 10px;
+}
+.pol-dropdown-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 180px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  z-index: 50;
+  padding: 6px 0;
+  max-height: 260px;
+  overflow-y: auto;
+}
+.pol-dropdown-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary, #1a1a1a);
+  cursor: pointer;
+  transition: background 100ms;
+}
+.pol-dropdown-option:hover {
+  background: rgba(1, 105, 111, 0.04);
+}
+.pol-dropdown-option input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  accent-color: #01696f;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.pol-dropdown-clear {
+  display: block;
+  width: calc(100% - 16px);
+  margin: 4px 8px 2px;
+  padding: 4px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #01696f;
+  background: rgba(1, 105, 111, 0.06);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: center;
+}
+.pol-dropdown-clear:hover {
+  background: rgba(1, 105, 111, 0.12);
+}
+
+/* ---- Mock banner ---- */
+.pol-mock-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  margin-bottom: 8px;
+  background: rgba(1, 105, 111, 0.04);
+  border: 1px solid rgba(1, 105, 111, 0.1);
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted, #5c5650);
+}
+
+/* ---- Table tabs ---- */
+.pol-table-tabs {
+  display: inline-flex; gap: 2px; padding: 3px;
+  border-radius: 8px; background: rgba(0,0,0,0.04);
+}
+.pol-table-tab {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 5px 10px; border-radius: 6px;
+  font-size: 11px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.pol-tab-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.pol-tab-off { background: transparent; color: #8a8a86; }
+.pol-tab-off:hover { color: var(--text-primary); }
+.pol-tab-count {
+  font-size: 9px; font-weight: 600; padding: 0px 4px;
+  border-radius: 9999px; background: rgba(0,0,0,0.06); color: #8a8a86;
+}
+.pol-tab-count-on { background: rgba(1,105,111,0.1); color: #01696f; }
+
+/* ---- Table ---- */
+.pol-table-wrap {
+  overflow-x: auto;
+}
+.pol-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.pol-th {
+  padding: 8px 12px;
+  text-align: left;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  white-space: nowrap;
+}
+.pol-th-right { text-align: right; }
+.pol-th-actions { text-align: center; width: 80px; }
+.pol-td {
+  padding: 8px 12px;
+  vertical-align: middle;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+  font-size: 13px;
+}
+.pol-td-right { text-align: right; }
+.pol-td-actions {
+  text-align: center;
+  white-space: nowrap;
+}
+.pol-row {
+  transition: background 120ms ease;
+}
+.pol-row:hover {
+  background: rgba(0, 0, 0, 0.015);
+}
+.pol-row:last-child .pol-td {
+  border-bottom: none;
+}
+
+/* ---- Table cell elements ---- */
+.pol-policy-number {
+  font-size: 12px;
+  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
+  color: var(--text-muted, #5c5650);
+  white-space: nowrap;
+}
+.pol-policy-link {
+  color: #01696f;
+  text-decoration: none;
+  font-weight: 600;
+}
+.pol-policy-link:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.pol-product-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+  line-height: 1.3;
+}
+.pol-product {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary, #1a1a1a);
+  display: block;
+  line-height: 1.3;
+}
+.pol-product-detail {
+  display: block;
+  font-size: 11px;
+  color: #8a8a86;
+  margin-top: 1px;
+}
+.pol-carrier {
+  font-size: 13px;
+  color: var(--text-muted, #5c5650);
+  white-space: nowrap;
+}
+.pol-customer-link {
+  font-size: 13px;
+  font-weight: 500;
+  color: #01696f;
+  text-decoration: none;
+  transition: color 150ms ease;
+  white-space: nowrap;
+}
+.pol-customer-link:hover {
+  color: #015258;
+  text-decoration: underline;
+}
+.pol-premium {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+  font-variant-numeric: tabular-nums;
+}
+.pol-premium-period {
+  font-size: 11px;
+  font-weight: 400;
+  color: #8a8a86;
+}
+.pol-agent {
+  font-size: 12px;
+  color: var(--text-muted, #5c5650);
+  white-space: nowrap;
+}
+.pol-renewal-date {
+  font-size: 12px;
+  color: var(--text-muted, #5c5650);
+  white-space: nowrap;
+}
+
+/* ---- Line chip (icon + label) ---- */
+.pol-line-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px 2px 5px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+.pol-line-chip-icon {
+  width: 12px;
+  height: 12px;
+}
+.pol-line-auto     { background: rgba(59, 130, 246, 0.08); color: #2563eb; }
+.pol-line-health   { background: rgba(236, 72, 153, 0.08); color: #db2777; }
+.pol-line-life     { background: rgba(16, 185, 129, 0.08); color: #059669; }
+.pol-line-home     { background: rgba(245, 158, 11, 0.08); color: #d97706; }
+.pol-line-renter   { background: rgba(245, 158, 11, 0.08); color: #d97706; }
+.pol-line-umbrella { background: rgba(139, 92, 246, 0.08); color: #7c3aed; }
+
+/* ---- Status badge ---- */
+.pol-status-badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+.pol-status-active    { background: rgba(16, 185, 129, 0.1); color: #059669; }
+.pol-status-pending   { background: rgba(245, 158, 11, 0.1); color: #d97706; }
+.pol-status-lapsed    { background: rgba(244, 63, 94, 0.1); color: #e11d48; }
+.pol-status-cancelled { background: rgba(0, 0, 0, 0.05); color: #8a8a86; }
+
+/* ---- Action buttons ---- */
+.pol-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 6px;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 150ms ease;
+  text-decoration: none;
+  margin: 0 2px;
+}
+.pol-action-btn:hover {
+  color: #01696f;
+  border-color: rgba(1, 105, 111, 0.2);
+  background: rgba(1, 105, 111, 0.04);
+}
+
+/* ---- Renewal urgency ---- */
+.pol-renew-urgent {
+  font-size: 12px; font-weight: 700; color: #c13838;
+  padding: 1px 6px; border-radius: 4px;
+  background: rgba(193,56,56,0.06);
+  white-space: nowrap;
+}
+.pol-renew-soon {
+  font-size: 12px; font-weight: 600; color: #c27b1a;
+  white-space: nowrap;
+}
+.pol-renew-ok {
+  font-size: 12px; color: var(--text-primary, #1a1a1a);
+  white-space: nowrap;
+}
+.pol-renew-far {
+  font-size: 12px; color: var(--text-muted, #5c5650);
+  white-space: nowrap;
+}
+.pol-renew-overdue {
+  font-size: 12px; font-weight: 600; color: #c27b1a;
+  padding: 1px 6px; border-radius: 4px;
+  background: rgba(194,123,26,0.06);
+  white-space: nowrap;
+}
+.pol-renew-past {
+  font-size: 12px; font-weight: 600; color: #c13838;
+  white-space: nowrap;
+}
+.pol-renew-expired {
+  font-size: 11px; font-weight: 600; color: #8a8a86;
+  text-decoration: line-through;
+  opacity: 0.6;
+  white-space: nowrap;
+}
+
+/* ---- Bottom bar ---- */
+.pol-bottom-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  font-size: 12px;
+  color: #8a8a86;
+}
+.pol-bottom-count {
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+}
+.pol-bottom-sep {
+  width: 1px;
+  height: 14px;
+  background: rgba(0, 0, 0, 0.08);
+}
+.pol-bottom-premium {
+  font-weight: 400;
+}
+.pol-bottom-premium strong {
+  font-weight: 700;
+  color: var(--text-primary, #1a1a1a);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- Empty state ---- */
+.pol-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px 20px;
+  text-align: center;
+}
+.pol-empty-title {
+  margin-top: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+}
+.pol-empty-sub {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #8a8a86;
+}
+
+/* ---- Skeleton ---- */
+.pol-skeleton-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+}
+.pol-skeleton-row:last-child { border-bottom: none; }
+.pol-skeleton {
+  height: 12px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.05);
+  animation: pol-pulse 1.5s ease-in-out infinite;
+}
+@keyframes pol-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+</style>
diff --git a/app/pages/policies/new.vue b/app/pages/policies/new.vue
index 0228d53..0418cda 100644
--- a/app/pages/policies/new.vue
+++ b/app/pages/policies/new.vue
@@ -19,8 +19,8 @@ const selectedCustomer        = ref<any>(null)
 
 const { data: customersData, pending: customersPending } = useCustomer('/customers', {
   query: computed(() => ({
-    'page_size':   12,
-    'page': customerPage.value,
+    'page[number]': customerPage.value,
+    'page[size]': 12,
     ...(debouncedCustomerSearch.value && {
       'filters[0][field]': 'search',
       'filters[0][op]':    '==',
@@ -176,7 +176,7 @@ async function submitCarPolicy() {
     }) as any
 
     toast.add({ title: 'Policy submitted successfully', color: 'green' })
-    router.push(`/policies/${data.application_id}`)
+    router.push(`/policies/app/${data.application_id}`)
   } catch (e: any) {
     toast.add({
       title:       'Failed to submit policy',
@@ -214,15 +214,15 @@ const isCarFormValid = computed(() => {
         </UButton>
       </NuxtLink>
       <div>
-        <h1 class="text-3xl text-slate-900 font-bold">New Policy</h1>
-        <p class="text-gray-500 text-sm">Submit a new insurance policy quote request</p>
+        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">New Policy</h1>
+        <p class="text-[13px] text-[var(--text-muted)]">Submit a new insurance policy quote request</p>
       </div>
     </div>
 
     <!-- Customer Selection -->
     <UCard>
       <template #header>
-        <p class="font-semibold text-slate-700 flex items-center gap-2">
+        <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
           <UIcon name="i-heroicons-users" class="w-4 h-4" />
           Select Customer
         </p>
@@ -248,13 +248,13 @@ const isCarFormValid = computed(() => {
               class="flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all"
               :class="selectedCustomer?.id === c.id
                 ? 'border-primary-500 bg-primary-50'
-                : 'border-gray-200 hover:border-gray-300 bg-white'"
+                : 'border-gray-200 hover:border-gray-300 bg-[var(--surface)]'"
               @click="selectCustomer(c)"
             >
               <UAvatar :alt="customerDisplayName(c)" size="sm" />
               <div class="min-w-0 flex-1">
                 <div class="flex items-center gap-1.5">
-                  <p class="font-medium text-sm text-slate-800 truncate">{{ customerDisplayName(c) }}</p>
+                  <p class="font-medium text-sm text-[var(--text-primary)] truncate">{{ customerDisplayName(c) }}</p>
                   <UBadge
                     :color="c.customer_type === 'corporate' ? 'purple' : 'blue'"
                     variant="soft" size="xs" class="flex-shrink-0"
@@ -332,7 +332,7 @@ const isCarFormValid = computed(() => {
     <!-- Policy Type -->
     <UCard>
       <template #header>
-        <p class="font-semibold text-slate-700">Policy Type</p>
+        <p class="font-semibold text-[var(--text-primary)]">Policy Type</p>
       </template>
       <div class="flex gap-4">
         <div
@@ -344,7 +344,7 @@ const isCarFormValid = computed(() => {
               ? 'border-gray-100 bg-gray-50 opacity-40 cursor-not-allowed'
               : policyType === item.value
                 ? 'border-primary-500 bg-primary-50 cursor-pointer'
-                : 'border-gray-200 bg-white hover:border-gray-300 cursor-pointer'
+                : 'border-gray-200 bg-[var(--surface)] hover:border-gray-300 cursor-pointer'
           ]"
           @click="!item.disabled && (policyType = item.value as any)"
         >
@@ -365,7 +365,7 @@ const isCarFormValid = computed(() => {
     <template v-if="policyType === 'car'">
       <UCard>
         <template #header>
-          <p class="font-semibold text-slate-700 flex items-center gap-2">
+          <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
             <UIcon name="i-heroicons-truck" class="w-4 h-4" />
             Vehicle Details
           </p>
@@ -410,7 +410,7 @@ const isCarFormValid = computed(() => {
       <!-- Provider Selection -->
       <UCard>
         <template #header>
-          <p class="font-semibold text-slate-700 flex items-center gap-2">
+          <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
             <UIcon name="i-heroicons-building-office" class="w-4 h-4" />
             Selected Providers
             <UBadge color="gray" variant="soft" size="xs">
@@ -438,14 +438,14 @@ const isCarFormValid = computed(() => {
               class="flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all"
               :class="isProviderSelected(p)
                 ? 'border-primary-500 bg-primary-50'
-                : 'border-gray-200 hover:border-gray-300 bg-white'"
+                : 'border-gray-200 hover:border-gray-300 bg-[var(--surface)]'"
               @click="toggleProvider(p)"
             >
               <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
                 <UIcon name="i-heroicons-building-office" class="w-4 h-4 text-gray-500" />
               </div>
               <div class="min-w-0 flex-1">
-                <p class="font-medium text-sm text-slate-800 truncate">{{ p.name }}</p>
+                <p class="font-medium text-sm text-[var(--text-primary)] truncate">{{ p.name }}</p>
                 <p class="text-xs text-gray-400 truncate">{{ p.email }}</p>
               </div>
               <UIcon
diff --git a/app/pages/providers/[provider_id].vue b/app/pages/providers/[provider_id].vue
index 19b6f39..bba89e6 100644
--- a/app/pages/providers/[provider_id].vue
+++ b/app/pages/providers/[provider_id].vue
@@ -4,6 +4,8 @@ const providerId = route.params.provider_id as string
 const toast = useToast()
 const { $providers } = useNuxtApp()
 
+const { emails, roles, label } = useProviderContactEmails(providerId)
+
 const { data, pending, error, refresh } = useProviders(`/providers/${providerId}`)
 const provider = computed(() => data.value?.data)
 
@@ -125,7 +127,7 @@ const clientTypeColor = (ct: string) =>
               {{ provider.active ? 'Active' : 'Inactive' }}
             </UBadge>
           </div>
-          <h1 class="text-2xl font-bold text-slate-900">{{ provider.name }}</h1>
+          <h1 class="text-2xl font-semibold text-[var(--text-primary)]">{{ provider.name }}</h1>
           <p class="text-gray-500 text-sm font-mono">{{ provider.provider_id }}</p>
         </div>
         <div class="flex gap-2">
@@ -144,7 +146,7 @@ const clientTypeColor = (ct: string) =>
       <!-- Info -->
       <UCard>
         <template #header>
-          <p class="font-semibold text-slate-700 flex items-center gap-2">
+          <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
             <UIcon name="i-heroicons-building-office" class="w-4 h-4" /> Provider Details
           </p>
         </template>
@@ -157,11 +159,29 @@ const clientTypeColor = (ct: string) =>
         </div>
       </UCard>
 
+      <UCard>
+        <template #header>
+          <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
+            <UIcon name="i-heroicons-envelope" class="w-4 h-4" />
+            Outbound email roles
+          </p>
+        </template>
+        <p class="mb-4 text-xs text-gray-500">
+          Stored in this browser for demo — sync to API later. Workflows (quotes, claims, renewals) resolve recipients
+          from these slots.
+        </p>
+        <div class="grid gap-3 sm:grid-cols-2">
+          <UFormField v-for="role in roles" :key="role" :label="label(role)">
+            <UInput v-model="emails[role]" type="email" placeholder="name@carrier.com" class="w-full" />
+          </UFormField>
+        </div>
+      </UCard>
+
       <!-- Templates — grouped by policy_type → client_type -->
       <UCard>
         <template #header>
           <div class="flex justify-between items-center">
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
+            <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
               <UIcon name="i-heroicons-document" class="w-4 h-4" /> Solicitation Templates
             </p>
             <UButton icon="i-heroicons-arrow-up-tray" color="primary" size="sm" @click="isUploadOpen = true">
@@ -197,7 +217,7 @@ const clientTypeColor = (ct: string) =>
                     v-for="t in tmplList"
                     :key="t.template_id"
                     class="flex items-center justify-between p-3 border rounded-lg text-sm"
-                    :class="t.active ? 'border-gray-200 bg-white' : 'border-gray-100 bg-gray-50 opacity-60'"
+                    :class="t.active ? 'border-gray-200 bg-[var(--surface)]' : 'border-gray-100 bg-gray-50 opacity-60'"
                   >
                     <div class="space-y-0.5 min-w-0">
                       <div class="flex items-center gap-2 flex-wrap">
@@ -246,7 +266,7 @@ const clientTypeColor = (ct: string) =>
         <div class="flex flex-col h-full">
           <div class="flex justify-between items-center p-6 border-b">
             <div>
-              <h2 class="text-lg font-semibold text-slate-900">Upload Template</h2>
+              <h2 class="text-lg font-semibold text-[var(--text-primary)]">Upload Template</h2>
               <p class="text-sm text-gray-500">Upload a fillable PDF solicitation form</p>
             </div>
             <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="isUploadOpen = false" />
diff --git a/app/pages/providers/index.vue b/app/pages/providers/index.vue
index ad5dad1..48258a9 100644
--- a/app/pages/providers/index.vue
+++ b/app/pages/providers/index.vue
@@ -14,8 +14,8 @@ const providers = computed(() => {
   <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
     <div class="flex justify-between items-center">
       <div>
-        <h1 class="text-3xl font-bold text-slate-900">Providers</h1>
-        <p class="text-gray-500 text-sm">Insurance carrier management</p>
+        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Providers</h1>
+        <p class="text-[13px] text-[var(--text-muted)]">Insurance carrier management</p>
       </div>
       <div class="flex items-center gap-3">
         <UBadge color="gray" variant="soft" size="lg">{{ providers.length }} providers</UBadge>
@@ -39,7 +39,7 @@ const providers = computed(() => {
         <UCard class="hover:shadow-md transition-shadow cursor-pointer h-full">
           <div class="space-y-3">
             <div class="flex justify-between items-start">
-              <p class="font-semibold text-slate-900 text-lg">{{ p.name }}</p>
+              <p class="font-semibold text-[var(--text-primary)] text-lg">{{ p.name }}</p>
               <UBadge :color="p.active ? 'green' : 'red'" variant="soft" size="xs">
                 {{ p.active ? 'Active' : 'Inactive' }}
               </UBadge>
diff --git a/app/pages/providers/new.vue b/app/pages/providers/new.vue
index 1b0f8ab..efbbafe 100644
--- a/app/pages/providers/new.vue
+++ b/app/pages/providers/new.vue
@@ -31,14 +31,14 @@ async function submit() {
         <UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">Back</UButton>
       </NuxtLink>
       <div>
-        <h1 class="text-3xl font-bold text-slate-900">New Provider</h1>
-        <p class="text-gray-500 text-sm">Register a new insurance carrier</p>
+        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">New Provider</h1>
+        <p class="text-[13px] text-[var(--text-muted)]">Register a new insurance carrier</p>
       </div>
     </div>
 
     <UCard class="max-w-2xl">
       <template #header>
-        <p class="font-semibold text-slate-700 flex items-center gap-2">
+        <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
           <UIcon name="i-heroicons-building-office" class="w-4 h-4" /> Provider Information
         </p>
       </template>
diff --git a/app/pages/quotes/auto/index.vue b/app/pages/quotes/auto/index.vue
new file mode 100644
index 0000000..0960881
--- /dev/null
+++ b/app/pages/quotes/auto/index.vue
@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import { emptyAutoQuoteDraft } from '~/composables/useAutoQuoteDraft'
+import type { AutoQuoteIntakePayload, AutoQuoteMode, AutoQuoteSegment } from '~/types/auto-quote-intake'
+
+/** Client-only: many Nuxt UI fields on this screen can stall hydration / main thread if SSR + client fight */
+definePageMeta({ ssr: false })
+
+usePageTitle('Quotes · Auto')
+
+const STEP_ORDER = ['setup', 'solicit', 'acceptance'] as const
+type StepId = (typeof STEP_ORDER)[number]
+
+const STEP_LABELS: Record<StepId, string> = {
+  setup: 'Quote setup',
+  solicit: 'Quotes to solicit',
+  acceptance: 'Acceptance'
+}
+
+const step = ref<StepId>('setup')
+/** Highest step index the user has reached (for stepper — no reactive watch loops) */
+const maxStepIndex = ref(0)
+const intakeBusy = ref(false)
+
+const draft = reactive(emptyAutoQuoteDraft())
+
+const toast = useToast()
+const { quoteRequestEmailEnabled } = useQuoteRequestEmailEnabled()
+
+const modeCards: { id: AutoQuoteMode; title: string; hint: string; icon: string }[] = [
+  {
+    id: 'single',
+    title: 'Single quote',
+    hint: 'One package — we’ll email carriers’ quoting inboxes on file.',
+    icon: 'i-heroicons-document-text'
+  },
+  {
+    id: 'comparative_pdf',
+    title: 'Comparative quote',
+    hint: 'Same vehicle facts; prep plan comparisons and enter premiums when emails arrive.',
+    icon: 'i-heroicons-document-duplicate'
+  }
+]
+
+const segmentCards: { id: AutoQuoteSegment; title: string; hint: string; icon: string }[] = [
+  {
+    id: 'individual',
+    title: 'Individual',
+    hint: 'Personal auto.',
+    icon: 'i-heroicons-user'
+  },
+  {
+    id: 'corporate',
+    title: 'Corporate',
+    hint: 'Business or group.',
+    icon: 'i-heroicons-building-office-2'
+  },
+  {
+    id: 'fleet',
+    title: 'Fleet',
+    hint: 'Fleet program.',
+    icon: 'i-heroicons-truck'
+  }
+]
+
+function canProceedFromCustomer() {
+  const c = draft.client
+  if (!c.fullName.trim() || !c.email.trim()) {
+    toast.add({
+      title: 'Add legal name and email',
+      description: 'We need them for carrier notifications.',
+      color: 'warning'
+    })
+    return false
+  }
+  return true
+}
+
+function canProceedFromSetup() {
+  if (!draft.quoteMode) {
+    toast.add({ title: 'Choose a quote type', description: 'Single or comparative.', color: 'warning' })
+    return false
+  }
+  if (!draft.segment) {
+    toast.add({ title: 'Choose policy type', description: 'Individual, corporate, or fleet.', color: 'warning' })
+    return false
+  }
+  if (!canProceedFromCustomer()) return false
+  if (
+    (draft.segment === 'corporate' || draft.segment === 'fleet') &&
+    !draft.client.organizationName?.trim()
+  ) {
+    toast.add({
+      title: 'Add organization',
+      description: 'Required for corporate and fleet policies.',
+      color: 'warning'
+    })
+    return false
+  }
+  return true
+}
+
+function canProceedFromSolicit() {
+  if (draft.solicit.carrierIds.length === 0 || draft.solicit.planIds.length === 0) {
+    toast.add({
+      title: 'Choose carriers and plans',
+      description: 'Select at least one insurance company and one coverage package.',
+      color: 'warning'
+    })
+    return false
+  }
+  return true
+}
+
+function goToStep(target: StepId) {
+  const ti = STEP_ORDER.indexOf(target)
+  if (ti > maxStepIndex.value) return
+  step.value = target
+}
+
+function onStepPillClick(stepIndex: number, target: StepId) {
+  if (stepIndex > maxStepIndex.value) return
+  goToStep(target)
+}
+
+function goPrev() {
+  const i = STEP_ORDER.indexOf(step.value)
+  if (i <= 0) return
+  step.value = STEP_ORDER[i - 1]!
+}
+
+function goNext() {
+  const i = STEP_ORDER.indexOf(step.value)
+  if (step.value === 'setup' && !canProceedFromSetup()) return
+  if (step.value === 'solicit' && !canProceedFromSolicit()) return
+  if (i >= STEP_ORDER.length - 1) return
+  const next = STEP_ORDER[i + 1]!
+  step.value = next
+  maxStepIndex.value = Math.max(maxStepIndex.value, i + 1)
+}
+
+function buildPayload(): AutoQuoteIntakePayload {
+  return {
+    quoteMode: draft.quoteMode!,
+    segment: draft.segment!,
+    client: { ...draft.client },
+    vehicle: { ...draft.vehicle },
+    solicit: {
+      carrierIds: [...draft.solicit.carrierIds],
+      planIds: [...draft.solicit.planIds]
+    }
+  }
+}
+
+async function finalize() {
+  if (!draft.quoteMode || !draft.segment) return
+  if (intakeBusy.value) return
+  intakeBusy.value = true
+  try {
+    const payload = buildPayload()
+    const emailOn = quoteRequestEmailEnabled.value
+
+    if (payload.quoteMode === 'comparative_pdf') {
+      toast.add({
+        title: emailOn ? 'Quote requests queued' : 'Comparative run saved',
+        description: emailOn
+          ? 'Opening the comparative sheet. Provider emails follow your Settings → Quote requests toggle.'
+          : 'Emails to providers are disabled — comparative layout saved for manual or table pricing.',
+        color: 'success'
+      })
+      await nextTick()
+      await navigateTo({
+        path: '/quotes/compare',
+        query: { from: 'auto', segment: payload.segment }
+      })
+      return
+    }
+    toast.add({
+      title: emailOn ? 'Quote requests recorded' : 'Quote run saved (no emails)',
+      description: emailOn
+        ? 'Requests can be sent to carrier quoting addresses on file when your integration is on.'
+        : 'Outbound provider email is off in Settings — this request stays in-app for tables, APIs, or AI.',
+      color: 'success'
+    })
+  } finally {
+    intakeBusy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl space-y-6 pb-12">
+    <NuxtLink to="/quotes" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Back to quotes</UButton>
+    </NuxtLink>
+
+    <div class="max-w-2xl">
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Auto quoting</h1>
+      <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+        Set up the risk, choose who to solicit, then accept — three steps.
+      </p>
+    </div>
+
+    <div
+      class="flex flex-wrap items-center gap-x-1 gap-y-2 text-[11px] font-medium text-[var(--text-muted)] sm:text-xs"
+      role="navigation"
+      aria-label="Steps"
+    >
+      <template v-for="(s, idx) in STEP_ORDER" :key="s">
+        <UIcon v-if="idx > 0" name="i-heroicons-chevron-right" class="h-3 w-3 shrink-0 opacity-40" aria-hidden="true" />
+        <button
+          type="button"
+          class="min-w-0 rounded-full px-2 py-1 text-left transition sm:px-2.5"
+          :class="
+            step === s
+              ? 'bg-[var(--brand-soft)] text-[var(--brand)]'
+              : idx <= maxStepIndex
+                ? 'cursor-pointer bg-[var(--sidebar-border)]/60 hover:bg-[var(--brand-soft)]/80 hover:text-[var(--brand)]'
+                : 'cursor-default bg-[var(--sidebar-border)]/60 opacity-50'
+          "
+          :aria-current="step === s ? 'step' : undefined"
+          @click.prevent.stop="onStepPillClick(idx, s)"
+        >
+          <span class="hidden sm:inline">{{ idx + 1 }}. {{ STEP_LABELS[s] }}</span>
+          <span class="sm:hidden">{{ idx + 1 }}</span>
+        </button>
+      </template>
+    </div>
+
+    <UCard :ui="{ body: { padding: 'p-5 sm:p-6' } }">
+      <template #header>
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">
+            Step {{ STEP_ORDER.indexOf(step) + 1 }} of {{ STEP_ORDER.length }}
+          </p>
+          <h2 class="mt-0.5 text-lg font-semibold text-[var(--text-primary)]">{{ STEP_LABELS[step] }}</h2>
+        </div>
+      </template>
+
+      <QuotesAutoSetupStep
+        v-if="step === 'setup'"
+        :draft="draft"
+        :mode-cards="modeCards"
+        :segment-cards="segmentCards"
+      />
+
+      <QuotesAutoSolicitQuotesStep
+        v-else-if="step === 'solicit' && draft.quoteMode"
+        :draft="draft"
+        :quote-mode="draft.quoteMode"
+      />
+
+      <QuotesAutoAcceptanceStep
+        v-else-if="step === 'acceptance' && draft.quoteMode && draft.segment"
+        :draft="draft"
+        :quote-mode="draft.quoteMode"
+        :segment="draft.segment"
+      />
+    </UCard>
+
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <UButton
+        v-if="step !== 'setup'"
+        type="button"
+        color="neutral"
+        variant="soft"
+        @click="goPrev"
+      >
+        Back
+      </UButton>
+      <NuxtLink v-else to="/quotes" class="inline-flex">
+        <UButton color="neutral" variant="ghost" size="sm">Cancel</UButton>
+      </NuxtLink>
+
+      <div class="flex flex-wrap gap-2">
+        <UButton v-if="step !== 'acceptance'" type="button" color="primary" @click="goNext">
+          Continue
+        </UButton>
+        <UButton
+          v-else
+          type="button"
+          color="primary"
+          :loading="intakeBusy"
+          :disabled="intakeBusy"
+          @click="finalize"
+        >
+          {{ quoteRequestEmailEnabled ? 'Send quote requests' : 'Save quote run' }}
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/quotes/compare.vue b/app/pages/quotes/compare.vue
new file mode 100644
index 0000000..7bd1531
--- /dev/null
+++ b/app/pages/quotes/compare.vue
@@ -0,0 +1,1001 @@
+<script setup lang="ts">
+import type { QuoteComparativeView } from '~/types/quote-view-model'
+import QuoteComparativeLayout from '~/components/quotes/QuoteComparativeLayout.vue'
+
+definePageMeta({ ssr: false })
+usePageTitle('Present Quotes')
+
+const route = useRoute()
+const router = useRouter()
+
+/* ── Pipeline bar ── */
+const { deals: allDeals } = useSalesPipeline()
+const activeDealId = ref<string | null>(route.query.deal as string | null)
+const activeDeals = computed(() => allDeals.value.filter(d => d.currentStage !== 'emission').slice(0, 10))
+const pipelineDeal = computed(() => {
+  if (activeDealId.value) return allDeals.value.find(d => d.id === activeDealId.value) ?? null
+  return null
+})
+function onPipelineNavigate(stage: string) {
+  const stageRoutes: Record<string, string> = {
+    customer: '/quotes/new', get_quotes: '/quotes/new',
+    present_quotes: '/quotes/compare', solicitud: '/onboarding/solicitud', emission: '/onboarding/emissions',
+  }
+  if (stageRoutes[stage]) navigateTo(stageRoutes[stage])
+}
+
+/* ── Presentation mode ── */
+type PresentMode = 'comparative' | 'single'
+const presentMode = ref<PresentMode>('comparative')
+const intakeSegment = computed(() => {
+  const s = route.query.segment
+  return typeof s === 'string' ? s : null
+})
+const fromAutoIntake = computed(() => route.query.from === 'auto')
+const fromHealthIntake = computed(() => route.query.from === 'health')
+
+const toast = useToast()
+const { view, reset } = useQuoteSession()
+const { enqueue } = useEmissionsQueue()
+const pdfNote = ref('')
+const pdfInputRef = ref<HTMLInputElement | null>(null)
+
+function onPdfPick(e: Event) {
+  const f = (e.target as HTMLInputElement).files?.[0]
+  if (!f) return
+  if (f.type !== 'application/pdf') {
+    toast.add({ title: 'Please choose a PDF', color: 'error' })
+    return
+  }
+  pdfNote.value = `${f.name} (${(f.size / 1024).toFixed(1)} KB) — extraction not wired; use manual edit below.`
+  toast.add({
+    title: 'PDF attached',
+    description: 'Illustration parsing can populate the view model when the service is available.',
+    color: 'success'
+  })
+}
+
+function patchClient(field: keyof QuoteComparativeView['client'], value: string | number | boolean) {
+  view.value = {
+    ...view.value,
+    client: { ...view.value.client, [field]: value }
+  }
+}
+
+function patchRequest(field: keyof QuoteComparativeView['request'], value: number | string) {
+  view.value = {
+    ...view.value,
+    request: { ...view.value.request, [field]: value }
+  }
+}
+
+/* ── Single proposal mode ── */
+const singleCarrierIdx = ref<number>(0)
+const singleCarrier = computed(() => view.value.carriers[singleCarrierIdx.value] ?? view.value.carriers[0] ?? null)
+
+/* ── Broker intake link (manual path) ── */
+const bindToken = ref('')
+
+function generateIntakeLink() {
+  const token = crypto.randomUUID?.() ?? String(Date.now())
+  bindToken.value = token
+  const url = `${typeof window !== 'undefined' ? window.location.origin : ''}/onboarding/solicitud?bind=${encodeURIComponent(token)}`
+  navigator.clipboard?.writeText(url).catch(() => {})
+  toast.add({
+    title: 'Intake link copied',
+    description: 'Share with the customer after they accept a quote.',
+    color: 'success'
+  })
+}
+
+/* ── Quote acceptance flow ── */
+type AcceptanceState = 'pending' | 'selecting' | 'accepted'
+const acceptState = ref<AcceptanceState>('pending')
+const selectedCarrierIdx = ref<number | null>(null)
+const acceptedAt = ref<string | null>(null)
+const generatedEmissionIds = ref<string[]>([])
+
+/** Which carrier the customer chose */
+const acceptedCarrier = computed(() => {
+  if (selectedCarrierIdx.value === null) return null
+  return view.value.carriers[selectedCarrierIdx.value] ?? null
+})
+
+function beginAcceptance() {
+  acceptState.value = 'selecting'
+  selectedCarrierIdx.value = null
+}
+
+function cancelAcceptance() {
+  acceptState.value = 'pending'
+  selectedCarrierIdx.value = null
+}
+
+function confirmAcceptance() {
+  if (selectedCarrierIdx.value === null) {
+    toast.add({ title: 'Select the accepted option first', color: 'error' })
+    return
+  }
+
+  const carrier = view.value.carriers[selectedCarrierIdx.value]
+  if (!carrier) return
+
+  // Mark as accepted
+  acceptState.value = 'accepted'
+  acceptedAt.value = new Date().toISOString()
+
+  // Generate bind token
+  const token = crypto.randomUUID?.() ?? String(Date.now())
+  bindToken.value = token
+
+  // Auto-enqueue to emissions with source = 'auto'
+  const row = enqueue({
+    customerLabel: view.value.client.name || 'Customer',
+    insurerSlug: carrier.carrierName,
+    subRamoKey: 'life', // derived from quote context
+    productLine: carrier.productName,
+    bindToken: token,
+    source: 'auto',
+    carrierProduct: carrier.productName
+  })
+
+  generatedEmissionIds.value = [row.id]
+
+  toast.add({
+    title: 'Quote accepted — solicitud auto-generated',
+    description: `${carrier.productName} → emissions queue`,
+    color: 'success'
+  })
+}
+
+function goToEmissions() {
+  router.push('/onboarding/emissions')
+}
+</script>
+
+<template>
+  <div class="cmp mx-auto max-w-5xl space-y-6 pb-12">
+    <!-- Back -->
+    <div class="flex items-center justify-between">
+      <NuxtLink to="/quotes" class="inline-flex">
+        <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Back to overview</UButton>
+      </NuxtLink>
+      <UButton color="neutral" variant="soft" size="sm" @click="reset()">Reset demo data</UButton>
+    </div>
+
+    <!-- Sales flow indicator -->
+    <SalesFlowIndicator current-stage="present_quotes" />
+
+    <UAlert
+      v-if="fromAutoIntake"
+      color="info"
+      variant="soft"
+      title="Ficha de auto"
+      :description="
+        intakeSegment
+          ? `Continúe el PDF comparativo — segmento: ${intakeSegment}. Los números de abajo se pueden alinear con la ficha cuando exista API.`
+          : 'Continúe el PDF comparativo con los datos capturados en cotización de auto.'
+      "
+    />
+    <UAlert
+      v-if="fromHealthIntake"
+      color="info"
+      variant="soft"
+      title="Health comparative"
+      :description="
+        intakeSegment
+          ? `Continue the comparative PDF — segment: ${intakeSegment}. Align premiums with census and age-band tables when your integration is available.`
+          : 'Continue the comparative PDF with data captured from the health quote flow.'
+      "
+    />
+
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Present Quotes</h1>
+        <p class="mt-1 max-w-2xl text-[13px] text-[var(--text-muted)]">
+          Build a single proposal or side-by-side comparative to present to the customer. Edit manually or attach a carrier PDF for future auto-fill.
+        </p>
+      </div>
+    </div>
+
+    <!-- Pipeline bar -->
+    <div v-if="activeDeals.length > 0">
+      <div v-if="!pipelineDeal" class="cmp-deal-picker">
+        <div class="flex items-center gap-2 text-[12px] text-[var(--text-muted)]">
+          <UIcon name="i-heroicons-arrow-path" style="width: 13px; height: 13px; opacity: 0.5;" />
+          <span class="font-medium">Continue an active deal:</span>
+        </div>
+        <div class="flex flex-wrap gap-2 mt-2">
+          <button v-for="d in activeDeals" :key="d.id" type="button" class="cmp-deal-chip" @click="activeDealId = d.id">
+            <span class="font-semibold">{{ d.customerName.split(' ').slice(0, 2).join(' ') }}</span>
+            <span style="font-size:10px;font-weight:600;padding:0 5px;border-radius:9999px;background:rgba(1,105,111,0.07);color:#01696f;">{{ d.productLine }}</span>
+          </button>
+        </div>
+      </div>
+      <template v-else>
+        <div class="flex items-center justify-between mb-1">
+          <span class="text-[11px] font-semibold uppercase tracking-wider text-[#8a8a86]">Active Deal</span>
+          <button type="button" class="text-[11px] text-[var(--text-muted)] hover:text-[var(--text-primary)]" @click="activeDealId = null">Switch deal</button>
+        </div>
+        <SalesPipelineBar :deal="pipelineDeal" @navigate="onPipelineNavigate" />
+      </template>
+    </div>
+
+    <!-- Presentation mode toggle -->
+    <div class="cmp-mode-bar">
+      <div class="cmp-mode-tabs">
+        <button
+          type="button"
+          class="cmp-mode-tab"
+          :class="presentMode === 'comparative' ? 'cmp-mode-on' : 'cmp-mode-off'"
+          @click="presentMode = 'comparative'"
+        >
+          <UIcon name="i-heroicons-table-cells" style="width: 14px; height: 14px;" />
+          Comparative
+        </button>
+        <button
+          type="button"
+          class="cmp-mode-tab"
+          :class="presentMode === 'single' ? 'cmp-mode-on' : 'cmp-mode-off'"
+          @click="presentMode = 'single'"
+        >
+          <UIcon name="i-heroicons-document-text" style="width: 14px; height: 14px;" />
+          Single Proposal
+        </button>
+      </div>
+      <p class="text-[11px] text-[var(--text-muted)]">
+        {{ presentMode === 'comparative'
+          ? `${view.carriers.length} carriers side-by-side`
+          : 'One carrier, detailed breakdown'
+        }}
+      </p>
+    </div>
+
+    <UCard>
+      <template #header>
+        <span class="font-semibold text-[var(--text-primary)]">Ingest</span>
+      </template>
+      <div class="flex flex-wrap items-end gap-4">
+        <div>
+          <input
+            ref="pdfInputRef"
+            type="file"
+            accept="application/pdf"
+            class="hidden"
+            @change="onPdfPick"
+          />
+          <UButton
+            color="primary"
+            variant="soft"
+            icon="i-heroicons-document-arrow-up"
+            @click="pdfInputRef?.click()"
+          >
+            Attach illustration PDF
+          </UButton>
+        </div>
+        <p v-if="pdfNote" class="text-xs text-[var(--text-muted)]">{{ pdfNote }}</p>
+      </div>
+      <div class="mt-4 grid gap-3 sm:grid-cols-2">
+        <UFormField label="Cliente · nombre">
+          <UInput
+            :model-value="view.client.name"
+            class="w-full"
+            @update:model-value="patchClient('name', $event)"
+          />
+        </UFormField>
+        <UFormField label="Edad">
+          <UInput
+            type="number"
+            :model-value="view.client.ageYears"
+            class="w-full"
+            @update:model-value="patchClient('ageYears', Number($event))"
+          />
+        </UFormField>
+        <UFormField label="Suma asegurada (USD)">
+          <UInput
+            type="number"
+            :model-value="view.request.sumAssuredUsd"
+            class="w-full"
+            @update:model-value="patchRequest('sumAssuredUsd', Number($event))"
+          />
+        </UFormField>
+        <UFormField label="Prima mensual (USD)">
+          <UInput
+            type="number"
+            :model-value="view.request.monthlyPremiumUsd"
+            class="w-full"
+            @update:model-value="patchRequest('monthlyPremiumUsd', Number($event))"
+          />
+        </UFormField>
+      </div>
+    </UCard>
+
+    <!-- ═══ Comparative view ═══ -->
+    <div v-if="presentMode === 'comparative'" class="rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-4 shadow-sm md:p-8">
+      <QuoteComparativeLayout :model="view" />
+    </div>
+
+    <!-- ═══ Single proposal view ═══ -->
+    <div v-if="presentMode === 'single'" class="cmp-single-wrap">
+      <div class="cmp-single-head">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.04em] text-[#8a8a86] mb-2">Select carrier to present</p>
+        <div class="cmp-single-options">
+          <button
+            v-for="(carrier, idx) in view.carriers"
+            :key="idx"
+            type="button"
+            class="cmp-single-option"
+            :class="(singleCarrierIdx ?? 0) === idx ? 'cmp-single-selected' : ''"
+            @click="singleCarrierIdx = idx"
+          >
+            <span class="text-[13px] font-semibold text-[var(--text-primary)]">{{ carrier.productName }}</span>
+            <span class="text-[11px] text-[var(--text-muted)]">{{ carrier.carrierName }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Single carrier detail card -->
+      <div v-if="singleCarrier" class="cmp-single-card">
+        <div class="cmp-single-card-head">
+          <div>
+            <p class="text-[14px] font-semibold text-[var(--text-primary)]">{{ singleCarrier.productName }}</p>
+            <p class="text-[12px] text-[var(--text-muted)]">{{ singleCarrier.carrierName }}</p>
+          </div>
+          <div class="text-right">
+            <p class="text-[11px] font-semibold uppercase tracking-[0.04em] text-[#8a8a86]">Sum assured</p>
+            <p class="text-[18px] font-semibold tabular-nums text-[var(--text-primary)]">${{ singleCarrier.sumAssuredUsd?.toLocaleString() }}</p>
+          </div>
+        </div>
+
+        <div class="cmp-single-client">
+          <div class="cmp-single-stat">
+            <span class="cmp-single-stat-label">Client</span>
+            <span class="cmp-single-stat-value">{{ view.client.name }}</span>
+          </div>
+          <div class="cmp-single-stat">
+            <span class="cmp-single-stat-label">Age</span>
+            <span class="cmp-single-stat-value">{{ view.client.ageYears }}</span>
+          </div>
+          <div class="cmp-single-stat">
+            <span class="cmp-single-stat-label">Monthly premium</span>
+            <span class="cmp-single-stat-value">${{ view.request.monthlyPremiumUsd?.toLocaleString() }}</span>
+          </div>
+          <div class="cmp-single-stat">
+            <span class="cmp-single-stat-label">Annual premium</span>
+            <span class="cmp-single-stat-value">${{ view.request.annualPremiumUsd?.toLocaleString() }}</span>
+          </div>
+        </div>
+
+        <div v-if="singleCarrier.ratesLine" class="cmp-single-rates">
+          <UIcon name="i-heroicons-information-circle" style="width: 14px; height: 14px; color: #01696f; flex-shrink: 0;" />
+          <span class="text-[12px] text-[var(--text-muted)]">{{ singleCarrier.ratesLine }}</span>
+        </div>
+
+        <!-- Projection table -->
+        <div v-if="singleCarrier.cells?.length" class="cmp-single-table-wrap">
+          <table class="cmp-single-table">
+            <thead>
+              <tr>
+                <th>Period</th>
+                <th>Age</th>
+                <th class="text-right">Guaranteed</th>
+                <th class="text-right">Projected</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="cell in singleCarrier.cells" :key="cell.yearLabel">
+                <td class="font-medium">{{ cell.yearLabel }}</td>
+                <td>{{ cell.ageLabel }}</td>
+                <td class="text-right tabular-nums">${{ cell.guaranteed?.toLocaleString() }}</td>
+                <td class="text-right tabular-nums font-medium" style="color: #01696f;">${{ cell.projected?.toLocaleString() }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-if="singleCarrier.highlightProjectedUsd" class="cmp-single-highlight">
+          <div>
+            <p class="text-[11px] font-semibold uppercase tracking-[0.04em] text-[#8a8a86]">Projected value</p>
+            <p class="text-[22px] font-semibold tabular-nums" style="color: #01696f;">${{ singleCarrier.highlightProjectedUsd?.toLocaleString() }}</p>
+          </div>
+          <p v-if="singleCarrier.highlightNote" class="text-[12px] text-[var(--text-muted)] mt-1">{{ singleCarrier.highlightNote }}</p>
+        </div>
+
+        <div v-if="singleCarrier.footnote" class="cmp-single-footnote">
+          {{ singleCarrier.footnote }}
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══════════════════════════════════════════════════ -->
+    <!--  ACCEPTANCE FLOW — the core of the sales pipeline  -->
+    <!-- ═══════════════════════════════════════════════════ -->
+    <div class="cmp-accept-section">
+      <div class="cmp-accept-head">
+        <div class="cmp-accept-icon" :class="acceptState === 'accepted' ? 'cmp-accept-icon-done' : ''">
+          <UIcon
+            :name="acceptState === 'accepted' ? 'i-heroicons-check-circle' : 'i-heroicons-hand-thumb-up'"
+            style="width: 20px; height: 20px;"
+          />
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="text-[14px] font-semibold text-[var(--text-primary)]">
+            {{ acceptState === 'accepted' ? 'Quote accepted' : 'Customer acceptance' }}
+          </p>
+          <p class="mt-0.5 text-[13px] text-[var(--text-muted)]">
+            {{ acceptState === 'accepted'
+              ? 'Solicitud auto-generated and sent to emissions queue.'
+              : 'When the customer confirms an option, mark it as accepted to auto-generate the solicitud and push it to emissions.'
+            }}
+          </p>
+        </div>
+        <span v-if="acceptState === 'accepted'" class="cmp-accept-badge-done">
+          <UIcon name="i-heroicons-check" style="width: 10px; height: 10px;" />
+          Accepted
+        </span>
+      </div>
+
+      <!-- State: pending — just the button -->
+      <div v-if="acceptState === 'pending'" class="cmp-accept-body">
+        <div class="cmp-accept-flow-hint">
+          <div class="cmp-flow-step">
+            <span class="cmp-flow-num">1</span>
+            <span>Customer reviews comparative</span>
+          </div>
+          <div class="cmp-flow-arrow">
+            <UIcon name="i-heroicons-arrow-right" style="width: 12px; height: 12px;" />
+          </div>
+          <div class="cmp-flow-step">
+            <span class="cmp-flow-num">2</span>
+            <span>Customer accepts an option</span>
+          </div>
+          <div class="cmp-flow-arrow">
+            <UIcon name="i-heroicons-arrow-right" style="width: 12px; height: 12px;" />
+          </div>
+          <div class="cmp-flow-step">
+            <span class="cmp-flow-num">3</span>
+            <span>Solicitud auto-sent → Emissions</span>
+          </div>
+        </div>
+        <div class="flex gap-2 pt-2">
+          <button type="button" class="cmp-accept-btn" @click="beginAcceptance">
+            <UIcon name="i-heroicons-hand-thumb-up" style="width: 14px; height: 14px;" />
+            Mark as accepted
+          </button>
+        </div>
+      </div>
+
+      <!-- State: selecting — pick the carrier option -->
+      <div v-if="acceptState === 'selecting'" class="cmp-accept-body">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.04em] text-[#8a8a86] mb-3">Which option did the customer accept?</p>
+        <div class="cmp-carrier-options">
+          <button
+            v-for="(carrier, idx) in view.carriers"
+            :key="idx"
+            type="button"
+            class="cmp-carrier-option"
+            :class="selectedCarrierIdx === idx ? 'cmp-carrier-selected' : ''"
+            @click="selectedCarrierIdx = idx"
+          >
+            <div class="cmp-carrier-radio">
+              <div v-if="selectedCarrierIdx === idx" class="cmp-carrier-radio-dot" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-[13px] font-semibold text-[var(--text-primary)]">{{ carrier.productName }}</p>
+              <p class="text-[11px] text-[var(--text-muted)] truncate">{{ carrier.carrierName }}</p>
+              <div class="mt-1 flex items-center gap-3 text-[11px] text-[var(--text-muted)]">
+                <span>SA: ${{ carrier.sumAssuredUsd?.toLocaleString() }}</span>
+                <span v-if="carrier.highlightProjectedUsd">Proj: ${{ carrier.highlightProjectedUsd?.toLocaleString() }}</span>
+              </div>
+            </div>
+            <UIcon
+              v-if="selectedCarrierIdx === idx"
+              name="i-heroicons-check-circle"
+              style="width: 20px; height: 20px; color: #01696f; flex-shrink: 0;"
+            />
+          </button>
+        </div>
+        <div class="flex gap-2 pt-3">
+          <button type="button" class="cmp-accept-btn" :class="selectedCarrierIdx === null ? 'cmp-btn-disabled' : ''" @click="confirmAcceptance">
+            <UIcon name="i-heroicons-paper-airplane" style="width: 14px; height: 14px;" />
+            Confirm acceptance & generate solicitud
+          </button>
+          <button type="button" class="cmp-cancel-btn" @click="cancelAcceptance">Cancel</button>
+        </div>
+      </div>
+
+      <!-- State: accepted — confirmation -->
+      <div v-if="acceptState === 'accepted'" class="cmp-accept-body">
+        <div class="cmp-accepted-summary">
+          <div class="cmp-accepted-row">
+            <span class="cmp-accepted-label">Customer</span>
+            <span class="cmp-accepted-value">{{ view.client.name }}</span>
+          </div>
+          <div class="cmp-accepted-row">
+            <span class="cmp-accepted-label">Accepted product</span>
+            <span class="cmp-accepted-value">{{ acceptedCarrier?.productName }}</span>
+          </div>
+          <div class="cmp-accepted-row">
+            <span class="cmp-accepted-label">Carrier</span>
+            <span class="cmp-accepted-value">{{ acceptedCarrier?.carrierName }}</span>
+          </div>
+          <div class="cmp-accepted-row">
+            <span class="cmp-accepted-label">Accepted at</span>
+            <span class="cmp-accepted-value">{{ acceptedAt?.slice(0, 16).replace('T', ' · ') }}</span>
+          </div>
+          <div class="cmp-accepted-row">
+            <span class="cmp-accepted-label">Bind token</span>
+            <span class="cmp-accepted-value font-mono text-[11px]">{{ bindToken }}</span>
+          </div>
+        </div>
+        <div class="cmp-auto-sent-banner">
+          <UIcon name="i-heroicons-bolt" style="width: 16px; height: 16px; color: #01696f; flex-shrink: 0;" />
+          <div class="min-w-0 flex-1">
+            <p class="text-[13px] font-semibold text-[var(--text-primary)]">Solicitud auto-generated</p>
+            <p class="text-[12px] text-[var(--text-muted)]">The required forms have been queued for emissions review. The customer will receive the solicitud documents for signature.</p>
+          </div>
+        </div>
+        <div class="flex flex-wrap gap-2 pt-2">
+          <button type="button" class="cmp-accept-btn" @click="goToEmissions">
+            <UIcon name="i-heroicons-queue-list" style="width: 14px; height: 14px;" />
+            View in emissions queue
+          </button>
+          <NuxtLink :to="`/onboarding/solicitud?bind=${bindToken}`">
+            <button type="button" class="cmp-cancel-btn">
+              <UIcon name="i-heroicons-pencil-square" style="width: 12px; height: 12px;" />
+              Open solicitud form
+            </button>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Manual path (always available) ── -->
+    <div class="cmp-manual-card">
+      <div class="cmp-manual-head">
+        <UIcon name="i-heroicons-link" style="width: 16px; height: 16px; color: #8a8a86;" />
+        <span class="text-[13px] font-semibold text-[var(--text-primary)]">Manual solicitud path</span>
+      </div>
+      <div class="cmp-manual-body">
+        <p class="text-[13px] text-[var(--text-muted)]">
+          Need to handle things manually? Generate a broker intake link or go directly to the solicitud form. This path is always available regardless of acceptance status.
+        </p>
+        <div class="mt-3 flex flex-wrap gap-2">
+          <button type="button" class="cmp-accept-btn cmp-btn-neutral" @click="generateIntakeLink">
+            <UIcon name="i-heroicons-link" style="width: 14px; height: 14px;" />
+            Copy intake link
+          </button>
+          <NuxtLink to="/onboarding/solicitud">
+            <button type="button" class="cmp-cancel-btn">
+              <UIcon name="i-heroicons-arrow-right" style="width: 12px; height: 12px;" />
+              Open blank solicitud
+            </button>
+          </NuxtLink>
+          <NuxtLink v-if="bindToken && acceptState !== 'accepted'" :to="`/onboarding/solicitud?bind=${bindToken}`" target="_blank">
+            <button type="button" class="cmp-cancel-btn">Open with bind token</button>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* ── Deal picker ── */
+.cmp-deal-picker {
+  padding: 12px 16px; border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+.cmp-deal-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 12px; border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  font-size: 12px; color: var(--text-primary);
+  cursor: pointer; transition: all 150ms ease;
+}
+.cmp-deal-chip:hover { border-color: rgba(1,105,111,0.2); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
+
+/* ── Acceptance section ── */
+.cmp-accept-section {
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.cmp-accept-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.cmp-accept-icon {
+  width: 36px; height: 36px;
+  border-radius: 10px;
+  background: rgba(1,105,111,0.06);
+  color: #01696f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.cmp-accept-icon-done {
+  background: rgba(15,123,95,0.08);
+  color: #0f7b5f;
+}
+.cmp-accept-body {
+  padding: 20px;
+}
+.cmp-accept-badge-done {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 600;
+  background: rgba(15,123,95,0.08);
+  color: #0f7b5f;
+  white-space: nowrap;
+}
+
+/* ── Flow hint ── */
+.cmp-accept-flow-hint {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: rgba(0,0,0,0.015);
+  border: 1px solid rgba(0,0,0,0.04);
+}
+.cmp-flow-step {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.cmp-flow-num {
+  width: 20px; height: 20px;
+  border-radius: 50%;
+  background: rgba(1,105,111,0.08);
+  color: #01696f;
+  font-size: 10px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.cmp-flow-arrow {
+  color: #c0c0bc;
+  display: flex;
+  align-items: center;
+}
+
+/* ── Carrier option cards ── */
+.cmp-carrier-options {
+  display: grid;
+  gap: 8px;
+}
+.cmp-carrier-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  cursor: pointer;
+  transition: all 150ms ease;
+  text-align: left;
+}
+.cmp-carrier-option:hover {
+  border-color: rgba(1,105,111,0.15);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+.cmp-carrier-selected {
+  border-color: #01696f;
+  background: rgba(1,105,111,0.015);
+  box-shadow: 0 0 0 1px #01696f;
+}
+.cmp-carrier-radio {
+  width: 18px; height: 18px;
+  border-radius: 50%;
+  border: 2px solid rgba(0,0,0,0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: border-color 150ms ease;
+}
+.cmp-carrier-selected .cmp-carrier-radio {
+  border-color: #01696f;
+}
+.cmp-carrier-radio-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: #01696f;
+}
+
+/* ── Buttons ── */
+.cmp-accept-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  background: #01696f;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.cmp-accept-btn:hover { background: #015458; }
+.cmp-btn-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.cmp-btn-neutral {
+  background: #fff;
+  color: var(--text-primary);
+  border: 1px solid rgba(0,0,0,0.1);
+}
+.cmp-btn-neutral:hover {
+  border-color: rgba(0,0,0,0.2);
+  background: rgba(0,0,0,0.02);
+}
+.cmp-cancel-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.08);
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.cmp-cancel-btn:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+
+/* ── Accepted summary ── */
+.cmp-accepted-summary {
+  display: grid;
+  gap: 6px;
+  padding: 14px 16px;
+  border-radius: 8px;
+  background: rgba(15,123,95,0.02);
+  border: 1px solid rgba(15,123,95,0.08);
+}
+.cmp-accepted-row {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+}
+.cmp-accepted-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: #8a8a86;
+  min-width: 120px;
+  flex-shrink: 0;
+}
+.cmp-accepted-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.cmp-auto-sent-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+  padding: 12px 14px;
+  border-radius: 8px;
+  background: rgba(1,105,111,0.03);
+  border: 1px solid rgba(1,105,111,0.1);
+}
+
+/* ── Manual card ── */
+.cmp-manual-card {
+  border-radius: 12px;
+  border: 1px dashed rgba(0,0,0,0.1);
+  background: rgba(0,0,0,0.01);
+  overflow: hidden;
+}
+.cmp-manual-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  border-bottom: 1px dashed rgba(0,0,0,0.06);
+}
+.cmp-manual-body {
+  padding: 16px 20px;
+}
+
+/* ── Process note ── */
+.cmp-process-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: 10px;
+  background: rgba(124,58,237,0.03);
+  border: 1px solid rgba(124,58,237,0.1);
+}
+
+/* ── Mode toggle ── */
+.cmp-mode-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.cmp-mode-tabs {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0,0,0,0.04);
+}
+.cmp-mode-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 7px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.cmp-mode-on {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+.cmp-mode-off {
+  background: transparent;
+  color: var(--text-muted);
+}
+.cmp-mode-off:hover { color: var(--text-primary); }
+
+/* ── Single proposal ── */
+.cmp-single-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.cmp-single-head {}
+.cmp-single-options {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.cmp-single-option {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 16px;
+  border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  cursor: pointer;
+  transition: all 150ms ease;
+  text-align: left;
+}
+.cmp-single-option:hover {
+  border-color: rgba(1,105,111,0.15);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+.cmp-single-selected {
+  border-color: #01696f;
+  background: rgba(1,105,111,0.015);
+  box-shadow: 0 0 0 1px #01696f;
+}
+
+.cmp-single-card {
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.cmp-single-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 24px;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.cmp-single-client {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1px;
+  background: rgba(0,0,0,0.04);
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+@media (max-width: 640px) { .cmp-single-client { grid-template-columns: repeat(2, 1fr); } }
+.cmp-single-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 14px 20px;
+  background: #fff;
+}
+.cmp-single-stat-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+}
+.cmp-single-stat-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+}
+.cmp-single-rates {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  background: rgba(1,105,111,0.02);
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.cmp-single-table-wrap {
+  padding: 0;
+  overflow-x: auto;
+}
+.cmp-single-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.cmp-single-table th {
+  text-align: left;
+  padding: 10px 24px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.cmp-single-table td {
+  padding: 12px 24px;
+  font-size: 13px;
+  color: var(--text-primary);
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+}
+.cmp-single-table tr:last-child td { border-bottom: none; }
+.cmp-single-table tr:hover td { background: rgba(0,0,0,0.01); }
+
+.cmp-single-highlight {
+  padding: 20px 24px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+  background: rgba(1,105,111,0.015);
+}
+.cmp-single-footnote {
+  padding: 12px 24px;
+  font-size: 11px;
+  color: var(--text-muted);
+  border-top: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.01);
+}
+</style>
diff --git a/app/pages/quotes/custom/index.vue b/app/pages/quotes/custom/index.vue
new file mode 100644
index 0000000..54e7b9c
--- /dev/null
+++ b/app/pages/quotes/custom/index.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+usePageTitle('Quotes · Custom')
+
+const toast = useToast()
+
+const form = reactive({
+  clientName: '',
+  clientEmail: '',
+  clientPhone: '',
+  lineOfBusiness: '',
+  policyType: '',
+  carrier: '',
+  startDate: '',
+  endDate: '',
+  sumInsured: null as number | null,
+  premium: null as number | null,
+  commissionPct: null as number | null,
+  deductible: null as number | null,
+  notes: ''
+})
+
+const commissionAmount = computed(() => {
+  if (form.premium && form.commissionPct) return ((form.premium * form.commissionPct) / 100).toFixed(2)
+  return '0.00'
+})
+
+const linesOfBusiness = ['Auto', 'Health', 'Life', 'Property', 'Liability', 'Marine', 'Surety', 'Other']
+
+const inputCls = 'w-full rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)]'
+const labelCls = 'block text-sm font-semibold text-[var(--text-muted)] mb-1.5'
+
+async function save() {
+  if (!form.clientName.trim() || !form.lineOfBusiness) {
+    toast.add({ title: 'Missing fields', description: 'Client name and line of business are required.', color: 'warning' })
+    return
+  }
+  toast.add({ title: 'Quote saved', description: 'Your custom quote has been recorded.', color: 'success' })
+  await navigateTo('/quotes')
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl space-y-6 pb-12">
+    <NuxtLink to="/quotes" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Back to quotes</UButton>
+    </NuxtLink>
+
+    <div>
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Custom quote entry</h1>
+      <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+        Manually enter a quote for any line of business — quick single-page form.
+      </p>
+    </div>
+
+    <UCard :ui="{ body: { padding: 'p-5 sm:p-6' } }">
+      <template #header>
+        <div>
+          <p class="text-xs font-medium text-[var(--text-muted)]">Client</p>
+          <h2 class="mt-0.5 text-lg font-semibold text-[var(--text-primary)]">Client information</h2>
+        </div>
+      </template>
+
+      <div class="grid gap-4 sm:grid-cols-3">
+        <div>
+          <label :class="labelCls">Client name *</label>
+          <input v-model="form.clientName" :class="inputCls" placeholder="Full name" />
+        </div>
+        <div>
+          <label :class="labelCls">Email</label>
+          <input v-model="form.clientEmail" type="email" :class="inputCls" placeholder="client@example.com" />
+        </div>
+        <div>
+          <label :class="labelCls">Phone</label>
+          <input v-model="form.clientPhone" type="tel" :class="inputCls" placeholder="+1 (555) 000-0000" />
+        </div>
+      </div>
+    </UCard>
+
+    <UCard :ui="{ body: { padding: 'p-5 sm:p-6' } }">
+      <template #header>
+        <div>
+          <p class="text-xs font-medium text-[var(--text-muted)]">Policy</p>
+          <h2 class="mt-0.5 text-lg font-semibold text-[var(--text-primary)]">Policy details</h2>
+        </div>
+      </template>
+
+      <div class="space-y-4">
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div>
+            <label :class="labelCls">Line of business *</label>
+            <select v-model="form.lineOfBusiness" :class="inputCls">
+              <option value="" disabled>Select line</option>
+              <option v-for="l in linesOfBusiness" :key="l" :value="l">{{ l }}</option>
+            </select>
+          </div>
+          <div>
+            <label :class="labelCls">Policy type / description</label>
+            <input v-model="form.policyType" :class="inputCls" placeholder="e.g. Comprehensive auto" />
+          </div>
+        </div>
+
+        <div class="grid gap-4 sm:grid-cols-3">
+          <div>
+            <label :class="labelCls">Carrier</label>
+            <input v-model="form.carrier" :class="inputCls" placeholder="Carrier name" />
+          </div>
+          <div>
+            <label :class="labelCls">Start date</label>
+            <input v-model="form.startDate" type="date" :class="inputCls" />
+          </div>
+          <div>
+            <label :class="labelCls">End date</label>
+            <input v-model="form.endDate" type="date" :class="inputCls" />
+          </div>
+        </div>
+
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div>
+            <label :class="labelCls">Sum insured / limit</label>
+            <input v-model.number="form.sumInsured" type="number" :class="inputCls" placeholder="0.00" min="0" step="0.01" />
+          </div>
+          <div>
+            <label :class="labelCls">Deductible</label>
+            <input v-model.number="form.deductible" type="number" :class="inputCls" placeholder="0.00" min="0" step="0.01" />
+          </div>
+        </div>
+
+        <div class="grid gap-4 sm:grid-cols-3">
+          <div>
+            <label :class="labelCls">Premium</label>
+            <input v-model.number="form.premium" type="number" :class="inputCls" placeholder="0.00" min="0" step="0.01" />
+          </div>
+          <div>
+            <label :class="labelCls">Commission %</label>
+            <input v-model.number="form.commissionPct" type="number" :class="inputCls" placeholder="0" min="0" max="100" step="0.1" />
+          </div>
+          <div>
+            <label :class="labelCls">Commission amount</label>
+            <div :class="[inputCls, 'flex items-center bg-[var(--brand-soft)]/30 font-medium']">
+              {{ commissionAmount }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </UCard>
+
+    <UCard :ui="{ body: { padding: 'p-5 sm:p-6' } }">
+      <template #header>
+        <div>
+          <p class="text-xs font-medium text-[var(--text-muted)]">Notes</p>
+          <h2 class="mt-0.5 text-lg font-semibold text-[var(--text-primary)]">Special conditions</h2>
+        </div>
+      </template>
+
+      <div>
+        <label :class="labelCls">Special conditions / notes</label>
+        <textarea v-model="form.notes" :class="inputCls" rows="4" placeholder="Any additional terms, conditions, or notes..." />
+      </div>
+    </UCard>
+
+    <div class="flex items-center justify-between">
+      <NuxtLink to="/quotes">
+        <UButton color="neutral" variant="ghost" size="sm">Cancel</UButton>
+      </NuxtLink>
+      <UButton color="primary" @click="save">Save quote</UButton>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/quotes/general-risk/index.vue b/app/pages/quotes/general-risk/index.vue
new file mode 100644
index 0000000..d3a9b66
--- /dev/null
+++ b/app/pages/quotes/general-risk/index.vue
@@ -0,0 +1,321 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+
+usePageTitle('Quotes · General Risk')
+
+const STEP_ORDER = ['setup', 'details', 'review'] as const
+type StepId = (typeof STEP_ORDER)[number]
+
+const STEP_LABELS: Record<StepId, string> = {
+  setup: 'Quote setup',
+  details: 'Risk details',
+  review: 'Review & submit'
+}
+
+const step = ref<StepId>('setup')
+const maxStepIndex = ref(0)
+const busy = ref(false)
+const toast = useToast()
+
+const form = reactive({
+  quoteType: '' as '' | 'single' | 'comparative',
+  riskCategory: '' as '' | 'property' | 'liability' | 'fire' | 'all-risk' | 'commercial' | 'other',
+  clientName: '',
+  clientEmail: '',
+  clientPhone: '',
+  clientOrganization: '',
+  propertyAddress: '',
+  propertyDescription: '',
+  sumInsured: '',
+  coverageStart: '',
+  coverageEnd: '',
+  specialConditions: '',
+  deductible: ''
+})
+
+const inputClass = 'w-full rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)]'
+const labelClass = 'block text-sm font-semibold text-[var(--text-muted)] mb-1.5'
+
+function canProceedFromSetup() {
+  if (!form.quoteType) {
+    toast.add({ title: 'Choose quote type', description: 'Single or comparative.', color: 'warning' })
+    return false
+  }
+  if (!form.riskCategory) {
+    toast.add({ title: 'Choose risk category', description: 'Select the type of risk.', color: 'warning' })
+    return false
+  }
+  if (!form.clientName.trim() || !form.clientEmail.trim()) {
+    toast.add({ title: 'Client info required', description: 'Name and email are needed.', color: 'warning' })
+    return false
+  }
+  return true
+}
+
+function canProceedFromDetails() {
+  if (!form.sumInsured) {
+    toast.add({ title: 'Sum insured required', description: 'Enter the total sum insured.', color: 'warning' })
+    return false
+  }
+  if (!form.coverageStart || !form.coverageEnd) {
+    toast.add({ title: 'Coverage period required', description: 'Enter start and end dates.', color: 'warning' })
+    return false
+  }
+  return true
+}
+
+function onStepPillClick(idx: number, target: StepId) {
+  if (idx > maxStepIndex.value) return
+  step.value = target
+}
+
+function goPrev() {
+  const i = STEP_ORDER.indexOf(step.value)
+  if (i <= 0) return
+  step.value = STEP_ORDER[i - 1]!
+}
+
+function goNext() {
+  const i = STEP_ORDER.indexOf(step.value)
+  if (step.value === 'setup' && !canProceedFromSetup()) return
+  if (step.value === 'details' && !canProceedFromDetails()) return
+  if (i >= STEP_ORDER.length - 1) return
+  const next = STEP_ORDER[i + 1]!
+  step.value = next
+  maxStepIndex.value = Math.max(maxStepIndex.value, i + 1)
+}
+
+async function finalize() {
+  if (busy.value) return
+  busy.value = true
+  try {
+    toast.add({
+      title: 'General risk quote submitted',
+      description: 'Your quote request has been recorded and is ready for placement.',
+      color: 'success'
+    })
+    await nextTick()
+    await navigateTo('/quotes')
+  } finally {
+    busy.value = false
+  }
+}
+
+const riskCategoryLabel: Record<string, string> = {
+  property: 'Property', liability: 'Liability', fire: 'Fire',
+  'all-risk': 'All-Risk', commercial: 'Commercial', other: 'Other'
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl space-y-6 pb-12">
+    <NuxtLink to="/quotes" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Back to quotes</UButton>
+    </NuxtLink>
+
+    <div class="max-w-2xl">
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">General risk quoting</h1>
+      <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+        Property, liability, fire, all-risk, and commercial lines — set up, detail, review.
+      </p>
+    </div>
+
+    <div
+      class="flex flex-wrap items-center gap-x-1 gap-y-2 text-[11px] font-medium text-[var(--text-muted)] sm:text-xs"
+      role="navigation"
+      aria-label="Steps"
+    >
+      <template v-for="(s, idx) in STEP_ORDER" :key="s">
+        <UIcon v-if="idx > 0" name="i-heroicons-chevron-right" class="h-3 w-3 shrink-0 opacity-40" aria-hidden="true" />
+        <button
+          type="button"
+          class="min-w-0 rounded-full px-2 py-1 text-left transition sm:px-2.5"
+          :class="
+            step === s
+              ? 'bg-[var(--brand-soft)] text-[var(--brand)]'
+              : idx <= maxStepIndex
+                ? 'cursor-pointer bg-[var(--sidebar-border)]/60 hover:bg-[var(--brand-soft)]/80 hover:text-[var(--brand)]'
+                : 'cursor-default bg-[var(--sidebar-border)]/60 opacity-50'
+          "
+          :aria-current="step === s ? 'step' : undefined"
+          @click.prevent.stop="onStepPillClick(idx, s)"
+        >
+          <span class="hidden sm:inline">{{ idx + 1 }}. {{ STEP_LABELS[s] }}</span>
+          <span class="sm:hidden">{{ idx + 1 }}</span>
+        </button>
+      </template>
+    </div>
+
+    <UCard :ui="{ body: { padding: 'p-5 sm:p-6' } }">
+      <template #header>
+        <div>
+          <p class="text-xs font-medium text-[var(--text-muted)]">
+            Step {{ STEP_ORDER.indexOf(step) + 1 }} of {{ STEP_ORDER.length }}
+          </p>
+          <h2 class="mt-0.5 text-lg font-semibold text-[var(--text-primary)]">{{ STEP_LABELS[step] }}</h2>
+        </div>
+      </template>
+
+      <!-- Step 1: Quote setup -->
+      <div v-if="step === 'setup'" class="space-y-10">
+        <section class="space-y-4">
+          <div>
+            <h3 class="text-base font-semibold text-[var(--text-primary)]">Quote type</h3>
+            <p class="mt-1 text-sm text-[var(--text-muted)]">Single placement or comparative — comparative sends the same risk to multiple carriers.</p>
+          </div>
+          <div class="grid gap-3 sm:grid-cols-2">
+            <button
+              v-for="opt in [
+                { id: 'single', label: 'Single quote', hint: 'One risk, one placement.', icon: 'i-heroicons-document-text' },
+                { id: 'comparative', label: 'Comparative quote', hint: 'Same risk sent to multiple carriers.', icon: 'i-heroicons-document-duplicate' }
+              ]"
+              :key="opt.id" type="button"
+              class="group rounded-xl border p-5 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+              :class="form.quoteType === opt.id ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30' : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'"
+              @click="form.quoteType = opt.id as 'single' | 'comparative'"
+            >
+              <div class="flex items-start gap-3">
+                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-faint)] text-[var(--brand)]">
+                  <UIcon :name="opt.icon" class="h-5 w-5" />
+                </div>
+                <div class="min-w-0">
+                  <p class="font-semibold text-[var(--text-primary)]">{{ opt.label }}</p>
+                  <p class="mt-1 text-sm text-[var(--text-muted)]">{{ opt.hint }}</p>
+                </div>
+              </div>
+            </button>
+          </div>
+        </section>
+
+        <section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
+          <div>
+            <h3 class="text-base font-semibold text-[var(--text-primary)]">Risk category</h3>
+            <p class="mt-1 text-sm text-[var(--text-muted)]">What type of risk are you quoting?</p>
+          </div>
+          <div class="grid gap-3 sm:grid-cols-3">
+            <button
+              v-for="cat in [
+                { id: 'property', icon: 'i-heroicons-building-office-2' },
+                { id: 'liability', icon: 'i-heroicons-shield-exclamation' },
+                { id: 'fire', icon: 'i-heroicons-fire' },
+                { id: 'all-risk', icon: 'i-heroicons-shield-check' },
+                { id: 'commercial', icon: 'i-heroicons-building-storefront' },
+                { id: 'other', icon: 'i-heroicons-ellipsis-horizontal-circle' }
+              ]"
+              :key="cat.id" type="button"
+              class="rounded-xl border p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+              :class="form.riskCategory === cat.id ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30' : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'"
+              @click="form.riskCategory = cat.id as typeof form.riskCategory"
+            >
+              <UIcon :name="cat.icon" class="h-7 w-7 text-[var(--brand)]" />
+              <p class="mt-2 text-sm font-semibold text-[var(--text-primary)]">{{ riskCategoryLabel[cat.id] }}</p>
+            </button>
+          </div>
+        </section>
+
+        <section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
+          <h3 class="text-base font-semibold text-[var(--text-primary)]">Client information</h3>
+          <div class="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label :class="labelClass">Full name</label>
+              <input v-model="form.clientName" type="text" :class="inputClass" placeholder="Jane Doe" />
+            </div>
+            <div>
+              <label :class="labelClass">Email</label>
+              <input v-model="form.clientEmail" type="email" :class="inputClass" placeholder="jane@example.com" />
+            </div>
+            <div>
+              <label :class="labelClass">Phone</label>
+              <input v-model="form.clientPhone" type="tel" :class="inputClass" placeholder="+27 82 000 0000" />
+            </div>
+            <div>
+              <label :class="labelClass">Organization</label>
+              <input v-model="form.clientOrganization" type="text" :class="inputClass" placeholder="Acme Corp" />
+            </div>
+          </div>
+        </section>
+      </div>
+      <!-- Step 2: Risk details -->
+      <div v-else-if="step === 'details'" class="space-y-6">
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div class="sm:col-span-2">
+            <label :class="labelClass">Property / risk address</label>
+            <input v-model="form.propertyAddress" type="text" :class="inputClass" placeholder="123 Main St, Johannesburg" />
+          </div>
+          <div class="sm:col-span-2">
+            <label :class="labelClass">Risk description</label>
+            <textarea v-model="form.propertyDescription" :class="inputClass" rows="3" placeholder="Describe the property or risk in detail" />
+          </div>
+          <div>
+            <label :class="labelClass">Sum insured (ZAR)</label>
+            <input v-model="form.sumInsured" type="number" :class="inputClass" placeholder="1 000 000" />
+          </div>
+          <div>
+            <label :class="labelClass">Deductible (ZAR)</label>
+            <input v-model="form.deductible" type="number" :class="inputClass" placeholder="10 000" />
+          </div>
+          <div>
+            <label :class="labelClass">Coverage start</label>
+            <input v-model="form.coverageStart" type="date" :class="inputClass" />
+          </div>
+          <div>
+            <label :class="labelClass">Coverage end</label>
+            <input v-model="form.coverageEnd" type="date" :class="inputClass" />
+          </div>
+          <div class="sm:col-span-2">
+            <label :class="labelClass">Special conditions</label>
+            <textarea v-model="form.specialConditions" :class="inputClass" rows="3" placeholder="Any special conditions, endorsements, or exclusions" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Step 3: Review & submit -->
+      <div v-else-if="step === 'review'" class="space-y-5">
+        <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
+          <p class="text-sm font-semibold text-[var(--text-muted)] mb-3">Quote setup</p>
+          <dl class="grid gap-x-6 gap-y-2 text-sm sm:grid-cols-2">
+            <div><dt class="text-[var(--text-muted)]">Quote type</dt><dd class="font-medium text-[var(--text-primary)] capitalize">{{ form.quoteType || '—' }}</dd></div>
+            <div><dt class="text-[var(--text-muted)]">Risk category</dt><dd class="font-medium text-[var(--text-primary)]">{{ riskCategoryLabel[form.riskCategory] || '—' }}</dd></div>
+            <div><dt class="text-[var(--text-muted)]">Client</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.clientName || '—' }}</dd></div>
+            <div><dt class="text-[var(--text-muted)]">Email</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.clientEmail || '—' }}</dd></div>
+            <div><dt class="text-[var(--text-muted)]">Phone</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.clientPhone || '—' }}</dd></div>
+            <div><dt class="text-[var(--text-muted)]">Organization</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.clientOrganization || '—' }}</dd></div>
+          </dl>
+        </div>
+        <div class="rounded-xl border border-[var(--sidebar-border)] bg-[var(--surface)] p-4">
+          <p class="text-sm font-semibold text-[var(--text-muted)] mb-3">Risk details</p>
+          <dl class="grid gap-x-6 gap-y-2 text-sm sm:grid-cols-2">
+            <div class="sm:col-span-2"><dt class="text-[var(--text-muted)]">Address</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.propertyAddress || '—' }}</dd></div>
+            <div class="sm:col-span-2"><dt class="text-[var(--text-muted)]">Description</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.propertyDescription || '—' }}</dd></div>
+            <div><dt class="text-[var(--text-muted)]">Sum insured</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.sumInsured ? `R ${Number(form.sumInsured).toLocaleString()}` : '—' }}</dd></div>
+            <div><dt class="text-[var(--text-muted)]">Deductible</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.deductible ? `R ${Number(form.deductible).toLocaleString()}` : '—' }}</dd></div>
+            <div><dt class="text-[var(--text-muted)]">Coverage start</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.coverageStart || '—' }}</dd></div>
+            <div><dt class="text-[var(--text-muted)]">Coverage end</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.coverageEnd || '—' }}</dd></div>
+            <div v-if="form.specialConditions" class="sm:col-span-2"><dt class="text-[var(--text-muted)]">Special conditions</dt><dd class="font-medium text-[var(--text-primary)]">{{ form.specialConditions }}</dd></div>
+          </dl>
+        </div>
+      </div>
+    </UCard>
+
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <UButton v-if="step !== 'setup'" type="button" color="neutral" variant="soft" @click="goPrev">Back</UButton>
+      <NuxtLink v-else to="/quotes" class="inline-flex">
+        <UButton color="neutral" variant="ghost" size="sm">Cancel</UButton>
+      </NuxtLink>
+
+      <div class="flex flex-wrap gap-2">
+        <UButton v-if="step !== 'review'" type="button" color="primary" @click="goNext">Continue</UButton>
+        <UButton
+          v-else
+          type="button"
+          color="primary"
+          :loading="busy"
+          :disabled="busy"
+          @click="finalize"
+        >
+          Finalize quote
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/quotes/health/index.vue b/app/pages/quotes/health/index.vue
new file mode 100644
index 0000000..8ac6c5d
--- /dev/null
+++ b/app/pages/quotes/health/index.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { emptyHealthQuoteDraft } from '~/composables/useHealthQuoteDraft'
+import type { HealthQuoteIntakePayload, HealthQuoteMode, HealthQuoteSegment } from '~/types/health-quote-intake'
+
+definePageMeta({ ssr: false })
+
+usePageTitle('Quotes · Health')
+
+const STEP_ORDER = ['setup', 'solicit', 'acceptance'] as const
+type StepId = (typeof STEP_ORDER)[number]
+
+const STEP_LABELS: Record<StepId, string> = {
+  setup: 'Quote setup',
+  solicit: 'Carriers to quote',
+  acceptance: 'Acceptance'
+}
+
+const step = ref<StepId>('setup')
+const maxStepIndex = ref(0)
+const intakeBusy = ref(false)
+
+const draft = reactive(emptyHealthQuoteDraft())
+
+const toast = useToast()
+const { quoteRequestEmailEnabled } = useQuoteRequestEmailEnabled()
+
+const modeCards: { id: HealthQuoteMode; title: string; hint: string; icon: string }[] = [
+  {
+    id: 'single',
+    title: 'Single quote',
+    hint: 'One benefit package per carrier request.',
+    icon: 'i-heroicons-document-text'
+  },
+  {
+    id: 'comparative_pdf',
+    title: 'Comparative quote',
+    hint: 'Same census and coverage intent; fill the comparative sheet when rates arrive.',
+    icon: 'i-heroicons-document-duplicate'
+  }
+]
+
+const segmentCards: { id: HealthQuoteSegment; title: string; hint: string; icon: string }[] = [
+  {
+    id: 'individual',
+    title: 'Individual',
+    hint: 'Retail medical.',
+    icon: 'i-heroicons-user'
+  },
+  {
+    id: 'corporate',
+    title: 'Corporate',
+    hint: 'Employer-sponsored.',
+    icon: 'i-heroicons-building-office-2'
+  },
+  {
+    id: 'group',
+    title: 'Group policy',
+    hint: 'Trust or association block.',
+    icon: 'i-heroicons-user-group'
+  }
+]
+
+function canProceedFromCustomer() {
+  const c = draft.client
+  if (!c.fullName.trim() || !c.email.trim()) {
+    toast.add({
+      title: 'Add legal name and email',
+      description: 'We need them for notifications and the quote file.',
+      color: 'warning'
+    })
+    return false
+  }
+  return true
+}
+
+function canProceedFromSetup() {
+  if (!draft.quoteMode) {
+    toast.add({ title: 'Choose quote type', description: 'Single or comparative.', color: 'warning' })
+    return false
+  }
+  if (!draft.segment) {
+    toast.add({ title: 'Choose policy type', description: 'Individual, corporate, or group.', color: 'warning' })
+    return false
+  }
+  if (!canProceedFromCustomer()) return false
+  if (
+    (draft.segment === 'corporate' || draft.segment === 'group') &&
+    !draft.client.organizationName?.trim()
+  ) {
+    toast.add({
+      title: 'Add organization',
+      description: 'Required for corporate and group policies.',
+      color: 'warning'
+    })
+    return false
+  }
+  if (!draft.health.dateOfBirth) {
+    toast.add({
+      title: 'Add date of birth',
+      description: 'Age is required for health underwriting and rate-band lookup.',
+      color: 'warning'
+    })
+    return false
+  }
+  if (!draft.health.coverageArea || !draft.health.networkTier || !draft.health.deductible) {
+    toast.add({
+      title: 'Complete coverage intent',
+      description: 'Select coverage area, network tier, and deductible.',
+      color: 'warning'
+    })
+    return false
+  }
+  if (!draft.forms.medicalQuestionnaire || !draft.forms.beneficiaryDesignation) {
+    toast.add({
+      title: 'Confirm forms',
+      description: 'Check off medical questionnaire and beneficiary designation.',
+      color: 'warning'
+    })
+    return false
+  }
+  if (draft.segment === 'group' && !draft.forms.groupCensus) {
+    toast.add({
+      title: 'Group census required',
+      description: 'Confirm the employee roster / census for group policies.',
+      color: 'warning'
+    })
+    return false
+  }
+  return true
+}
+
+function canProceedFromSolicit() {
+  if (draft.solicit.carrierIds.length === 0 || draft.solicit.planIds.length === 0) {
+    toast.add({
+      title: 'Choose carriers and plans',
+      description: 'Select at least one carrier and one plan shell.',
+      color: 'warning'
+    })
+    return false
+  }
+  return true
+}
+
+function goToStep(target: StepId) {
+  const ti = STEP_ORDER.indexOf(target)
+  if (ti > maxStepIndex.value) return
+  step.value = target
+}
+
+function onStepPillClick(stepIndex: number, target: StepId) {
+  if (stepIndex > maxStepIndex.value) return
+  goToStep(target)
+}
+
+function goPrev() {
+  const i = STEP_ORDER.indexOf(step.value)
+  if (i <= 0) return
+  step.value = STEP_ORDER[i - 1]!
+}
+
+function goNext() {
+  const i = STEP_ORDER.indexOf(step.value)
+  if (step.value === 'setup' && !canProceedFromSetup()) return
+  if (step.value === 'solicit' && !canProceedFromSolicit()) return
+  if (i >= STEP_ORDER.length - 1) return
+  const next = STEP_ORDER[i + 1]!
+  step.value = next
+  maxStepIndex.value = Math.max(maxStepIndex.value, i + 1)
+}
+
+function buildPayload(): HealthQuoteIntakePayload {
+  return {
+    quoteMode: draft.quoteMode!,
+    segment: draft.segment!,
+    client: { ...draft.client },
+    health: { ...draft.health },
+    solicit: {
+      carrierIds: [...draft.solicit.carrierIds],
+      planIds: [...draft.solicit.planIds]
+    }
+  }
+}
+
+async function finalize() {
+  if (!draft.quoteMode || !draft.segment) return
+  if (intakeBusy.value) return
+  intakeBusy.value = true
+  try {
+    const payload = buildPayload()
+    const emailOn = quoteRequestEmailEnabled.value
+
+    if (payload.quoteMode === 'comparative_pdf') {
+      toast.add({
+        title: emailOn ? 'Quote requests queued' : 'Comparative run saved',
+        description: emailOn
+          ? 'Opening the comparative sheet. Provider emails follow your Settings → Quote requests toggle.'
+          : 'Emails to providers are disabled — comparative layout saved for manual or table pricing.',
+        color: 'success'
+      })
+      await nextTick()
+      await navigateTo({
+        path: '/quotes/compare',
+        query: { from: 'health', segment: payload.segment }
+      })
+      return
+    }
+    toast.add({
+      title: emailOn ? 'Quote requests recorded' : 'Quote run saved (no emails)',
+      description: emailOn
+        ? 'Requests can be sent to carrier quoting addresses on file when your integration is on.'
+        : 'Outbound provider email is off in Settings — this request stays in-app for tables, APIs, or AI.',
+      color: 'success'
+    })
+  } finally {
+    intakeBusy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl space-y-6 pb-12">
+    <NuxtLink to="/quotes" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Back to quotes</UButton>
+    </NuxtLink>
+
+    <div class="max-w-2xl">
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Health quoting</h1>
+      <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+        Set up the member, complete forms, pick carriers, then accept — three steps.
+      </p>
+    </div>
+
+    <div
+      class="flex flex-wrap items-center gap-x-1 gap-y-2 text-[11px] font-medium text-[var(--text-muted)] sm:text-xs"
+      role="navigation"
+      aria-label="Steps"
+    >
+      <template v-for="(s, idx) in STEP_ORDER" :key="s">
+        <UIcon v-if="idx > 0" name="i-heroicons-chevron-right" class="h-3 w-3 shrink-0 opacity-40" aria-hidden="true" />
+        <button
+          type="button"
+          class="min-w-0 rounded-full px-2 py-1 text-left transition sm:px-2.5"
+          :class="
+            step === s
+              ? 'bg-[var(--brand-soft)] text-[var(--brand)]'
+              : idx <= maxStepIndex
+                ? 'cursor-pointer bg-[var(--sidebar-border)]/60 hover:bg-[var(--brand-soft)]/80 hover:text-[var(--brand)]'
+                : 'cursor-default bg-[var(--sidebar-border)]/60 opacity-50'
+          "
+          :aria-current="step === s ? 'step' : undefined"
+          @click.prevent.stop="onStepPillClick(idx, s)"
+        >
+          <span class="hidden sm:inline">{{ idx + 1 }}. {{ STEP_LABELS[s] }}</span>
+          <span class="sm:hidden">{{ idx + 1 }}</span>
+        </button>
+      </template>
+    </div>
+
+    <UCard :ui="{ body: { padding: 'p-5 sm:p-6' } }">
+      <template #header>
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">
+            Step {{ STEP_ORDER.indexOf(step) + 1 }} of {{ STEP_ORDER.length }}
+          </p>
+          <h2 class="mt-0.5 text-lg font-semibold text-[var(--text-primary)]">{{ STEP_LABELS[step] }}</h2>
+        </div>
+      </template>
+
+      <QuotesHealthSetupStep
+        v-if="step === 'setup'"
+        :draft="draft"
+        :mode-cards="modeCards"
+        :segment-cards="segmentCards"
+      />
+
+      <QuotesHealthSolicitQuotesStep
+        v-else-if="step === 'solicit' && draft.quoteMode"
+        :draft="draft"
+        :quote-mode="draft.quoteMode"
+      />
+
+      <QuotesHealthAcceptanceStep
+        v-else-if="step === 'acceptance' && draft.quoteMode && draft.segment"
+        :draft="draft"
+        :quote-mode="draft.quoteMode"
+        :segment="draft.segment"
+      />
+    </UCard>
+
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <UButton v-if="step !== 'setup'" type="button" color="neutral" variant="soft" @click="goPrev"> Back </UButton>
+      <NuxtLink v-else to="/quotes" class="inline-flex">
+        <UButton color="neutral" variant="ghost" size="sm">Cancel</UButton>
+      </NuxtLink>
+
+      <div class="flex flex-wrap gap-2">
+        <UButton v-if="step !== 'acceptance'" type="button" color="primary" @click="goNext"> Continue </UButton>
+        <UButton
+          v-else
+          type="button"
+          color="primary"
+          :loading="intakeBusy"
+          :disabled="intakeBusy"
+          @click="finalize"
+        >
+          {{ quoteRequestEmailEnabled ? 'Send quote requests' : 'Save quote run' }}
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/quotes/index.vue b/app/pages/quotes/index.vue
new file mode 100644
index 0000000..abb66f9
--- /dev/null
+++ b/app/pages/quotes/index.vue
@@ -0,0 +1,1267 @@
+<script setup lang="ts">
+import {
+  MOCK_PIPELINE_QUOTES,
+  QUOTE_LOB_OPTIONS,
+  UNIFIED_PIPELINE_STAGES,
+  type MockPipelineQuote,
+  type QuoteOverviewLob,
+  type QuotePipelineScopeFilter,
+  type UnifiedStageId
+} from '~/data/quotes-overview.mock'
+import { PIPELINE_STAGES, type PipelineStage } from '~/composables/useSalesPipeline'
+
+definePageMeta({ ssr: false })
+usePageTitle('Quotes · Mission Control')
+
+/* ── Top-level view: overview vs analytics ── */
+type TopView = 'overview' | 'analytics'
+const topView = ref<TopView>('overview')
+
+/* ── Overview sub-view: tracker (3 buckets) vs pipeline (5 readable columns) ── */
+type OverviewMode = 'tracker' | 'pipeline'
+const overviewMode = ref<OverviewMode>('tracker')
+
+/* ── Filters ── */
+const pipelineScope = ref<QuotePipelineScopeFilter>('global')
+const lobFilter = ref<QuoteOverviewLob | 'all'>('all')
+const search = ref('')
+
+const lobSelectItems = computed(() =>
+  QUOTE_LOB_OPTIONS.map((o) => ({ label: o.label, value: o.value }))
+)
+
+const scopeTabs = [
+  { value: 'global' as const, label: 'Global', icon: 'i-heroicons-globe-alt' },
+  { value: 'corporate' as const, label: 'Corporate', icon: 'i-heroicons-building-office-2' },
+  { value: 'personal' as const, label: 'Personal', icon: 'i-heroicons-user' }
+]
+
+const filteredQuotes = computed(() => {
+  let rows = [...MOCK_PIPELINE_QUOTES]
+  if (pipelineScope.value !== 'global') {
+    rows = rows.filter((q) => q.party === pipelineScope.value)
+  }
+  if (lobFilter.value !== 'all') {
+    rows = rows.filter((q) => q.lob === lobFilter.value)
+  }
+  const t = search.value.trim().toLowerCase()
+  if (t) {
+    rows = rows.filter(
+      (q) =>
+        q.customerLabel.toLowerCase().includes(t) ||
+        q.id.toLowerCase().includes(t) ||
+        q.owner.toLowerCase().includes(t)
+    )
+  }
+  return rows
+})
+
+/* ── KPIs ── */
+const kpis = computed(() => {
+  const q = filteredQuotes.value
+  const awaiting = q.filter((x) => !x.customerInformed).length
+  const formsOpen = q.filter((x) => x.formsDone < x.formsTotal).length
+  const avgFormPct = q.length > 0 ? Math.round(q.reduce((s, x) => s + formsPct(x), 0) / q.length) : 0
+  return { total: q.length, awaiting, formsOpen, avgFormPct }
+})
+
+/* ── Tracker: 3 buckets ── */
+type TrackerBucket = 'waiting_quotes' | 'customer_review' | 'form_filling'
+
+const TRACKER_BUCKETS: { id: TrackerBucket; label: string; hint: string; icon: string; color: string; stages: UnifiedStageId[] }[] = [
+  { id: 'waiting_quotes', label: 'Waiting for quotes', hint: 'Gathering info & waiting on carriers', icon: 'i-heroicons-clock', color: '#f59e0b', stages: ['customer', 'get_quotes', 'waiting_carriers'] },
+  { id: 'customer_review', label: 'Customer reviewing', hint: 'Quotes in — client deciding', icon: 'i-heroicons-eye', color: '#3b82f6', stages: ['present_quotes', 'waiting_client'] },
+  { id: 'form_filling', label: 'Accepted — forms', hint: 'Customer said yes — paperwork time', icon: 'i-heroicons-document-check', color: '#10b981', stages: ['solicitud', 'emission'] },
+]
+
+const quotesByBucket = computed(() => {
+  const map: Record<TrackerBucket, MockPipelineQuote[]> = {
+    waiting_quotes: [], customer_review: [], form_filling: [],
+  }
+  for (const q of filteredQuotes.value) {
+    for (const bucket of TRACKER_BUCKETS) {
+      if (bucket.stages.includes(q.unifiedStage)) {
+        map[bucket.id].push(q)
+        break
+      }
+    }
+  }
+  return map
+})
+
+/* ── Pipeline: 5 readable columns (collapsed waiting stages) ── */
+type PipelineCol = 'customer' | 'quoting' | 'presenting' | 'solicitud' | 'emission'
+
+const PIPELINE_COLS: { id: PipelineCol; label: string; hint: string; stages: UnifiedStageId[]; color: string }[] = [
+  { id: 'customer', label: 'Customer', hint: 'Intake & qualify', stages: ['customer'], color: '#8a8a86' },
+  { id: 'quoting', label: 'Quoting', hint: 'Get quotes + awaiting carriers', stages: ['get_quotes', 'waiting_carriers'], color: '#01696f' },
+  { id: 'presenting', label: 'Presenting', hint: 'Present + awaiting client', stages: ['present_quotes', 'waiting_client'], color: '#8b5cf6' },
+  { id: 'solicitud', label: 'Solicitud', hint: 'Forms & binding', stages: ['solicitud'], color: '#d97706' },
+  { id: 'emission', label: 'Emission', hint: 'Policy issued', stages: ['emission'], color: '#10b981' },
+]
+
+const quotesByCol = computed(() => {
+  const map: Record<PipelineCol, MockPipelineQuote[]> = {
+    customer: [], quoting: [], presenting: [], solicitud: [], emission: [],
+  }
+  for (const q of filteredQuotes.value) {
+    for (const col of PIPELINE_COLS) {
+      if (col.stages.includes(q.unifiedStage)) {
+        map[col.id].push(q)
+        break
+      }
+    }
+  }
+  return map
+})
+
+/* ── Analytics: mock data from mission control ── */
+interface AgentStats {
+  name: string
+  activeDeals: number
+  quotesSent: number
+  conversionRate: number
+  avgResponseTime: string
+  pipelineValue: number
+}
+
+const agents: AgentStats[] = [
+  { name: 'Ana Ramírez', activeDeals: 8, quotesSent: 14, conversionRate: 71, avgResponseTime: '1.2d', pipelineValue: 18_400 },
+  { name: 'Marco Villanueva', activeDeals: 4, quotesSent: 6, conversionRate: 83, avgResponseTime: '0.8d', pipelineValue: 22_100 },
+  { name: 'Lucía Fernández', activeDeals: 6, quotesSent: 4, conversionRate: 42, avgResponseTime: '2.4d', pipelineValue: 4_700 },
+]
+
+interface MockDeal {
+  id: string; customerName: string; productLine: string; currentStage: PipelineStage
+  agent: string; daysAtStage: number; premium: number; formCompletion: number
+}
+
+const mockDeals: MockDeal[] = [
+  { id: 'd01', customerName: 'María Elena Pérez', productLine: 'Auto', currentStage: 'customer', agent: 'Ana Ramírez', daysAtStage: 1, premium: 1200, formCompletion: 45 },
+  { id: 'd02', customerName: 'Carlos Mendoza', productLine: 'Life', currentStage: 'customer', agent: 'Lucía Fernández', daysAtStage: 3, premium: 3200, formCompletion: 20 },
+  { id: 'd03', customerName: 'Laura Castillo', productLine: 'Health', currentStage: 'get_quotes', agent: 'Ana Ramírez', daysAtStage: 2, premium: 2800, formCompletion: 60 },
+  { id: 'd04', customerName: 'Sofía Rojas Delgado', productLine: 'Auto', currentStage: 'get_quotes', agent: 'Lucía Fernández', daysAtStage: 4, premium: 1500, formCompletion: 50 },
+  { id: 'd05', customerName: 'Andrés Vargas', productLine: 'General Risk', currentStage: 'get_quotes', agent: 'Marco Villanueva', daysAtStage: 1, premium: 8500, formCompletion: 75 },
+  { id: 'd06', customerName: 'Patricia Herrera', productLine: 'Auto', currentStage: 'waiting_carriers', agent: 'Ana Ramírez', daysAtStage: 6, premium: 1100, formCompletion: 100 },
+  { id: 'd07', customerName: 'Fernando López', productLine: 'Life', currentStage: 'waiting_carriers', agent: 'Lucía Fernández', daysAtStage: 8, premium: 4200, formCompletion: 100 },
+  { id: 'd08', customerName: 'Roberto Jiménez Mora', productLine: 'Health', currentStage: 'waiting_carriers', agent: 'Marco Villanueva', daysAtStage: 3, premium: 3100, formCompletion: 100 },
+  { id: 'd09', customerName: 'Gabriela Torres', productLine: 'Auto', currentStage: 'present_quotes', agent: 'Ana Ramírez', daysAtStage: 2, premium: 1400, formCompletion: 100 },
+  { id: 'd10', customerName: 'Diego Salazar', productLine: 'Life', currentStage: 'present_quotes', agent: 'Marco Villanueva', daysAtStage: 1, premium: 5600, formCompletion: 100 },
+  { id: 'd11', customerName: 'Isabel Moreno', productLine: 'General Risk', currentStage: 'waiting_client', agent: 'Ana Ramírez', daysAtStage: 7, premium: 2200, formCompletion: 100 },
+  { id: 'd12', customerName: 'Alejandro Rios', productLine: 'Auto', currentStage: 'waiting_client', agent: 'Lucía Fernández', daysAtStage: 12, premium: 900, formCompletion: 100 },
+  { id: 'd13', customerName: 'Valentina Cruz', productLine: 'Health', currentStage: 'solicitud', agent: 'Ana Ramírez', daysAtStage: 3, premium: 2700, formCompletion: 68 },
+  { id: 'd14', customerName: 'Jorge Navarro', productLine: 'Life', currentStage: 'solicitud', agent: 'Marco Villanueva', daysAtStage: 2, premium: 6800, formCompletion: 85 },
+  { id: 'd15', customerName: 'Camila Fuentes', productLine: 'Auto', currentStage: 'emission', agent: 'Ana Ramírez', daysAtStage: 1, premium: 1600, formCompletion: 92 },
+  { id: 'd16', customerName: 'Raúl Espinoza', productLine: 'General Risk', currentStage: 'emission', agent: 'Marco Villanueva', daysAtStage: 2, premium: 7200, formCompletion: 100 },
+  { id: 'd17', customerName: 'Mónica Delgado', productLine: 'Life', currentStage: 'waiting_carriers', agent: 'Ana Ramírez', daysAtStage: 11, premium: 3800, formCompletion: 100 },
+  { id: 'd18', customerName: 'Enrique Paredes', productLine: 'Health', currentStage: 'customer', agent: 'Lucía Fernández', daysAtStage: 6, premium: 2100, formCompletion: 30 },
+]
+
+const totalPipelinePremium = computed(() =>
+  mockDeals.reduce((sum, d) => sum + d.premium, 0),
+)
+
+const stageCounts = computed(() => {
+  const counts: Record<PipelineStage, number> = {} as any
+  for (const s of PIPELINE_STAGES) counts[s.id] = 0
+  for (const d of mockDeals) counts[d.currentStage]++
+  return counts
+})
+
+const maxStageCount = computed(() =>
+  Math.max(...PIPELINE_STAGES.map(s => stageCounts.value[s.id]), 1),
+)
+
+const stageColors: Record<PipelineStage, string> = {
+  customer: '#01696f',
+  get_quotes: '#0d8a8f',
+  waiting_carriers: '#f59e0b',
+  present_quotes: '#3b82f6',
+  waiting_client: '#f59e0b',
+  solicitud: '#8b5cf6',
+  emission: '#10b981',
+}
+
+const stuckDeals = computed(() =>
+  mockDeals.filter(d => d.daysAtStage > 5).sort((a, b) => b.daysAtStage - a.daysAtStage),
+)
+
+const activeStageTab = ref<PipelineStage>('customer')
+const stageDeals = computed(() =>
+  mockDeals.filter(d => d.currentStage === activeStageTab.value),
+)
+
+/* ── Helpers ── */
+function lobBadgeColor(lob: QuoteOverviewLob) {
+  switch (lob) { case 'auto': return 'primary'; case 'health': return 'success'; case 'life': return 'info'; case 'general_risk': return 'warning'; default: return 'neutral' }
+}
+function lobLabel(lob: QuoteOverviewLob) { return QUOTE_LOB_OPTIONS.find((o) => o.value === lob)?.label ?? lob }
+function lobIcon(lob: QuoteOverviewLob) {
+  const icons: Record<QuoteOverviewLob, string> = { auto: 'i-heroicons-truck', health: 'i-heroicons-heart', life: 'i-heroicons-shield-check', general_risk: 'i-heroicons-building-office-2', custom: 'i-heroicons-puzzle-piece' }
+  return icons[lob]
+}
+function lobHubPath(lob: QuoteOverviewLob) {
+  const paths: Record<QuoteOverviewLob, string> = { auto: '/quotes/auto', health: '/quotes/health', life: '/quotes/life', general_risk: '/quotes/general-risk', custom: '/quotes/custom' }
+  return paths[lob]
+}
+function formsPct(q: MockPipelineQuote) { return q.formsTotal <= 0 ? 0 : Math.round((100 * q.formsDone) / q.formsTotal) }
+function fmtCurrency(v: number) { return '$' + v.toLocaleString('en-US') }
+function stageLabelFor(id: PipelineStage) { return PIPELINE_STAGES.find(s => s.id === id)?.label ?? id }
+function severityColor(days: number) { return days > 10 ? '#ef4444' : days > 5 ? '#f59e0b' : '#6b7280' }
+const toast = useToast()
+const nudgeConfirmDeal = ref<MockDeal | null>(null)
+
+function onNudge(deal: MockDeal) {
+  nudgeConfirmDeal.value = deal
+}
+
+function confirmNudge() {
+  if (nudgeConfirmDeal.value) {
+    toast.add({ title: `Nudge sent to ${nudgeConfirmDeal.value.customerName}`, color: 'success' })
+  }
+  nudgeConfirmDeal.value = null
+}
+
+function cancelNudge() {
+  nudgeConfirmDeal.value = null
+}
+
+/* ── SVG ring for KPI ── */
+const ringCirc = 2 * Math.PI * 38
+const avgFormRing = computed(() => {
+  const pct = kpis.value.avgFormPct
+  return { dasharray: `${ringCirc}`, dashoffset: `${ringCirc - (ringCirc * pct) / 100}` }
+})
+
+const showStickyQuoteCta = ref(false)
+onMounted(() => {
+  const onScroll = () => { showStickyQuoteCta.value = window.scrollY > 160 }
+  window.addEventListener('scroll', onScroll, { passive: true })
+  onUnmounted(() => window.removeEventListener('scroll', onScroll))
+})
+</script>
+
+<template>
+  <div class="qmc-page">
+    <!-- Header -->
+    <div class="qmc-header">
+      <div>
+        <h1 class="qmc-title">Mission Control</h1>
+        <p class="qmc-subtitle">Pipeline overview, quoting tracker, and team analytics — all in one place.</p>
+      </div>
+      <div class="qmc-header-actions">
+        <NuxtLink to="/quotes/new">
+          <UButton icon="i-heroicons-plus" color="primary">New quote</UButton>
+        </NuxtLink>
+        <NuxtLink to="/quotes/compare">
+          <UButton icon="i-heroicons-squares-plus" color="neutral" variant="soft">Comparative</UButton>
+        </NuxtLink>
+      </div>
+    </div>
+
+    <!-- ═══ TOP-LEVEL TOGGLE ═══ -->
+    <div class="qmc-view-toggle">
+      <button
+        type="button"
+        class="qmc-vtab"
+        :class="{ 'qmc-vtab--active': topView === 'overview' }"
+        @click="topView = 'overview'"
+      >
+        <UIcon name="i-heroicons-view-columns" class="qmc-vtab-icon" />
+        Quotes Overview
+      </button>
+      <button
+        type="button"
+        class="qmc-vtab"
+        :class="{ 'qmc-vtab--active': topView === 'analytics' }"
+        @click="topView = 'analytics'"
+      >
+        <UIcon name="i-heroicons-chart-bar" class="qmc-vtab-icon" />
+        Analytics
+      </button>
+    </div>
+
+    <!-- ═══════════════════════════════════════════════════
+         OVERVIEW TAB
+         ═══════════════════════════════════════════════════ -->
+    <template v-if="topView === 'overview'">
+      <!-- KPI Cards (modern) -->
+      <div class="qmc-kpi-grid">
+        <!-- Ring card -->
+        <div class="qmc-kpi-hero">
+          <div class="qmc-ring-wrap">
+            <svg viewBox="0 0 88 88" class="qmc-ring-svg">
+              <circle cx="44" cy="44" r="38" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="5" />
+              <circle
+                cx="44" cy="44" r="38" fill="none"
+                stroke="#5eead4" stroke-width="5" stroke-linecap="round"
+                :stroke-dasharray="avgFormRing.dasharray"
+                :stroke-dashoffset="avgFormRing.dashoffset"
+                transform="rotate(-90 44 44)"
+                class="qmc-ring-progress"
+              />
+            </svg>
+            <span class="qmc-ring-label">{{ kpis.avgFormPct }}%</span>
+          </div>
+          <div class="qmc-kpi-hero-text">
+            <span class="qmc-kpi-title">Avg form completion</span>
+            <span class="qmc-kpi-sub">Across {{ kpis.total }} active quotes</span>
+          </div>
+        </div>
+        <!-- Stat cards -->
+        <div class="qmc-kpi-card">
+          <UIcon name="i-heroicons-document-text" class="qmc-kpi-icon" />
+          <span class="qmc-kpi-num">{{ kpis.total }}</span>
+          <span class="qmc-kpi-title">In-flight quotes</span>
+        </div>
+        <div class="qmc-kpi-card qmc-kpi-card--amber">
+          <UIcon name="i-heroicons-bell-alert" class="qmc-kpi-icon" />
+          <span class="qmc-kpi-num">{{ kpis.awaiting }}</span>
+          <span class="qmc-kpi-title">Need notification</span>
+        </div>
+        <div class="qmc-kpi-card">
+          <UIcon name="i-heroicons-clipboard-document-list" class="qmc-kpi-icon" />
+          <span class="qmc-kpi-num">{{ kpis.formsOpen }}</span>
+          <span class="qmc-kpi-title">Forms incomplete</span>
+        </div>
+      </div>
+
+      <!-- Scope + filter row -->
+      <div class="qmc-filter-bar">
+        <div class="qmc-scope-pills">
+          <button
+            v-for="tab in scopeTabs"
+            :key="tab.value"
+            type="button"
+            class="qmc-scope-pill"
+            :class="{ 'qmc-scope-pill--active': pipelineScope === tab.value }"
+            @click="pipelineScope = tab.value"
+          >
+            <UIcon :name="tab.icon" style="width: 13px; height: 13px;" />
+            {{ tab.label }}
+          </button>
+        </div>
+        <div class="qmc-filter-inputs">
+          <USelect
+            v-model="lobFilter"
+            :items="lobSelectItems"
+            value-key="value"
+            label-key="label"
+            class="w-full min-w-[10rem] sm:max-w-[14rem]"
+          />
+          <UInput
+            v-model="search"
+            icon="i-heroicons-magnifying-glass"
+            placeholder="Search..."
+            class="w-full flex-1"
+          />
+        </div>
+      </div>
+
+      <!-- Overview sub-toggle -->
+      <div class="qmc-sub-toggle-row">
+        <div class="qmc-sub-toggle">
+          <button
+            type="button"
+            class="qmc-stab"
+            :class="{ 'qmc-stab--active': overviewMode === 'tracker' }"
+            @click="overviewMode = 'tracker'"
+          >
+            Quote tracker
+          </button>
+          <button
+            type="button"
+            class="qmc-stab"
+            :class="{ 'qmc-stab--active': overviewMode === 'pipeline' }"
+            @click="overviewMode = 'pipeline'"
+          >
+            Full pipeline
+          </button>
+        </div>
+        <span class="qmc-sub-hint">
+          {{ overviewMode === 'tracker' ? '3 lifecycle stages' : '5 pipeline stages' }}
+        </span>
+      </div>
+
+      <!-- TRACKER (3-bucket) -->
+      <div v-if="overviewMode === 'tracker'" class="qmc-tracker-grid">
+        <div
+          v-for="bucket in TRACKER_BUCKETS"
+          :key="bucket.id"
+          class="qmc-bucket"
+        >
+          <div class="qmc-bucket-head" :style="`--bc: ${bucket.color}`">
+            <div class="qmc-bucket-icon" :style="`background: ${bucket.color}14; color: ${bucket.color}`">
+              <UIcon :name="bucket.icon" style="width: 18px; height: 18px;" />
+            </div>
+            <div class="qmc-bucket-info">
+              <div class="qmc-bucket-row">
+                <span class="qmc-bucket-label">{{ bucket.label }}</span>
+                <span class="qmc-bucket-count" :style="`background: ${bucket.color}14; color: ${bucket.color}`">
+                  {{ quotesByBucket[bucket.id].length }}
+                </span>
+              </div>
+              <span class="qmc-bucket-hint">{{ bucket.hint }}</span>
+            </div>
+          </div>
+          <div class="qmc-bucket-cards">
+            <div
+              v-for="q in quotesByBucket[bucket.id]"
+              :key="q.id"
+              class="qmc-qcard"
+            >
+              <div class="qmc-qcard-top">
+                <div class="qmc-qcard-name-wrap">
+                  <p class="qmc-qcard-name">{{ q.customerLabel }}</p>
+                  <p class="qmc-qcard-meta">{{ q.pathLabel }} · {{ q.owner }}</p>
+                </div>
+                <UBadge :color="lobBadgeColor(q.lob)" variant="soft" size="xs">{{ lobLabel(q.lob) }}</UBadge>
+              </div>
+              <div class="qmc-qcard-bar-row">
+                <span class="qmc-qcard-bar-label">{{ q.formsDone }}/{{ q.formsTotal }}</span>
+                <div class="qmc-qcard-bar-track">
+                  <div class="qmc-qcard-bar-fill" :style="{ width: `${formsPct(q)}%`, background: bucket.color }" />
+                </div>
+              </div>
+              <div class="qmc-qcard-tags">
+                <UBadge :color="q.customerInformed ? 'success' : 'warning'" variant="soft" size="xs">
+                  {{ q.customerInformed ? 'Informed' : 'Nudge' }}
+                </UBadge>
+              </div>
+            </div>
+            <p v-if="quotesByBucket[bucket.id].length === 0" class="qmc-empty-col">No quotes here</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- PIPELINE (5 columns) -->
+      <div v-if="overviewMode === 'pipeline'" class="qmc-pipeline-scroll">
+        <div class="qmc-pipeline-grid">
+          <div
+            v-for="col in PIPELINE_COLS"
+            :key="col.id"
+            class="qmc-pcol"
+          >
+            <div class="qmc-pcol-head">
+              <div class="qmc-pcol-dot" :style="`background: ${col.color}`" />
+              <span class="qmc-pcol-label">{{ col.label }}</span>
+              <span class="qmc-pcol-count">{{ quotesByCol[col.id].length }}</span>
+            </div>
+            <p class="qmc-pcol-hint">{{ col.hint }}</p>
+            <div class="qmc-pcol-cards">
+              <div
+                v-for="q in quotesByCol[col.id]"
+                :key="q.id"
+                class="qmc-qcard"
+              >
+                <div class="qmc-qcard-top">
+                  <div class="qmc-qcard-name-wrap">
+                    <p class="qmc-qcard-name">{{ q.customerLabel }}</p>
+                    <p class="qmc-qcard-meta">{{ q.pathLabel }} · {{ q.owner }}</p>
+                  </div>
+                  <UBadge :color="lobBadgeColor(q.lob)" variant="soft" size="xs">{{ lobLabel(q.lob) }}</UBadge>
+                </div>
+                <div class="qmc-qcard-bar-row">
+                  <span class="qmc-qcard-bar-label">{{ q.formsDone }}/{{ q.formsTotal }}</span>
+                  <div class="qmc-qcard-bar-track">
+                    <div class="qmc-qcard-bar-fill" :style="{ width: `${formsPct(q)}%`, background: col.color }" />
+                  </div>
+                </div>
+                <div class="qmc-qcard-tags">
+                  <UBadge :color="q.customerInformed ? 'success' : 'warning'" variant="soft" size="xs">
+                    {{ q.customerInformed ? 'Informed' : 'Nudge' }}
+                  </UBadge>
+                </div>
+              </div>
+              <p v-if="quotesByCol[col.id].length === 0" class="qmc-empty-col">No quotes</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- LOB quick links -->
+      <div class="qmc-section">
+        <p class="qmc-section-eyebrow">Lines of business</p>
+        <div class="qmc-lob-grid">
+          <NuxtLink
+            v-for="lob in ['auto', 'health', 'life', 'general_risk', 'custom'] as const"
+            :key="lob"
+            :to="lobHubPath(lob)"
+            class="qmc-lob-card group"
+          >
+            <div class="qmc-lob-icon">
+              <UIcon :name="lobIcon(lob)" style="width: 18px; height: 18px;" />
+            </div>
+            <span class="qmc-lob-name">{{ lobLabel(lob) }}</span>
+            <UIcon name="i-heroicons-chevron-right" class="qmc-lob-arrow" />
+          </NuxtLink>
+        </div>
+      </div>
+    </template>
+
+    <!-- ═══════════════════════════════════════════════════
+         ANALYTICS TAB (from mission control)
+         ═══════════════════════════════════════════════════ -->
+    <template v-if="topView === 'analytics'">
+      <!-- Analytics KPI strip (modern cards) -->
+      <div class="qmc-analytics-kpis">
+        <div class="qmc-akpi">
+          <span class="qmc-akpi-label">Active Deals</span>
+          <span class="qmc-akpi-value">{{ mockDeals.length }}</span>
+        </div>
+        <div class="qmc-akpi">
+          <span class="qmc-akpi-label">Quotes This Month</span>
+          <span class="qmc-akpi-value">24</span>
+        </div>
+        <div class="qmc-akpi">
+          <span class="qmc-akpi-label">Avg Days in Pipeline</span>
+          <span class="qmc-akpi-value">8.3</span>
+        </div>
+        <div class="qmc-akpi">
+          <span class="qmc-akpi-label">Conversion</span>
+          <span class="qmc-akpi-value qmc-akpi-value--brand">62%</span>
+        </div>
+        <div class="qmc-akpi">
+          <span class="qmc-akpi-label">Pipeline Premium</span>
+          <span class="qmc-akpi-value">{{ fmtCurrency(totalPipelinePremium) }}</span>
+        </div>
+      </div>
+
+      <!-- Funnel chart -->
+      <div class="qmc-card qmc-section">
+        <h2 class="qmc-section-title">Pipeline funnel</h2>
+        <div class="qmc-funnel">
+          <div
+            v-for="stage in PIPELINE_STAGES"
+            :key="stage.id"
+            class="qmc-funnel-row"
+          >
+            <span class="qmc-funnel-label" :class="{ 'qmc-funnel-label--waiting': stage.isWaiting }">
+              {{ stage.label }}
+              <span v-if="stage.isWaiting" class="qmc-funnel-wait-dot" />
+            </span>
+            <div class="qmc-funnel-bar-track">
+              <div
+                class="qmc-funnel-bar"
+                :style="{
+                  width: Math.max((stageCounts[stage.id] / maxStageCount) * 100, 4) + '%',
+                  background: `linear-gradient(90deg, ${stageColors[stage.id]}, ${stageColors[stage.id]}cc)`,
+                }"
+              />
+            </div>
+            <span class="qmc-funnel-count">{{ stageCounts[stage.id] }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Agent performance -->
+      <div class="qmc-card qmc-section">
+        <h2 class="qmc-section-title">Agent performance</h2>
+        <div class="qmc-agent-grid">
+          <div v-for="a in agents" :key="a.name" class="qmc-agent-card">
+            <div class="qmc-agent-head">
+              <div class="qmc-agent-avatar">{{ a.name.split(' ').map(w => w[0]).join('') }}</div>
+              <div>
+                <p class="qmc-agent-name">{{ a.name }}</p>
+                <p class="qmc-agent-sub">{{ a.activeDeals }} deals · {{ a.quotesSent }} quotes</p>
+              </div>
+            </div>
+            <div class="qmc-agent-stats">
+              <div class="qmc-agent-stat">
+                <span class="qmc-agent-stat-label">Conversion</span>
+                <span
+                  class="qmc-agent-stat-badge"
+                  :style="{ background: a.conversionRate >= 70 ? 'rgba(16,185,129,0.1)' : a.conversionRate >= 50 ? 'rgba(245,158,11,0.1)' : 'rgba(239,68,68,0.1)', color: a.conversionRate >= 70 ? '#059669' : a.conversionRate >= 50 ? '#d97706' : '#dc2626' }"
+                >{{ a.conversionRate }}%</span>
+              </div>
+              <div class="qmc-agent-stat">
+                <span class="qmc-agent-stat-label">Avg response</span>
+                <span class="qmc-agent-stat-val">{{ a.avgResponseTime }}</span>
+              </div>
+              <div class="qmc-agent-stat">
+                <span class="qmc-agent-stat-label">Pipeline value</span>
+                <span class="qmc-agent-stat-val">{{ fmtCurrency(a.pipelineValue) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bottleneck analysis -->
+      <div class="qmc-card qmc-section">
+        <h2 class="qmc-section-title">Bottleneck analysis</h2>
+        <p class="qmc-section-sub">Deals stuck at a stage for more than 5 days</p>
+        <div v-if="stuckDeals.length === 0" class="qmc-empty-state">No bottlenecks detected.</div>
+        <div v-else class="qmc-stuck-list">
+          <div
+            v-for="deal in stuckDeals"
+            :key="deal.id"
+            class="qmc-stuck-row"
+            :style="{ borderLeftColor: severityColor(deal.daysAtStage) }"
+          >
+            <div class="qmc-stuck-info">
+              <span class="qmc-stuck-name">{{ deal.customerName }}</span>
+              <span class="qmc-stuck-meta">
+                <span class="qmc-stuck-days" :style="{ color: severityColor(deal.daysAtStage) }">{{ deal.daysAtStage }}d</span>
+                at {{ stageLabelFor(deal.currentStage) }}
+              </span>
+            </div>
+            <span class="qmc-stuck-agent">{{ deal.agent }}</span>
+            <button class="qmc-btn-nudge" @click="onNudge(deal)">Nudge</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Stage breakdown -->
+      <div class="qmc-card qmc-section">
+        <h2 class="qmc-section-title">Stage breakdown</h2>
+        <div class="qmc-stage-tabs">
+          <button
+            v-for="stage in PIPELINE_STAGES"
+            :key="stage.id"
+            class="qmc-stab"
+            :class="{ 'qmc-stab--active': activeStageTab === stage.id }"
+            @click="activeStageTab = stage.id"
+          >
+            {{ stage.label }}
+          </button>
+        </div>
+        <div v-if="stageDeals.length === 0" class="qmc-empty-state">
+          <UIcon name="i-heroicons-inbox" style="width: 20px; height: 20px; color: #c0c0bc;" />
+          <p>No deals at this stage</p>
+          <p class="text-[10px] opacity-60">Deals will appear here as they move through the pipeline.</p>
+        </div>
+        <div v-else class="qmc-stage-list">
+          <div v-for="deal in stageDeals" :key="deal.id" class="qmc-stage-row">
+            <div class="qmc-stage-row-main">
+              <span class="qmc-stage-row-name">{{ deal.customerName }}</span>
+              <span class="qmc-stage-row-line">{{ deal.productLine }}</span>
+            </div>
+            <span class="qmc-stage-row-days" :style="{ color: deal.daysAtStage > 5 ? severityColor(deal.daysAtStage) : 'inherit' }">
+              {{ deal.daysAtStage }}d
+            </span>
+            <span class="qmc-stage-row-agent">{{ deal.agent }}</span>
+            <span class="qmc-stage-row-prem">{{ fmtCurrency(deal.premium) }}</span>
+            <div class="qmc-stage-row-bar">
+              <div class="qmc-stage-bar-track">
+                <div class="qmc-stage-bar-fill" :style="{ width: deal.formCompletion + '%' }" />
+              </div>
+              <span class="qmc-stage-bar-pct">{{ deal.formCompletion }}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Nudge confirmation modal -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition duration-150 ease-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="nudgeConfirmDeal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30" @click.self="cancelNudge">
+          <div class="w-full max-w-sm rounded-xl border border-[var(--card-border)] bg-white p-6 shadow-xl">
+            <div class="flex items-start gap-3">
+              <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg" style="background: rgba(1,105,111,0.08); color: #01696f;">
+                <UIcon name="i-heroicons-bell-alert" style="width: 18px; height: 18px;" />
+              </div>
+              <div class="min-w-0">
+                <p class="text-[14px] font-semibold text-[var(--text-primary)]">Send nudge?</p>
+                <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+                  This will send a follow-up reminder to <span class="font-semibold text-[var(--text-primary)]">{{ nudgeConfirmDeal.customerName }}</span> about their pending deal.
+                </p>
+              </div>
+            </div>
+            <div class="mt-5 flex justify-end gap-2">
+              <UButton color="neutral" variant="soft" size="sm" @click="cancelNudge">Cancel</UButton>
+              <UButton color="primary" size="sm" @click="confirmNudge">Send nudge</UButton>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- Sticky "New quote" CTA -->
+    <Transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="opacity-0 translate-y-2"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition duration-150 ease-in"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 translate-y-2"
+    >
+      <div v-if="showStickyQuoteCta" class="fixed bottom-6 right-6 z-40">
+        <NuxtLink to="/quotes/new">
+          <UButton icon="i-heroicons-plus" color="primary" size="lg" class="shadow-lg">New quote</UButton>
+        </NuxtLink>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+/* ══════════════════════════════════════════════════════
+   QUOTES MISSION CONTROL — unified page
+   ══════════════════════════════════════════════════════ */
+
+.qmc-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-bottom: 3rem;
+}
+
+/* ── Header ── */
+.qmc-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.qmc-title {
+  font-size: 24px;
+  font-weight: 650;
+  letter-spacing: -0.015em;
+  color: var(--text-primary);
+  margin-top: 4px;
+}
+.qmc-subtitle {
+  font-size: 14px;
+  color: #8a8a86;
+  margin-top: 4px;
+  max-width: 36rem;
+  line-height: 1.5;
+}
+.qmc-header-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* ── Top-level view toggle ── */
+.qmc-view-toggle {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0,0,0,0.04);
+}
+.qmc-vtab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 16px;
+  border-radius: 8px;
+  border: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: #6b6b68;
+  background: transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.qmc-vtab:hover { color: var(--text-primary); }
+.qmc-vtab--active {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+.qmc-vtab-icon { width: 15px; height: 15px; }
+
+/* ── Modern KPI grid ── */
+.qmc-kpi-grid {
+  display: grid;
+  grid-template-columns: 1.4fr repeat(3, 1fr);
+  gap: 14px;
+}
+.qmc-kpi-hero {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #0a2e30 0%, #01696f 100%);
+  color: #fff;
+}
+.qmc-ring-wrap {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  flex-shrink: 0;
+}
+.qmc-ring-svg { width: 100%; height: 100%; }
+.qmc-ring-progress { transition: stroke-dashoffset 0.6s ease; }
+.qmc-ring-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 800;
+  color: #5eead4;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+}
+.qmc-kpi-hero-text { display: flex; flex-direction: column; gap: 2px; }
+.qmc-kpi-hero-text .qmc-kpi-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.95); }
+.qmc-kpi-hero-text .qmc-kpi-sub { font-size: 11px; color: rgba(255,255,255,0.6); }
+
+.qmc-kpi-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 16px 12px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.06);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+.qmc-kpi-icon { width: 20px; height: 20px; color: #01696f; opacity: 0.6; }
+.qmc-kpi-card--amber .qmc-kpi-icon { color: #d97706; }
+.qmc-kpi-num { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1; }
+.qmc-kpi-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86; text-align: center; }
+.qmc-kpi-sub { font-size: 11px; color: #8a8a86; }
+
+/* ── Filter bar ── */
+.qmc-filter-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.qmc-scope-pills {
+  display: inline-flex;
+  gap: 4px;
+}
+.qmc-scope-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  border-radius: 9999px;
+  border: 1px solid rgba(0,0,0,0.08);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: #fff;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.qmc-scope-pill:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+.qmc-scope-pill--active {
+  background: rgba(1,105,111,0.06);
+  border-color: rgba(1,105,111,0.2);
+  color: #01696f;
+}
+.qmc-filter-inputs {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+/* ── Sub-toggle (tracker / pipeline) ── */
+.qmc-sub-toggle-row { display: flex; align-items: center; gap: 10px; }
+.qmc-sub-toggle {
+  display: inline-flex;
+  gap: 1px;
+  padding: 2px;
+  border-radius: 8px;
+  background: rgba(0,0,0,0.04);
+}
+.qmc-stab {
+  padding: 5px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  background: transparent;
+  color: #6b6b68;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 150ms ease;
+}
+.qmc-stab--active {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+.qmc-sub-hint { font-size: 11px; color: #8a8a86; }
+
+/* ── Tracker grid (3 buckets) ── */
+.qmc-tracker-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+.qmc-bucket {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.06);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.qmc-bucket-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+}
+.qmc-bucket-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+.qmc-bucket-info { min-width: 0; flex: 1; }
+.qmc-bucket-row { display: flex; align-items: center; gap: 8px; }
+.qmc-bucket-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
+.qmc-bucket-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  min-width: 20px;
+  padding: 0 6px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.qmc-bucket-hint { font-size: 11px; color: #8a8a86; margin-top: 1px; }
+.qmc-bucket-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  flex: 1;
+}
+
+/* ── Quote card (shared between tracker & pipeline) ── */
+.qmc-qcard {
+  padding: 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: var(--page-bg, #fafafa);
+  transition: all 150ms ease;
+}
+.qmc-qcard:hover {
+  border-color: rgba(1,105,111,0.2);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+.qmc-qcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
+.qmc-qcard-name-wrap { min-width: 0; }
+.qmc-qcard-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.qmc-qcard-meta { font-size: 11px; color: #8a8a86; margin-top: 1px; }
+.qmc-qcard-bar-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
+.qmc-qcard-bar-label { font-size: 10px; font-weight: 600; color: #8a8a86; min-width: 28px; }
+.qmc-qcard-bar-track {
+  flex: 1;
+  height: 4px;
+  background: rgba(0,0,0,0.06);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.qmc-qcard-bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+.qmc-qcard-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
+
+.qmc-empty-col {
+  padding: 32px 0;
+  text-align: center;
+  font-size: 11px;
+  color: #8a8a86;
+  border: 1px dashed rgba(0,0,0,0.08);
+  border-radius: 8px;
+}
+
+/* ── Pipeline grid (5 columns) ── */
+.qmc-pipeline-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 8px; }
+.qmc-pipeline-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  min-width: 60rem;
+}
+.qmc-pcol {
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  background: var(--page-bg, #fafafa);
+  border: 1px solid rgba(0,0,0,0.06);
+  padding: 12px;
+}
+.qmc-pcol-head { display: flex; align-items: center; gap: 6px; }
+.qmc-pcol-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.qmc-pcol-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.qmc-pcol-count {
+  font-size: 11px;
+  font-weight: 600;
+  color: #8a8a86;
+  margin-left: auto;
+}
+.qmc-pcol-hint { font-size: 10px; color: #8a8a86; margin-top: 2px; margin-bottom: 10px; }
+.qmc-pcol-cards { display: flex; flex-direction: column; gap: 8px; flex: 1; }
+
+/* ── Section / card (analytics) ── */
+.qmc-card {
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+.qmc-section { padding: 20px 24px; }
+.qmc-section-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
+.qmc-section-sub { font-size: 13px; color: #8a8a86; margin-top: -10px; margin-bottom: 14px; }
+.qmc-section-eyebrow {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  margin-bottom: 12px;
+}
+
+/* ── LOB grid ── */
+.qmc-lob-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 10px;
+}
+.qmc-lob-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  transition: all 150ms ease;
+}
+.qmc-lob-card:hover {
+  border-color: rgba(1,105,111,0.25);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+.qmc-lob-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: rgba(1,105,111,0.06);
+  color: #01696f;
+  flex-shrink: 0;
+}
+.qmc-lob-name { font-size: 13px; font-weight: 500; color: var(--text-primary); flex: 1; }
+.qmc-lob-arrow { width: 14px; height: 14px; color: #8a8a86; opacity: 0; transition: opacity 150ms ease; }
+.qmc-lob-card:hover .qmc-lob-arrow { opacity: 1; }
+
+/* ── Analytics KPI strip ── */
+.qmc-analytics-kpis {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+}
+.qmc-akpi {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 16px 12px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.06);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+.qmc-akpi-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  text-align: center;
+}
+.qmc-akpi-value { font-size: 22px; font-weight: 700; color: var(--text-primary); }
+.qmc-akpi-value--brand { color: #01696f; }
+
+/* ── Funnel ── */
+.qmc-funnel { display: flex; flex-direction: column; gap: 8px; }
+.qmc-funnel-row {
+  display: grid;
+  grid-template-columns: 150px 1fr 36px;
+  align-items: center;
+  gap: 10px;
+}
+.qmc-funnel-label {
+  font-size: 13px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.qmc-funnel-label--waiting { color: #8a8a86; font-style: italic; }
+.qmc-funnel-wait-dot { width: 5px; height: 5px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }
+.qmc-funnel-bar-track {
+  height: 22px;
+  background: rgba(0,0,0,0.03);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.qmc-funnel-bar {
+  height: 100%;
+  border-radius: 6px;
+  transition: width 0.4s ease;
+  min-width: 4px;
+}
+.qmc-funnel-count { font-size: 14px; font-weight: 600; text-align: right; color: var(--text-primary); }
+
+/* ── Agent performance ── */
+.qmc-agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
+.qmc-agent-card {
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: var(--page-bg, #fafafa);
+}
+.qmc-agent-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
+.qmc-agent-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #01696f, #0d8a8f);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.qmc-agent-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.qmc-agent-sub { font-size: 11px; color: #8a8a86; }
+.qmc-agent-stats { display: flex; flex-direction: column; gap: 6px; }
+.qmc-agent-stat { display: flex; align-items: center; justify-content: space-between; }
+.qmc-agent-stat-label { font-size: 11px; color: #8a8a86; }
+.qmc-agent-stat-badge {
+  display: inline-flex;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.qmc-agent-stat-val { font-size: 12px; font-weight: 600; color: var(--text-primary); }
+
+/* ── Stuck deals ── */
+.qmc-stuck-list { display: flex; flex-direction: column; gap: 6px; }
+.qmc-stuck-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.04);
+  border-left: 3px solid;
+}
+.qmc-stuck-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
+.qmc-stuck-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
+.qmc-stuck-meta { font-size: 12px; color: #8a8a86; }
+.qmc-stuck-days { font-weight: 600; }
+.qmc-stuck-agent { font-size: 12px; color: #8a8a86; min-width: 120px; }
+.qmc-btn-nudge {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 4px 14px;
+  border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.1);
+  background: #fff;
+  color: #01696f;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.qmc-btn-nudge:hover { background: rgba(1,105,111,0.06); }
+
+/* ── Stage tabs ── */
+.qmc-stage-tabs {
+  display: inline-flex;
+  background: rgba(0,0,0,0.04);
+  padding: 3px;
+  border-radius: 10px;
+  gap: 2px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+/* ── Stage breakdown list ── */
+.qmc-stage-list { display: flex; flex-direction: column; gap: 4px; }
+.qmc-stage-row {
+  display: grid;
+  grid-template-columns: 1fr 40px 120px 80px 140px;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+  font-size: 13px;
+}
+.qmc-stage-row:last-child { border-bottom: none; }
+.qmc-stage-row-main { display: flex; flex-direction: column; }
+.qmc-stage-row-name { font-weight: 500; color: var(--text-primary); }
+.qmc-stage-row-line { font-size: 11px; color: #8a8a86; }
+.qmc-stage-row-days { font-weight: 600; text-align: center; }
+.qmc-stage-row-agent { font-size: 12px; color: #8a8a86; }
+.qmc-stage-row-prem { font-size: 12px; font-weight: 500; color: var(--text-primary); text-align: right; }
+.qmc-stage-row-bar { display: flex; align-items: center; gap: 6px; }
+.qmc-stage-bar-track {
+  flex: 1;
+  height: 5px;
+  background: rgba(0,0,0,0.06);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.qmc-stage-bar-fill {
+  height: 100%;
+  background: #01696f;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+.qmc-stage-bar-pct { font-size: 11px; color: #8a8a86; min-width: 28px; }
+
+/* ── Empty ── */
+.qmc-empty-state { font-size: 13px; color: #8a8a86; padding: 24px 0; text-align: center; }
+
+/* ── Responsive ── */
+@media (max-width: 1024px) {
+  .qmc-kpi-grid { grid-template-columns: 1fr 1fr; }
+  .qmc-tracker-grid { grid-template-columns: 1fr; }
+  .qmc-analytics-kpis { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 640px) {
+  .qmc-kpi-grid { grid-template-columns: 1fr; }
+  .qmc-analytics-kpis { grid-template-columns: repeat(2, 1fr); }
+  .qmc-pipeline-grid { min-width: 50rem; }
+  .qmc-stage-row { grid-template-columns: 1fr; gap: 4px; }
+}
+</style>
diff --git a/app/pages/quotes/life/index.vue b/app/pages/quotes/life/index.vue
new file mode 100644
index 0000000..310f401
--- /dev/null
+++ b/app/pages/quotes/life/index.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { emptyLifeQuoteDraft } from '~/composables/useLifeQuoteDraft'
+import type { LifeQuoteIntakePayload, LifeQuoteMode, LifeQuoteSegment } from '~/types/life-quote-intake'
+
+definePageMeta({ ssr: false })
+
+usePageTitle('Quotes · Life')
+
+const STEP_ORDER = ['setup', 'solicit', 'acceptance'] as const
+type StepId = (typeof STEP_ORDER)[number]
+
+const STEP_LABELS: Record<StepId, string> = {
+  setup: 'Quote setup',
+  solicit: 'Carriers to quote',
+  acceptance: 'Acceptance'
+}
+
+const step = ref<StepId>('setup')
+const maxStepIndex = ref(0)
+const intakeBusy = ref(false)
+
+const draft = reactive(emptyLifeQuoteDraft())
+
+const toast = useToast()
+const { quoteRequestEmailEnabled } = useQuoteRequestEmailEnabled()
+
+const modeCards: { id: LifeQuoteMode; title: string; hint: string; icon: string }[] = [
+  {
+    id: 'single',
+    title: 'Single quote',
+    hint: 'One benefit package per carrier request.',
+    icon: 'i-heroicons-document-text'
+  },
+  {
+    id: 'comparative_pdf',
+    title: 'Comparative quote',
+    hint: 'Same insured and coverage intent; fill the comparative sheet when rates arrive.',
+    icon: 'i-heroicons-document-duplicate'
+  }
+]
+
+const segmentCards: { id: LifeQuoteSegment; title: string; hint: string; icon: string }[] = [
+  {
+    id: 'individual',
+    title: 'Individual',
+    hint: 'Retail life insurance.',
+    icon: 'i-heroicons-user'
+  },
+  {
+    id: 'corporate_keyman',
+    title: 'Corporate / Key person',
+    hint: 'Key-man or employer-sponsored.',
+    icon: 'i-heroicons-building-office-2'
+  },
+  {
+    id: 'group',
+    title: 'Group policy',
+    hint: 'Trust or association block.',
+    icon: 'i-heroicons-user-group'
+  }
+]
+
+function canProceedFromCustomer() {
+  const c = draft.client
+  if (!c.fullName.trim() || !c.email.trim()) {
+    toast.add({
+      title: 'Add legal name and email',
+      description: 'We need them for notifications and the quote file.',
+      color: 'warning'
+    })
+    return false
+  }
+  return true
+}
+
+function canProceedFromSetup() {
+  if (!draft.quoteMode) {
+    toast.add({ title: 'Choose quote type', description: 'Single or comparative.', color: 'warning' })
+    return false
+  }
+  if (!draft.segment) {
+    toast.add({ title: 'Choose policy type', description: 'Individual, corporate / key person, or group.', color: 'warning' })
+    return false
+  }
+  if (!canProceedFromCustomer()) return false
+  if (
+    (draft.segment === 'corporate_keyman' || draft.segment === 'group') &&
+    !draft.client.organizationName?.trim()
+  ) {
+    toast.add({
+      title: 'Add organization',
+      description: 'Required for corporate and group policies.',
+      color: 'warning'
+    })
+    return false
+  }
+  if (!draft.life.dateOfBirth || !draft.life.gender) {
+    toast.add({
+      title: 'Complete age & health screening',
+      description: 'Date of birth and gender are required for life underwriting.',
+      color: 'warning'
+    })
+    return false
+  }
+  if (!draft.life.coverageAmount || !draft.life.coverageTerm) {
+    toast.add({
+      title: 'Complete coverage intent',
+      description: 'Select coverage amount and term.',
+      color: 'warning'
+    })
+    return false
+  }
+  if (!draft.forms.medicalQuestionnaire || !draft.forms.beneficiaryDesignation) {
+    toast.add({
+      title: 'Confirm forms',
+      description: 'Check off medical questionnaire and beneficiary designation.',
+      color: 'warning'
+    })
+    return false
+  }
+  if (draft.segment === 'group' && !draft.forms.groupCensus) {
+    toast.add({
+      title: 'Group census required',
+      description: 'Confirm the employee roster / census for group policies.',
+      color: 'warning'
+    })
+    return false
+  }
+  return true
+}
+
+function canProceedFromSolicit() {
+  if (draft.solicit.carrierIds.length === 0 || draft.solicit.planIds.length === 0) {
+    toast.add({
+      title: 'Choose carriers and plans',
+      description: 'Select at least one carrier and one plan shell.',
+      color: 'warning'
+    })
+    return false
+  }
+  return true
+}
+
+function goToStep(target: StepId) {
+  const ti = STEP_ORDER.indexOf(target)
+  if (ti > maxStepIndex.value) return
+  step.value = target
+}
+
+function onStepPillClick(stepIndex: number, target: StepId) {
+  if (stepIndex > maxStepIndex.value) return
+  goToStep(target)
+}
+
+function goPrev() {
+  const i = STEP_ORDER.indexOf(step.value)
+  if (i <= 0) return
+  step.value = STEP_ORDER[i - 1]!
+}
+
+function goNext() {
+  const i = STEP_ORDER.indexOf(step.value)
+  if (step.value === 'setup' && !canProceedFromSetup()) return
+  if (step.value === 'solicit' && !canProceedFromSolicit()) return
+  if (i >= STEP_ORDER.length - 1) return
+  const next = STEP_ORDER[i + 1]!
+  step.value = next
+  maxStepIndex.value = Math.max(maxStepIndex.value, i + 1)
+}
+
+function buildPayload(): LifeQuoteIntakePayload {
+  return {
+    quoteMode: draft.quoteMode!,
+    segment: draft.segment!,
+    client: { ...draft.client },
+    life: { ...draft.life },
+    solicit: {
+      carrierIds: [...draft.solicit.carrierIds],
+      planIds: [...draft.solicit.planIds]
+    }
+  }
+}
+
+async function finalize() {
+  if (!draft.quoteMode || !draft.segment) return
+  if (intakeBusy.value) return
+  intakeBusy.value = true
+  try {
+    const payload = buildPayload()
+    const emailOn = quoteRequestEmailEnabled.value
+
+    if (payload.quoteMode === 'comparative_pdf') {
+      toast.add({
+        title: emailOn ? 'Quote requests queued' : 'Comparative run saved',
+        description: emailOn
+          ? 'Opening the comparative sheet. Provider emails follow your Settings -> Quote requests toggle.'
+          : 'Emails to providers are disabled — comparative layout saved for manual or table pricing.',
+        color: 'success'
+      })
+      await nextTick()
+      await navigateTo({
+        path: '/quotes/compare',
+        query: { from: 'life', segment: payload.segment }
+      })
+      return
+    }
+    toast.add({
+      title: emailOn ? 'Quote requests recorded' : 'Quote run saved (no emails)',
+      description: emailOn
+        ? 'Requests can be sent to carrier quoting addresses on file when your integration is on.'
+        : 'Outbound provider email is off in Settings — this request stays in-app for tables, APIs, or AI.',
+      color: 'success'
+    })
+  } finally {
+    intakeBusy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl space-y-6 pb-12">
+    <NuxtLink to="/quotes" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Back to quotes</UButton>
+    </NuxtLink>
+
+    <div class="max-w-2xl">
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Life quoting</h1>
+      <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+        Set up the insured, complete screening, pick carriers, then accept — three steps.
+      </p>
+    </div>
+
+    <div
+      class="flex flex-wrap items-center gap-x-1 gap-y-2 text-[11px] font-medium text-[var(--text-muted)] sm:text-xs"
+      role="navigation"
+      aria-label="Steps"
+    >
+      <template v-for="(s, idx) in STEP_ORDER" :key="s">
+        <UIcon v-if="idx > 0" name="i-heroicons-chevron-right" class="h-3 w-3 shrink-0 opacity-40" aria-hidden="true" />
+        <button
+          type="button"
+          class="min-w-0 rounded-full px-2 py-1 text-left transition sm:px-2.5"
+          :class="
+            step === s
+              ? 'bg-[var(--brand-soft)] text-[var(--brand)]'
+              : idx <= maxStepIndex
+                ? 'cursor-pointer bg-[var(--sidebar-border)]/60 hover:bg-[var(--brand-soft)]/80 hover:text-[var(--brand)]'
+                : 'cursor-default bg-[var(--sidebar-border)]/60 opacity-50'
+          "
+          :aria-current="step === s ? 'step' : undefined"
+          @click.prevent.stop="onStepPillClick(idx, s)"
+        >
+          <span class="hidden sm:inline">{{ idx + 1 }}. {{ STEP_LABELS[s] }}</span>
+          <span class="sm:hidden">{{ idx + 1 }}</span>
+        </button>
+      </template>
+    </div>
+
+    <UCard :ui="{ body: { padding: 'p-5 sm:p-6' } }">
+      <template #header>
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]">
+            Step {{ STEP_ORDER.indexOf(step) + 1 }} of {{ STEP_ORDER.length }}
+          </p>
+          <h2 class="mt-0.5 text-lg font-semibold text-[var(--text-primary)]">{{ STEP_LABELS[step] }}</h2>
+        </div>
+      </template>
+
+      <QuotesLifeSetupStep
+        v-if="step === 'setup'"
+        :draft="draft"
+        :mode-cards="modeCards"
+        :segment-cards="segmentCards"
+      />
+
+      <QuotesLifeSolicitQuotesStep
+        v-else-if="step === 'solicit' && draft.quoteMode"
+        :draft="draft"
+        :quote-mode="draft.quoteMode"
+      />
+
+      <QuotesLifeAcceptanceStep
+        v-else-if="step === 'acceptance' && draft.quoteMode && draft.segment"
+        :draft="draft"
+        :quote-mode="draft.quoteMode"
+        :segment="draft.segment"
+      />
+    </UCard>
+
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <UButton v-if="step !== 'setup'" type="button" color="neutral" variant="soft" @click="goPrev"> Back </UButton>
+      <NuxtLink v-else to="/quotes" class="inline-flex">
+        <UButton color="neutral" variant="ghost" size="sm">Cancel</UButton>
+      </NuxtLink>
+
+      <div class="flex flex-wrap gap-2">
+        <UButton v-if="step !== 'acceptance'" type="button" color="primary" @click="goNext"> Continue </UButton>
+        <UButton
+          v-else
+          type="button"
+          color="primary"
+          :loading="intakeBusy"
+          :disabled="intakeBusy"
+          @click="finalize"
+        >
+          {{ quoteRequestEmailEnabled ? 'Send quote requests' : 'Save quote run' }}
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/quotes/mission-control.vue b/app/pages/quotes/mission-control.vue
new file mode 100644
index 0000000..0896f84
--- /dev/null
+++ b/app/pages/quotes/mission-control.vue
@@ -0,0 +1,662 @@
+<script setup lang="ts">
+import { PIPELINE_STAGES, type PipelineStage } from '~/composables/useSalesPipeline'
+
+definePageMeta({ ssr: false })
+usePageTitle('Mission Control \u00b7 Quotes')
+
+/* ── Mock agents ── */
+interface AgentStats {
+  name: string
+  activeDeals: number
+  quotesSent: number
+  conversionRate: number
+  avgResponseTime: string
+  pipelineValue: number
+}
+
+const agents: AgentStats[] = [
+  { name: 'Ana Ram\u00edrez', activeDeals: 8, quotesSent: 14, conversionRate: 71, avgResponseTime: '1.2d', pipelineValue: 18_400 },
+  { name: 'Marco Villanueva', activeDeals: 4, quotesSent: 6, conversionRate: 83, avgResponseTime: '0.8d', pipelineValue: 22_100 },
+  { name: 'Luc\u00eda Fern\u00e1ndez', activeDeals: 6, quotesSent: 4, conversionRate: 42, avgResponseTime: '2.4d', pipelineValue: 4_700 },
+]
+
+/* ── Mock deals spread across pipeline ── */
+interface MockDeal {
+  id: string
+  customerName: string
+  productLine: string
+  currentStage: PipelineStage
+  agent: string
+  daysAtStage: number
+  premium: number
+  formCompletion: number
+  createdDaysAgo: number
+}
+
+const mockDeals: MockDeal[] = [
+  { id: 'd01', customerName: 'Mar\u00eda Elena P\u00e9rez', productLine: 'Auto', currentStage: 'customer', agent: 'Ana Ram\u00edrez', daysAtStage: 1, premium: 1200, formCompletion: 45, createdDaysAgo: 1 },
+  { id: 'd02', customerName: 'Carlos Mendoza', productLine: 'Life', currentStage: 'customer', agent: 'Luc\u00eda Fern\u00e1ndez', daysAtStage: 3, premium: 3200, formCompletion: 20, createdDaysAgo: 3 },
+  { id: 'd03', customerName: 'Laura Castillo', productLine: 'Health', currentStage: 'get_quotes', agent: 'Ana Ram\u00edrez', daysAtStage: 2, premium: 2800, formCompletion: 60, createdDaysAgo: 5 },
+  { id: 'd04', customerName: 'Sof\u00eda Rojas Delgado', productLine: 'Auto', currentStage: 'get_quotes', agent: 'Luc\u00eda Fern\u00e1ndez', daysAtStage: 4, premium: 1500, formCompletion: 50, createdDaysAgo: 7 },
+  { id: 'd05', customerName: 'Andr\u00e9s Vargas', productLine: 'General Risk', currentStage: 'get_quotes', agent: 'Marco Villanueva', daysAtStage: 1, premium: 8500, formCompletion: 75, createdDaysAgo: 4 },
+  { id: 'd06', customerName: 'Patricia Herrera', productLine: 'Auto', currentStage: 'waiting_carriers', agent: 'Ana Ram\u00edrez', daysAtStage: 6, premium: 1100, formCompletion: 100, createdDaysAgo: 10 },
+  { id: 'd07', customerName: 'Fernando L\u00f3pez', productLine: 'Life', currentStage: 'waiting_carriers', agent: 'Luc\u00eda Fern\u00e1ndez', daysAtStage: 8, premium: 4200, formCompletion: 100, createdDaysAgo: 12 },
+  { id: 'd08', customerName: 'Roberto Jim\u00e9nez Mora', productLine: 'Health', currentStage: 'waiting_carriers', agent: 'Marco Villanueva', daysAtStage: 3, premium: 3100, formCompletion: 100, createdDaysAgo: 8 },
+  { id: 'd09', customerName: 'Gabriela Torres', productLine: 'Auto', currentStage: 'present_quotes', agent: 'Ana Ram\u00edrez', daysAtStage: 2, premium: 1400, formCompletion: 100, createdDaysAgo: 14 },
+  { id: 'd10', customerName: 'Diego Salazar', productLine: 'Life', currentStage: 'present_quotes', agent: 'Marco Villanueva', daysAtStage: 1, premium: 5600, formCompletion: 100, createdDaysAgo: 9 },
+  { id: 'd11', customerName: 'Isabel Moreno', productLine: 'General Risk', currentStage: 'waiting_client', agent: 'Ana Ram\u00edrez', daysAtStage: 7, premium: 2200, formCompletion: 100, createdDaysAgo: 16 },
+  { id: 'd12', customerName: 'Alejandro Rios', productLine: 'Auto', currentStage: 'waiting_client', agent: 'Luc\u00eda Fern\u00e1ndez', daysAtStage: 12, premium: 900, formCompletion: 100, createdDaysAgo: 20 },
+  { id: 'd13', customerName: 'Valentina Cruz', productLine: 'Health', currentStage: 'solicitud', agent: 'Ana Ram\u00edrez', daysAtStage: 3, premium: 2700, formCompletion: 68, createdDaysAgo: 18 },
+  { id: 'd14', customerName: 'Jorge Navarro', productLine: 'Life', currentStage: 'solicitud', agent: 'Marco Villanueva', daysAtStage: 2, premium: 6800, formCompletion: 85, createdDaysAgo: 15 },
+  { id: 'd15', customerName: 'Camila Fuentes', productLine: 'Auto', currentStage: 'emission', agent: 'Ana Ram\u00edrez', daysAtStage: 1, premium: 1600, formCompletion: 92, createdDaysAgo: 22 },
+  { id: 'd16', customerName: 'Ra\u00fal Espinoza', productLine: 'General Risk', currentStage: 'emission', agent: 'Marco Villanueva', daysAtStage: 2, premium: 7200, formCompletion: 100, createdDaysAgo: 25 },
+  { id: 'd17', customerName: 'M\u00f3nica Delgado', productLine: 'Life', currentStage: 'waiting_carriers', agent: 'Ana Ram\u00edrez', daysAtStage: 11, premium: 3800, formCompletion: 100, createdDaysAgo: 15 },
+  { id: 'd18', customerName: 'Enrique Paredes', productLine: 'Health', currentStage: 'customer', agent: 'Luc\u00eda Fern\u00e1ndez', daysAtStage: 6, premium: 2100, formCompletion: 30, createdDaysAgo: 6 },
+]
+
+/* ── KPI computations ── */
+const totalActiveDeals = computed(() => mockDeals.length)
+
+const totalPipelinePremium = computed(() =>
+  mockDeals.reduce((sum, d) => sum + d.premium, 0),
+)
+
+const stageCounts = computed(() => {
+  const counts: Record<PipelineStage, number> = {} as any
+  for (const s of PIPELINE_STAGES) counts[s.id] = 0
+  for (const d of mockDeals) counts[d.currentStage]++
+  return counts
+})
+
+const bottleneckStage = computed(() => {
+  let max = 0
+  let stage = PIPELINE_STAGES[0]
+  for (const s of PIPELINE_STAGES) {
+    if (stageCounts.value[s.id] > max) {
+      max = stageCounts.value[s.id]
+      stage = s
+    }
+  }
+  return stage.label
+})
+
+const maxStageCount = computed(() =>
+  Math.max(...PIPELINE_STAGES.map(s => stageCounts.value[s.id]), 1),
+)
+
+/* ── Funnel colors ── */
+const stageColors: Record<PipelineStage, string> = {
+  customer: '#01696f',
+  get_quotes: '#0d8a8f',
+  waiting_carriers: '#f59e0b',
+  present_quotes: '#3b82f6',
+  waiting_client: '#f59e0b',
+  solicitud: '#8b5cf6',
+  emission: '#10b981',
+}
+
+/* ── Bottleneck deals (stuck > 5 days) ── */
+const stuckDeals = computed(() =>
+  mockDeals
+    .filter(d => d.daysAtStage > 5)
+    .sort((a, b) => b.daysAtStage - a.daysAtStage),
+)
+
+function severityColor(days: number) {
+  if (days > 10) return '#ef4444'
+  if (days > 5) return '#f59e0b'
+  return '#6b7280'
+}
+
+function severityBg(days: number) {
+  if (days > 10) return 'rgba(239,68,68,0.08)'
+  if (days > 5) return 'rgba(245,158,11,0.08)'
+  return 'transparent'
+}
+
+/* ── Stage breakdown tab ── */
+const activeStageTab = ref<PipelineStage>('customer')
+
+const stageDeals = computed(() =>
+  mockDeals.filter(d => d.currentStage === activeStageTab.value),
+)
+
+function stageLabelFor(id: PipelineStage) {
+  return PIPELINE_STAGES.find(s => s.id === id)?.label ?? id
+}
+
+function formatCurrency(v: number) {
+  return '$' + v.toLocaleString('en-US')
+}
+
+const toast = useToast()
+const nudgeConfirmDeal = ref<MockDeal | null>(null)
+
+function onNudge(deal: MockDeal) {
+  nudgeConfirmDeal.value = deal
+}
+
+function confirmNudge() {
+  if (nudgeConfirmDeal.value) {
+    toast.add({ title: `Nudge sent to ${nudgeConfirmDeal.value.customerName}`, color: 'success' })
+  }
+  nudgeConfirmDeal.value = null
+}
+
+function cancelNudge() {
+  nudgeConfirmDeal.value = null
+}
+</script>
+
+<template>
+  <div class="mc-page">
+    <!-- Header -->
+    <div class="mc-header">
+      <h1 class="mc-title">Mission Control</h1>
+      <p class="mc-subtitle">Pipeline analytics &amp; agent performance</p>
+    </div>
+
+    <!-- KPI Strip -->
+    <div class="mc-kpi-strip">
+      <div class="mc-card mc-kpi-card">
+        <span class="mc-kpi-label">Total Active Deals</span>
+        <span class="mc-kpi-value">{{ totalActiveDeals }}</span>
+      </div>
+      <div class="mc-card mc-kpi-card">
+        <span class="mc-kpi-label">Quotes This Month</span>
+        <span class="mc-kpi-value">24</span>
+      </div>
+      <div class="mc-card mc-kpi-card">
+        <span class="mc-kpi-label">Avg Days in Pipeline</span>
+        <span class="mc-kpi-value">8.3</span>
+      </div>
+      <div class="mc-card mc-kpi-card">
+        <span class="mc-kpi-label">Conversion Rate</span>
+        <span class="mc-kpi-value">62%</span>
+      </div>
+      <div class="mc-card mc-kpi-card">
+        <span class="mc-kpi-label">Pipeline Premium</span>
+        <span class="mc-kpi-value">{{ formatCurrency(totalPipelinePremium) }}</span>
+      </div>
+      <div class="mc-card mc-kpi-card">
+        <span class="mc-kpi-label">Bottleneck Stage</span>
+        <span class="mc-kpi-value mc-kpi-value--bottleneck">{{ bottleneckStage }}</span>
+      </div>
+    </div>
+
+    <!-- Pipeline Funnel -->
+    <div class="mc-card mc-section">
+      <h2 class="mc-section-title">Pipeline Funnel</h2>
+      <div class="mc-funnel">
+        <div
+          v-for="stage in PIPELINE_STAGES"
+          :key="stage.id"
+          class="mc-funnel-row"
+        >
+          <span class="mc-funnel-label">{{ stage.label }}</span>
+          <div class="mc-funnel-bar-track">
+            <div
+              class="mc-funnel-bar"
+              :style="{
+                width: Math.max((stageCounts[stage.id] / maxStageCount) * 100, 4) + '%',
+                background: stageColors[stage.id],
+              }"
+            />
+          </div>
+          <span class="mc-funnel-count">{{ stageCounts[stage.id] }}</span>
+          <span class="mc-funnel-pct">
+            {{ totalActiveDeals ? Math.round((stageCounts[stage.id] / totalActiveDeals) * 100) : 0 }}%
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Agent Performance -->
+    <div class="mc-card mc-section">
+      <h2 class="mc-section-title">Agent Performance</h2>
+      <div class="mc-table-wrap">
+        <table class="mc-table">
+          <thead>
+            <tr>
+              <th>Agent</th>
+              <th>Active Deals</th>
+              <th>Quotes Sent</th>
+              <th>Conversion</th>
+              <th>Avg Response</th>
+              <th>Pipeline Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="a in agents" :key="a.name">
+              <td class="mc-agent-name">{{ a.name }}</td>
+              <td>{{ a.activeDeals }}</td>
+              <td>{{ a.quotesSent }}</td>
+              <td>
+                <span
+                  class="mc-badge"
+                  :style="{ background: a.conversionRate >= 70 ? 'rgba(16,185,129,0.1)' : a.conversionRate >= 50 ? 'rgba(245,158,11,0.1)' : 'rgba(239,68,68,0.1)', color: a.conversionRate >= 70 ? '#059669' : a.conversionRate >= 50 ? '#d97706' : '#dc2626' }"
+                >
+                  {{ a.conversionRate }}%
+                </span>
+              </td>
+              <td>{{ a.avgResponseTime }}</td>
+              <td>{{ formatCurrency(a.pipelineValue) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Bottleneck Analysis -->
+    <div class="mc-card mc-section">
+      <h2 class="mc-section-title">Bottleneck Analysis</h2>
+      <p class="mc-section-desc">Deals stuck at a stage for more than 5 days</p>
+      <div v-if="stuckDeals.length === 0" class="mc-empty">No bottlenecks detected.</div>
+      <div v-else class="mc-stuck-list">
+        <div
+          v-for="deal in stuckDeals"
+          :key="deal.id"
+          class="mc-stuck-row"
+          :style="{ background: severityBg(deal.daysAtStage) }"
+        >
+          <div class="mc-stuck-info">
+            <span class="mc-stuck-name">{{ deal.customerName }}</span>
+            <span class="mc-stuck-meta">
+              <span
+                class="mc-stuck-days"
+                :style="{ color: severityColor(deal.daysAtStage) }"
+              >
+                {{ deal.daysAtStage }}d
+              </span>
+              at {{ stageLabelFor(deal.currentStage) }}
+            </span>
+          </div>
+          <span class="mc-stuck-agent">{{ deal.agent }}</span>
+          <button class="mc-btn-nudge" @click="onNudge(deal)">Nudge</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Stage Breakdown -->
+    <div class="mc-card mc-section">
+      <h2 class="mc-section-title">Stage Breakdown</h2>
+      <div class="mc-tab-bar">
+        <button
+          v-for="stage in PIPELINE_STAGES"
+          :key="stage.id"
+          class="mc-tab"
+          :class="{ 'mc-tab--active': activeStageTab === stage.id }"
+          @click="activeStageTab = stage.id"
+        >
+          {{ stage.label }}
+        </button>
+      </div>
+
+      <div v-if="stageDeals.length === 0" class="mc-empty">
+        <UIcon name="i-heroicons-inbox" style="width: 20px; height: 20px; color: #c0c0bc;" />
+        <p>No deals at this stage</p>
+      </div>
+      <div v-else class="mc-table-wrap">
+        <table class="mc-table">
+          <thead>
+            <tr>
+              <th>Customer</th>
+              <th>Product Line</th>
+              <th>Days at Stage</th>
+              <th>Agent</th>
+              <th>Premium</th>
+              <th>Form Completion</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="deal in stageDeals" :key="deal.id">
+              <td class="mc-agent-name">{{ deal.customerName }}</td>
+              <td>{{ deal.productLine }}</td>
+              <td>
+                <span :style="{ color: deal.daysAtStage > 5 ? severityColor(deal.daysAtStage) : 'inherit', fontWeight: deal.daysAtStage > 5 ? 600 : 400 }">
+                  {{ deal.daysAtStage }}d
+                </span>
+              </td>
+              <td>{{ deal.agent }}</td>
+              <td>{{ formatCurrency(deal.premium) }}</td>
+              <td>
+                <div class="mc-progress-wrap">
+                  <div class="mc-progress-track">
+                    <div
+                      class="mc-progress-fill"
+                      :style="{ width: deal.formCompletion + '%' }"
+                    />
+                  </div>
+                  <span class="mc-progress-label">{{ deal.formCompletion }}%</span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Nudge confirmation modal -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition duration-150 ease-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="nudgeConfirmDeal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30" @click.self="cancelNudge">
+          <div class="w-full max-w-sm rounded-xl border border-[var(--card-border)] bg-white p-6 shadow-xl">
+            <div class="flex items-start gap-3">
+              <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg" style="background: rgba(1,105,111,0.08); color: #01696f;">
+                <UIcon name="i-heroicons-bell-alert" style="width: 18px; height: 18px;" />
+              </div>
+              <div class="min-w-0">
+                <p class="text-[14px] font-semibold text-[var(--text-primary)]">Send nudge?</p>
+                <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+                  This will send a follow-up reminder to <span class="font-semibold text-[var(--text-primary)]">{{ nudgeConfirmDeal.customerName }}</span> about their pending deal.
+                </p>
+              </div>
+            </div>
+            <div class="mt-5 flex justify-end gap-2">
+              <UButton color="neutral" variant="soft" size="sm" @click="cancelNudge">Cancel</UButton>
+              <UButton color="primary" size="sm" @click="confirmNudge">Send nudge</UButton>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+/* ── Page ── */
+.mc-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 1120px;
+}
+
+/* ── Header ── */
+.mc-header {
+  margin-bottom: 4px;
+}
+.mc-title {
+  font-size: 24px;
+  font-weight: 650;
+  letter-spacing: -0.015em;
+  color: var(--text-primary);
+}
+.mc-subtitle {
+  font-size: 14px;
+  color: #8a8a86;
+  margin-top: 2px;
+}
+
+/* ── Card ── */
+.mc-card {
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+
+/* ── KPI strip ── */
+.mc-kpi-strip {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 12px;
+}
+.mc-kpi-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 12px;
+  gap: 6px;
+}
+.mc-kpi-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  text-align: center;
+}
+.mc-kpi-value {
+  font-size: 22px;
+  font-weight: 650;
+  color: var(--text-primary);
+}
+.mc-kpi-value--bottleneck {
+  font-size: 14px;
+  font-weight: 600;
+  color: #01696f;
+}
+
+/* ── Section ── */
+.mc-section {
+  padding: 20px 24px;
+}
+.mc-section-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 14px;
+}
+.mc-section-desc {
+  font-size: 13px;
+  color: #8a8a86;
+  margin-top: -8px;
+  margin-bottom: 14px;
+}
+
+/* ── Funnel ── */
+.mc-funnel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.mc-funnel-row {
+  display: grid;
+  grid-template-columns: 140px 1fr 36px 44px;
+  align-items: center;
+  gap: 10px;
+}
+.mc-funnel-label {
+  font-size: 13px;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.mc-funnel-bar-track {
+  height: 22px;
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.mc-funnel-bar {
+  height: 100%;
+  border-radius: 6px;
+  transition: width 0.4s ease;
+  min-width: 4px;
+}
+.mc-funnel-count {
+  font-size: 14px;
+  font-weight: 600;
+  text-align: right;
+  color: var(--text-primary);
+}
+.mc-funnel-pct {
+  font-size: 12px;
+  color: #8a8a86;
+  text-align: right;
+}
+
+/* ── Table ── */
+.mc-table-wrap {
+  overflow-x: auto;
+}
+.mc-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.mc-table th {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  font-weight: 500;
+  text-align: left;
+  padding: 0 12px 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+.mc-table td {
+  padding: 10px 12px;
+  color: var(--text-primary);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+.mc-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.mc-agent-name {
+  font-weight: 500;
+}
+
+/* ── Badge ── */
+.mc-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+/* ── Stuck list ── */
+.mc-stuck-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.mc-stuck-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+.mc-stuck-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.mc-stuck-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.mc-stuck-meta {
+  font-size: 12px;
+  color: #8a8a86;
+}
+.mc-stuck-days {
+  font-weight: 600;
+}
+.mc-stuck-agent {
+  font-size: 12px;
+  color: #8a8a86;
+  min-width: 120px;
+}
+.mc-btn-nudge {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 4px 14px;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: #fff;
+  color: #01696f;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s;
+}
+.mc-btn-nudge:hover {
+  background: rgba(1, 105, 111, 0.06);
+}
+
+/* ── Tab bar ── */
+.mc-tab-bar {
+  display: inline-flex;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 3px;
+  border-radius: 10px;
+  gap: 2px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+.mc-tab {
+  font-size: 12px;
+  font-weight: 500;
+  padding: 5px 12px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: #6b6b68;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+.mc-tab--active {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* ── Progress bar ── */
+.mc-progress-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.mc-progress-track {
+  flex: 1;
+  height: 4px;
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 2px;
+  overflow: hidden;
+  min-width: 60px;
+}
+.mc-progress-fill {
+  height: 100%;
+  background: #01696f;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+.mc-progress-label {
+  font-size: 12px;
+  color: #8a8a86;
+  min-width: 32px;
+}
+
+/* ── Empty state ── */
+.mc-empty {
+  font-size: 13px;
+  color: #8a8a86;
+  padding: 20px 0;
+  text-align: center;
+}
+
+/* ── Responsive ── */
+@media (max-width: 900px) {
+  .mc-kpi-strip {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@media (max-width: 600px) {
+  .mc-kpi-strip {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
diff --git a/app/pages/quotes/new.vue b/app/pages/quotes/new.vue
new file mode 100644
index 0000000..740a545
--- /dev/null
+++ b/app/pages/quotes/new.vue
@@ -0,0 +1,994 @@
+<script setup lang="ts">
+import { MOCK_CUSTOMERS, fmtMoney, customerTier, type MockCustomer, type CustomerTier } from '~/data/mock-customers'
+
+usePageTitle('New Quote')
+
+/* ── Pipeline bar ── */
+const { deals: allDeals, getActiveDeal, createDeal } = useSalesPipeline()
+const route = useRoute()
+const activeDealId = ref<string | null>(route.query.deal as string | null)
+
+const pipelineDeal = computed(() => {
+  if (activeDealId.value) return allDeals.value.find(d => d.id === activeDealId.value) ?? null
+  return null
+})
+
+// Active deals for the deal picker (exclude completed emissions)
+const activeDeals = computed(() => allDeals.value.filter(d => d.currentStage !== 'emission').slice(0, 10))
+
+function onPipelineNavigate(stage: string) {
+  // Navigation map for pipeline stages
+  const stageRoutes: Record<string, string> = {
+    customer: '/quotes/new',
+    get_quotes: '/quotes/new',
+    present_quotes: '/quotes/compare',
+    solicitud: '/onboarding/solicitud',
+    emission: '/onboarding/emissions',
+  }
+  const route = stageRoutes[stage]
+  if (route) navigateTo(route)
+}
+
+/* ── Steps ── */
+type QuoteStep = 'customer' | 'product'
+const currentStep = ref<QuoteStep>('customer')
+
+/* ── Customer selection ── */
+const customerSearch = ref('')
+const selectedCustomer = ref<MockCustomer | null>(null)
+const manualEntry = ref(false)
+
+/* ── Tier filter ── */
+type TierFilter = 'all' | CustomerTier
+const activeTierFilter = ref<TierFilter>('all')
+
+const tierMeta: Record<CustomerTier, { label: string; icon: string; color: string; bg: string; desc: string }> = {
+  quick_lead: { label: 'Quick Lead', icon: 'i-heroicons-bolt', color: '#c27b1a', bg: 'rgba(194,123,26,0.07)', desc: 'Name + contact only' },
+  lead:       { label: 'Lead', icon: 'i-heroicons-user-plus', color: '#7c3aed', bg: 'rgba(124,58,237,0.07)', desc: 'Profile info, no policies' },
+  customer:   { label: 'Customer', icon: 'i-heroicons-shield-check', color: '#01696f', bg: 'rgba(1,105,111,0.07)', desc: 'Active policies' },
+  cancelled:  { label: 'Cancelled', icon: 'i-heroicons-x-circle', color: '#c13838', bg: 'rgba(193,56,56,0.07)', desc: 'All policies cancelled/lapsed' },
+}
+
+const tierFilterTabs = computed(() => {
+  const all = MOCK_CUSTOMERS
+  const counts: Record<TierFilter, number> = {
+    all: all.length,
+    quick_lead: all.filter(c => customerTier(c) === 'quick_lead').length,
+    lead: all.filter(c => customerTier(c) === 'lead').length,
+    customer: all.filter(c => customerTier(c) === 'customer').length,
+    cancelled: all.filter(c => customerTier(c) === 'cancelled').length,
+  }
+  return [
+    { id: 'all' as TierFilter, label: 'All', count: counts.all },
+    { id: 'customer' as TierFilter, label: 'Customers', count: counts.customer },
+    { id: 'lead' as TierFilter, label: 'Leads', count: counts.lead },
+    { id: 'quick_lead' as TierFilter, label: 'Quick Leads', count: counts.quick_lead },
+    { id: 'cancelled' as TierFilter, label: 'Cancelled', count: counts.cancelled },
+  ]
+})
+
+const filteredCustomers = computed(() => {
+  let list = MOCK_CUSTOMERS
+
+  // Tier filter
+  if (activeTierFilter.value !== 'all') {
+    list = list.filter(c => customerTier(c) === activeTierFilter.value)
+  }
+
+  // Search
+  const q = customerSearch.value.trim().toLowerCase()
+  if (q) {
+    list = list.filter(c =>
+      c.name.toLowerCase().includes(q) ||
+      c.email.toLowerCase().includes(q) ||
+      c.documentId.toLowerCase().includes(q) ||
+      c.id.toLowerCase().includes(q) ||
+      c.phone.includes(q) ||
+      c.tags.some(t => t.toLowerCase().includes(q))
+    )
+  }
+
+  return list
+})
+
+function selectCustomer(c: MockCustomer) {
+  selectedCustomer.value = c
+  currentStep.value = 'product'
+}
+
+function skipToManual() {
+  manualEntry.value = true
+  selectedCustomer.value = null
+  currentStep.value = 'product'
+}
+
+function goBackToCustomer() {
+  currentStep.value = 'customer'
+}
+
+/* ── Product line cards ── */
+const lobCards: { id: string; label: string; hint: string; icon: string; to: string }[] = [
+  { id: 'auto', label: 'Auto', hint: 'Vehicles, fleet, and liability coverage.', icon: 'i-heroicons-truck', to: '/quotes/auto' },
+  { id: 'health', label: 'Health', hint: 'Individual, corporate, and group medical.', icon: 'i-heroicons-heart', to: '/quotes/health' },
+  { id: 'life', label: 'Life', hint: 'Term, whole life, key person, and group.', icon: 'i-heroicons-shield-check', to: '/quotes/life' },
+  { id: 'general_risk', label: 'General Risk', hint: 'Property, liability, marine, and specialty.', icon: 'i-heroicons-building-office-2', to: '/quotes/general-risk' },
+  { id: 'custom', label: 'Custom', hint: 'Manual or non-standard product lines.', icon: 'i-heroicons-puzzle-piece', to: '/quotes/custom' },
+]
+
+/* ── Helpers ── */
+function customerPolicySummary(c: MockCustomer) {
+  if (c.policies.length === 0) return 'No policies'
+  const lines = [...new Set(c.policies.map(p => p.line))]
+  return `${c.policies.length} ${c.policies.length === 1 ? 'policy' : 'policies'} · ${lines.join(', ')}`
+}
+
+function customerPaymentClass(c: MockCustomer) {
+  if (c.paymentStatus === 'Overdue') return 'nq-badge-warn'
+  if (c.paymentStatus === 'Grace period') return 'nq-badge-grace'
+  if (c.paymentStatus === 'N/A') return 'nq-badge-na'
+  return 'nq-badge-ok'
+}
+
+function tierOf(c: MockCustomer) {
+  return customerTier(c)
+}
+
+/** Compact info line depending on tier */
+function customerInfoLine(c: MockCustomer): string {
+  const t = customerTier(c)
+  if (t === 'quick_lead') {
+    const parts: string[] = []
+    if (c.phone) parts.push(c.phone)
+    if (c.email) parts.push(c.email)
+    return parts.join(' · ') || 'Minimal info captured'
+  }
+  if (t === 'lead') {
+    return c.email + (c.address ? ` · ${c.address}` : '')
+  }
+  return c.email
+}
+
+/** Premium total (0 for leads) */
+function customerPremium(c: MockCustomer): number {
+  return c.policies.reduce((s, p) => s + p.premium, 0)
+}
+</script>
+
+<template>
+  <div class="nq-page">
+    <!-- Back -->
+    <NuxtLink to="/quotes" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Back to overview</UButton>
+    </NuxtLink>
+
+    <!-- Sales flow indicator -->
+    <SalesFlowIndicator current-stage="get_quotes" />
+
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Get Quotes</h1>
+        <p class="mt-1 max-w-2xl text-[13px] text-[var(--text-muted)]">
+          {{ currentStep === 'customer' ? 'Select a customer to quote, or enter details manually.' : 'Choose a product line to begin the quoting wizard.' }}
+        </p>
+      </div>
+    </div>
+
+    <!-- Pipeline bar — active deal context -->
+    <div v-if="activeDeals.length > 0" class="nq-pipeline-zone">
+      <div v-if="!pipelineDeal" class="nq-deal-picker">
+        <div class="flex items-center gap-2 text-[12px] text-[var(--text-muted)]">
+          <UIcon name="i-heroicons-arrow-path" style="width: 13px; height: 13px; opacity: 0.5;" />
+          <span class="font-medium">Continue an active deal:</span>
+        </div>
+        <div class="flex flex-wrap gap-2 mt-2">
+          <button
+            v-for="d in activeDeals" :key="d.id"
+            type="button"
+            class="nq-deal-chip"
+            @click="activeDealId = d.id"
+          >
+            <span class="font-semibold">{{ d.customerName.split(' ').slice(0, 2).join(' ') }}</span>
+            <span class="nq-deal-chip-line">{{ d.productLine }}</span>
+          </button>
+        </div>
+      </div>
+      <template v-else>
+        <div class="flex items-center justify-between mb-1">
+          <span class="text-[11px] font-semibold uppercase tracking-wider text-[#8a8a86]">Active Deal</span>
+          <button type="button" class="text-[11px] text-[var(--text-muted)] hover:text-[var(--text-primary)]" @click="activeDealId = null">Switch deal</button>
+        </div>
+        <SalesPipelineBar :deal="pipelineDeal" @navigate="onPipelineNavigate" />
+      </template>
+    </div>
+
+    <!-- Step indicator -->
+    <div class="nq-steps">
+      <div class="nq-step" :class="currentStep === 'customer' ? 'nq-step-active' : 'nq-step-done'" @click="goBackToCustomer">
+        <div class="nq-step-circle">
+          <UIcon v-if="currentStep === 'product'" name="i-heroicons-check" style="width: 12px; height: 12px;" />
+          <span v-else>1</span>
+        </div>
+        <span class="nq-step-label">Customer</span>
+      </div>
+      <div class="nq-step-line" :class="currentStep === 'product' ? 'nq-step-line-done' : ''" />
+      <div class="nq-step" :class="currentStep === 'product' ? 'nq-step-active' : ''">
+        <div class="nq-step-circle">2</div>
+        <span class="nq-step-label">Product</span>
+      </div>
+    </div>
+
+    <!-- ═══ STEP 1: Customer selection ═══ -->
+    <template v-if="currentStep === 'customer'">
+      <!-- Manual entry option -->
+      <div class="nq-manual-banner">
+        <div class="flex items-center gap-3 min-w-0">
+          <div class="nq-manual-icon">
+            <UIcon name="i-heroicons-pencil-square" style="width: 18px; height: 18px;" />
+          </div>
+          <div class="min-w-0">
+            <p class="text-[13px] font-semibold text-[var(--text-primary)]">Manual quote entry</p>
+            <p class="text-[12px] text-[var(--text-muted)]">Skip customer selection and enter details directly in the quoting form.</p>
+          </div>
+        </div>
+        <button type="button" class="nq-manual-btn" @click="skipToManual">
+          Enter manually
+          <UIcon name="i-heroicons-arrow-right" style="width: 12px; height: 12px;" />
+        </button>
+      </div>
+
+      <!-- Tier filter tabs + search -->
+      <div class="nq-filter-bar">
+        <div class="nq-tier-tabs">
+          <button
+            v-for="tab in tierFilterTabs"
+            :key="tab.id"
+            type="button"
+            class="nq-tier-tab"
+            :class="activeTierFilter === tab.id ? 'nq-tier-tab-on' : 'nq-tier-tab-off'"
+            @click="activeTierFilter = tab.id"
+          >
+            {{ tab.label }}
+            <span class="nq-tier-count" :class="activeTierFilter === tab.id ? 'nq-tier-count-on' : ''">{{ tab.count }}</span>
+          </button>
+        </div>
+        <div class="nq-search-wrap">
+          <UIcon name="i-heroicons-magnifying-glass" style="width: 15px; height: 15px; color: #8a8a86;" />
+          <input
+            v-model="customerSearch"
+            type="text"
+            class="nq-search"
+            placeholder="Search by name, email, phone, ID, or tag..."
+          />
+          <kbd v-if="!customerSearch" class="nq-kbd">/</kbd>
+        </div>
+      </div>
+
+      <!-- Results count -->
+      <div class="flex items-center justify-between gap-3">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.04em] text-[#8a8a86]">
+          {{ activeTierFilter === 'all' ? 'All contacts' : tierMeta[activeTierFilter as CustomerTier]?.label }}
+        </p>
+        <span class="text-[11px] text-[var(--text-muted)]">{{ filteredCustomers.length }} results</span>
+      </div>
+
+      <!-- Customer cards -->
+      <div class="nq-customer-grid">
+        <button
+          v-for="c in filteredCustomers"
+          :key="c.id"
+          type="button"
+          class="nq-customer-card"
+          :class="tierOf(c) === 'cancelled' ? 'nq-card-cancelled' : ''"
+          @click="selectCustomer(c)"
+        >
+          <!-- Top row: avatar + name + tier badge -->
+          <div class="nq-customer-top">
+            <div class="nq-customer-avatar" :style="{ background: tierMeta[tierOf(c)].bg, color: tierMeta[tierOf(c)].color }">
+              {{ c.name.split(' ').map(w => w[0]).join('').slice(0, 2) }}
+            </div>
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2 flex-wrap">
+                <p class="text-[14px] font-semibold text-[var(--text-primary)] truncate">{{ c.name }}</p>
+                <!-- Tier badge -->
+                <span
+                  class="nq-tier-badge"
+                  :style="{ background: tierMeta[tierOf(c)].bg, color: tierMeta[tierOf(c)].color }"
+                >
+                  <UIcon :name="tierMeta[tierOf(c)].icon" style="width: 10px; height: 10px;" />
+                  {{ tierMeta[tierOf(c)].label }}
+                </span>
+                <!-- Payment status (only for customers) -->
+                <span v-if="tierOf(c) === 'customer'" :class="customerPaymentClass(c)">{{ c.paymentStatus }}</span>
+              </div>
+              <p class="text-[11px] text-[var(--text-muted)] truncate mt-0.5">{{ customerInfoLine(c) }}</p>
+            </div>
+            <UIcon name="i-heroicons-chevron-right" style="width: 16px; height: 16px; color: #c0c0bc; flex-shrink: 0;" />
+          </div>
+
+          <!-- Meta row — adapts to tier -->
+          <div class="nq-customer-meta">
+            <!-- Quick lead: just tags -->
+            <template v-if="tierOf(c) === 'quick_lead'">
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">Source</span>
+                <span class="nq-stat-value">{{ c.tags.filter(t => t !== 'Quick lead').join(', ') || '—' }}</span>
+              </div>
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">Added</span>
+                <span class="nq-stat-value">{{ c.since }}</span>
+              </div>
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">Agent</span>
+                <span class="nq-stat-value">{{ c.agent }}</span>
+              </div>
+            </template>
+
+            <!-- Lead: profile data -->
+            <template v-else-if="tierOf(c) === 'lead'">
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">ID</span>
+                <span class="nq-stat-value">{{ c.documentId }}</span>
+              </div>
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">Type</span>
+                <span class="nq-stat-value">{{ c.type }}</span>
+              </div>
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">Agent</span>
+                <span class="nq-stat-value">{{ c.agent }}</span>
+              </div>
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">Added</span>
+                <span class="nq-stat-value">{{ c.since }}</span>
+              </div>
+            </template>
+
+            <!-- Customer / Cancelled: full stats -->
+            <template v-else>
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">ID</span>
+                <span class="nq-stat-value">{{ c.documentId }}</span>
+              </div>
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">Type</span>
+                <span class="nq-stat-value">{{ c.type }}</span>
+              </div>
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">Premium</span>
+                <span class="nq-stat-value">{{ customerPremium(c) > 0 ? fmtMoney(customerPremium(c)) + '/yr' : '—' }}</span>
+              </div>
+              <div class="nq-customer-stat">
+                <span class="nq-stat-label">Agent</span>
+                <span class="nq-stat-value">{{ c.agent }}</span>
+              </div>
+            </template>
+          </div>
+
+          <!-- Policies line (customers + cancelled) -->
+          <div v-if="c.policies.length > 0" class="nq-customer-policies">
+            <UIcon name="i-heroicons-document-text" style="width: 12px; height: 12px; color: #8a8a86; flex-shrink: 0;" />
+            <span class="text-[11px] text-[var(--text-muted)]">{{ customerPolicySummary(c) }}</span>
+            <!-- Cancelled inline warning -->
+            <span v-if="tierOf(c) === 'cancelled'" class="nq-cancelled-hint">
+              <UIcon name="i-heroicons-exclamation-triangle" style="width: 10px; height: 10px;" />
+              All policies inactive
+            </span>
+          </div>
+
+          <!-- Activity hint for leads -->
+          <div v-if="(tierOf(c) === 'lead' || tierOf(c) === 'quick_lead') && c.activity.length > 0" class="nq-customer-policies">
+            <UIcon name="i-heroicons-clock" style="width: 12px; height: 12px; color: #8a8a86; flex-shrink: 0;" />
+            <span class="text-[11px] text-[var(--text-muted)]">{{ c.activity[0]?.text }}</span>
+          </div>
+
+          <!-- Tags -->
+          <div v-if="c.tags.length > 0" class="nq-tag-row">
+            <span
+              v-for="tag in c.tags.slice(0, 3)"
+              :key="tag"
+              class="nq-tag"
+            >{{ tag }}</span>
+            <span v-if="c.tags.length > 3" class="nq-tag nq-tag-more">+{{ c.tags.length - 3 }}</span>
+          </div>
+        </button>
+      </div>
+
+      <div v-if="filteredCustomers.length === 0" class="nq-empty">
+        <UIcon name="i-heroicons-user-group" style="width: 32px; height: 32px; color: #c0c0bc;" />
+        <p class="text-[13px] text-[var(--text-muted)] mt-2">No contacts match your search.</p>
+        <button type="button" class="nq-manual-btn mt-3" @click="skipToManual">Enter details manually</button>
+      </div>
+    </template>
+
+    <!-- ═══ STEP 2: Product line selection ═══ -->
+    <template v-if="currentStep === 'product'">
+      <!-- Selected customer summary -->
+      <div v-if="selectedCustomer" class="nq-selected-banner" :class="tierOf(selectedCustomer) === 'cancelled' ? 'nq-selected-cancelled' : ''">
+        <div class="flex items-center gap-3 min-w-0 flex-1">
+          <div class="nq-customer-avatar" :style="{ background: tierMeta[tierOf(selectedCustomer)].bg, color: tierMeta[tierOf(selectedCustomer)].color }">
+            {{ selectedCustomer.name.split(' ').map(w => w[0]).join('').slice(0, 2) }}
+          </div>
+          <div class="min-w-0">
+            <div class="flex items-center gap-2">
+              <p class="text-[14px] font-semibold text-[var(--text-primary)]">{{ selectedCustomer.name }}</p>
+              <span
+                class="nq-tier-badge"
+                :style="{ background: tierMeta[tierOf(selectedCustomer)].bg, color: tierMeta[tierOf(selectedCustomer)].color }"
+              >
+                <UIcon :name="tierMeta[tierOf(selectedCustomer)].icon" style="width: 10px; height: 10px;" />
+                {{ tierMeta[tierOf(selectedCustomer)].label }}
+              </span>
+            </div>
+            <p class="text-[12px] text-[var(--text-muted)]">
+              {{ customerInfoLine(selectedCustomer) }}
+              <template v-if="tierOf(selectedCustomer) === 'customer'"> · {{ customerPolicySummary(selectedCustomer) }}</template>
+            </p>
+          </div>
+        </div>
+        <button type="button" class="nq-change-btn" @click="goBackToCustomer">
+          <UIcon name="i-heroicons-arrows-right-left" style="width: 12px; height: 12px;" />
+          Change
+        </button>
+      </div>
+      <div v-else class="nq-selected-banner nq-selected-manual">
+        <div class="flex items-center gap-3 min-w-0 flex-1">
+          <div class="nq-manual-avatar">
+            <UIcon name="i-heroicons-pencil-square" style="width: 16px; height: 16px;" />
+          </div>
+          <div class="min-w-0">
+            <p class="text-[14px] font-semibold text-[var(--text-primary)]">Manual entry</p>
+            <p class="text-[12px] text-[var(--text-muted)]">Customer details will be entered in the quoting form.</p>
+          </div>
+        </div>
+        <button type="button" class="nq-change-btn" @click="goBackToCustomer">
+          <UIcon name="i-heroicons-arrows-right-left" style="width: 12px; height: 12px;" />
+          Select customer instead
+        </button>
+      </div>
+
+      <!-- Cancelled customer warning -->
+      <div v-if="selectedCustomer && tierOf(selectedCustomer) === 'cancelled'" class="nq-cancelled-banner">
+        <UIcon name="i-heroicons-exclamation-triangle" style="width: 16px; height: 16px; color: #c13838; flex-shrink: 0;" />
+        <div class="min-w-0">
+          <p class="text-[13px] font-semibold text-[#c13838]">Cancelled customer</p>
+          <p class="text-[12px] text-[var(--text-muted)]">All previous policies are cancelled or lapsed. This is a win-back opportunity — proceed with a fresh quote.</p>
+        </div>
+      </div>
+
+      <!-- Quick lead / lead info hint -->
+      <div v-if="selectedCustomer && (tierOf(selectedCustomer) === 'quick_lead' || tierOf(selectedCustomer) === 'lead')" class="nq-lead-hint-banner">
+        <UIcon name="i-heroicons-information-circle" style="width: 16px; height: 16px; color: #7c3aed; flex-shrink: 0;" />
+        <div class="min-w-0">
+          <p class="text-[13px] font-semibold" style="color: #5b21b6;">
+            {{ tierOf(selectedCustomer) === 'quick_lead' ? 'Quick lead — limited info' : 'Lead — no existing policies' }}
+          </p>
+          <p class="text-[12px] text-[var(--text-muted)]">
+            {{ tierOf(selectedCustomer) === 'quick_lead'
+              ? 'Only basic contact info was captured. The quoting form will need all details filled manually.'
+              : 'This contact has a full profile but no policies yet. Profile data will pre-fill the quoting form.'
+            }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Existing policies hint (customers only) -->
+      <div v-if="selectedCustomer && tierOf(selectedCustomer) === 'customer' && selectedCustomer.policies.length > 0" class="nq-existing">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.04em] text-[#8a8a86] mb-2">Existing coverage</p>
+        <div class="nq-existing-pills">
+          <span v-for="p in selectedCustomer.policies" :key="p.id" class="nq-existing-pill">
+            <span class="nq-existing-dot" />
+            {{ p.line }} · {{ p.carrier }} · {{ fmtMoney(p.premium) }}
+          </span>
+        </div>
+        <p class="text-[11px] text-[var(--text-muted)] mt-2">Consider cross-sell opportunities in lines not currently covered.</p>
+      </div>
+
+      <!-- Product line cards -->
+      <div class="nq-section">
+        <p class="text-[11px] font-semibold uppercase tracking-[0.04em] text-[#8a8a86] mb-3">Select product line</p>
+        <div class="grid gap-4 sm:grid-cols-2">
+          <NuxtLink
+            v-for="card in lobCards"
+            :key="card.id"
+            :to="card.to + (selectedCustomer ? `?customer=${selectedCustomer.id}` : '')"
+            class="nq-lob-card group"
+          >
+            <div class="nq-lob-icon">
+              <UIcon :name="card.icon" class="h-5 w-5" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="font-semibold text-[var(--text-primary)] group-hover:text-[#01696f]">{{ card.label }}</p>
+              <p class="mt-1 text-sm text-[var(--text-muted)]">{{ card.hint }}</p>
+            </div>
+            <UIcon
+              name="i-heroicons-chevron-right"
+              class="ml-auto mt-0.5 h-4 w-4 shrink-0 text-[var(--text-muted)] opacity-0 transition group-hover:opacity-100"
+            />
+          </NuxtLink>
+        </div>
+      </div>
+
+      <UAlert
+        color="neutral"
+        variant="soft"
+        icon="i-heroicons-information-circle"
+        title="What is a quote?"
+        description="A quote collects the risk details, selects carriers to solicit, and tracks the response — single or comparative. Customer data will be pre-filled from the selected profile."
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* ── Pipeline zone ── */
+.nq-pipeline-zone {
+  padding: 0;
+}
+.nq-deal-picker {
+  padding: 12px 16px;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+.nq-deal-chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 12px; border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  font-size: 12px; color: var(--text-primary);
+  cursor: pointer; transition: all 150ms ease;
+}
+.nq-deal-chip:hover { border-color: rgba(1,105,111,0.2); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
+.nq-deal-chip-line {
+  font-size: 10px; font-weight: 600; padding: 0 5px;
+  border-radius: 9999px; background: rgba(1,105,111,0.07); color: #01696f;
+}
+
+.nq-page {
+  max-width: 64rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-bottom: 3rem;
+}
+
+/* ── Steps ── */
+.nq-steps {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 0 4px;
+}
+.nq-step {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: opacity 150ms ease;
+}
+.nq-step:hover { opacity: 0.8; }
+.nq-step-circle {
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  border: 2px solid rgba(0,0,0,0.1);
+  color: #8a8a86;
+  background: #fff;
+  transition: all 200ms ease;
+}
+.nq-step-active .nq-step-circle {
+  background: #01696f;
+  border-color: #01696f;
+  color: #fff;
+}
+.nq-step-done .nq-step-circle {
+  background: rgba(1,105,111,0.08);
+  border-color: #01696f;
+  color: #01696f;
+}
+.nq-step-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #8a8a86;
+}
+.nq-step-active .nq-step-label { color: var(--text-primary); font-weight: 600; }
+.nq-step-done .nq-step-label { color: #01696f; }
+
+.nq-step-line {
+  flex: 1;
+  height: 2px;
+  margin: 0 12px;
+  background: rgba(0,0,0,0.08);
+  border-radius: 1px;
+  transition: background 300ms ease;
+}
+.nq-step-line-done { background: #01696f; }
+
+/* ── Manual entry banner ── */
+.nq-manual-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 18px;
+  border-radius: 10px;
+  border: 1px dashed rgba(0,0,0,0.1);
+  background: rgba(0,0,0,0.015);
+  flex-wrap: wrap;
+}
+.nq-manual-icon {
+  width: 36px; height: 36px;
+  border-radius: 10px;
+  background: rgba(0,0,0,0.04);
+  color: #8a8a86;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.nq-manual-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border-radius: 7px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.nq-manual-btn:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+
+/* ── Filter bar ── */
+.nq-filter-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.nq-tier-tabs {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0,0,0,0.04);
+  overflow-x: auto;
+}
+.nq-tier-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.nq-tier-tab-on {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+.nq-tier-tab-off {
+  background: transparent;
+  color: var(--text-muted);
+}
+.nq-tier-tab-off:hover { color: var(--text-primary); }
+.nq-tier-count {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 9999px;
+  background: rgba(0,0,0,0.06);
+  color: var(--text-muted);
+}
+.nq-tier-count-on {
+  background: rgba(1,105,111,0.1);
+  color: #01696f;
+}
+
+/* ── Search ── */
+.nq-section {}
+.nq-search-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  transition: border-color 150ms ease;
+}
+.nq-search-wrap:focus-within { border-color: #01696f; }
+.nq-search {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: transparent;
+}
+.nq-search::placeholder { color: #8a8a86; }
+.nq-kbd {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: rgba(0,0,0,0.04);
+  border: 1px solid rgba(0,0,0,0.08);
+  color: #8a8a86;
+  font-family: inherit;
+}
+
+/* ── Customer cards ── */
+.nq-customer-grid {
+  display: grid;
+  gap: 8px;
+}
+.nq-customer-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 16px;
+  border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  text-align: left;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.nq-customer-card:hover {
+  border-color: rgba(1,105,111,0.2);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+.nq-card-cancelled {
+  border-color: rgba(193,56,56,0.08);
+  background: rgba(193,56,56,0.01);
+}
+.nq-card-cancelled:hover {
+  border-color: rgba(193,56,56,0.2);
+}
+.nq-customer-top {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.nq-customer-avatar {
+  width: 36px; height: 36px;
+  border-radius: 10px;
+  background: rgba(1,105,111,0.08);
+  color: #01696f;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.nq-customer-meta {
+  display: flex;
+  gap: 16px;
+  padding-left: 46px;
+  flex-wrap: wrap;
+}
+.nq-customer-stat { display: flex; flex-direction: column; gap: 1px; }
+.nq-stat-label { font-size: 10px; font-weight: 500; color: #8a8a86; text-transform: uppercase; letter-spacing: 0.03em; }
+.nq-stat-value { font-size: 12px; font-weight: 500; color: var(--text-primary); font-variant-numeric: tabular-nums; }
+
+.nq-customer-policies {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding-left: 46px;
+  flex-wrap: wrap;
+}
+
+/* ── Tier badge ── */
+.nq-tier-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 1px 7px;
+  border-radius: 9999px;
+  font-size: 10px;
+  font-weight: 600;
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+}
+
+/* ── Tags ── */
+.nq-tag-row {
+  display: flex;
+  gap: 4px;
+  padding-left: 46px;
+  flex-wrap: wrap;
+}
+.nq-tag {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 7px;
+  border-radius: 4px;
+  background: rgba(0,0,0,0.04);
+  color: #8a8a86;
+}
+.nq-tag-more {
+  background: rgba(0,0,0,0.06);
+  color: #6b6b68;
+}
+
+/* ── Cancelled hint ── */
+.nq-cancelled-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #c13838;
+  margin-left: 4px;
+}
+
+/* ── Badges ── */
+.nq-badge-ok {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(15,123,95,0.06); color: #0f7b5f; white-space: nowrap;
+}
+.nq-badge-warn {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(193,56,56,0.06); color: #c13838; white-space: nowrap;
+}
+.nq-badge-grace {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(194,123,26,0.06); color: #c27b1a; white-space: nowrap;
+}
+.nq-badge-na {
+  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 9999px;
+  background: rgba(0,0,0,0.04); color: #8a8a86; white-space: nowrap;
+}
+
+/* ── Empty ── */
+.nq-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 16px;
+  text-align: center;
+}
+
+/* ── Selected customer banner ── */
+.nq-selected-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: 10px;
+  border: 1px solid rgba(1,105,111,0.15);
+  background: rgba(1,105,111,0.02);
+  flex-wrap: wrap;
+}
+.nq-selected-cancelled {
+  border-color: rgba(193,56,56,0.15);
+  background: rgba(193,56,56,0.02);
+}
+.nq-selected-manual {
+  border-color: rgba(0,0,0,0.08);
+  background: rgba(0,0,0,0.015);
+  border-style: dashed;
+}
+.nq-change-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.nq-change-btn:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+.nq-manual-avatar {
+  width: 36px; height: 36px;
+  border-radius: 10px;
+  background: rgba(0,0,0,0.04);
+  color: #8a8a86;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ── Contextual banners ── */
+.nq-cancelled-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: 10px;
+  background: rgba(193,56,56,0.03);
+  border: 1px solid rgba(193,56,56,0.1);
+}
+.nq-lead-hint-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: 10px;
+  background: rgba(124,58,237,0.03);
+  border: 1px solid rgba(124,58,237,0.1);
+}
+
+/* ── Existing coverage ── */
+.nq-existing {
+  padding: 14px 16px;
+  border-radius: 10px;
+  background: rgba(124,58,237,0.02);
+  border: 1px solid rgba(124,58,237,0.08);
+}
+.nq-existing-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.nq-existing-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  background: rgba(124,58,237,0.05);
+  font-size: 11px;
+  font-weight: 500;
+  color: #5b21b6;
+}
+.nq-existing-dot {
+  width: 5px; height: 5px;
+  border-radius: 50%;
+  background: #7c3aed;
+}
+
+/* ── LOB cards ── */
+.nq-lob-card {
+  display: flex;
+  align-items: start;
+  gap: 12px;
+  padding: 18px;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  transition: all 200ms ease;
+  text-decoration: none;
+}
+.nq-lob-card:hover {
+  border-color: rgba(1,105,111,0.2);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+}
+.nq-lob-icon {
+  width: 44px; height: 44px;
+  border-radius: 12px;
+  background: rgba(1,105,111,0.06);
+  color: #01696f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 200ms ease;
+}
+.nq-lob-card:hover .nq-lob-icon { background: rgba(1,105,111,0.1); }
+</style>
diff --git a/app/pages/registration/client.vue b/app/pages/registration/client.vue
new file mode 100644
index 0000000..de5ed2c
--- /dev/null
+++ b/app/pages/registration/client.vue
@@ -0,0 +1,417 @@
+<script setup lang="ts">
+import type { SelectItem } from '@nuxt/ui'
+import type { ClientRegistrationNatural } from '~/types/brokerage-registration'
+import {
+  createEmptyClientRegistration,
+  toIndividualCustomerBody,
+  useClientCaptureMeta
+} from '~/composables/useClientRegistrationModel'
+
+definePageMeta({ ssr: false })
+usePageTitle('Client registration')
+
+const route = useRoute()
+const router = useRouter()
+const submitting = ref(false)
+const toast = useToast()
+const { $customer } = useNuxtApp()
+
+/* ── Success state ── */
+const createdCustomerId = ref<string | null>(null)
+const createdCustomerName = ref('')
+const showSuccess = computed(() => !!createdCustomerId.value)
+
+const customerType = ref<'individual' | 'corporate'>(
+  route.query.type === 'corporate' ? 'corporate' : 'individual'
+)
+
+const form = ref<ClientRegistrationNatural>(createEmptyClientRegistration())
+const captureMeta = ref(useClientCaptureMeta())
+
+const corporateForm = ref({
+  legal_name: '',
+  commercial_name: '',
+  ruc: '',
+  legal_rep_name: '',
+  legal_rep_document_id: '',
+  email: '',
+  phone: '',
+  address: ''
+})
+
+const idTypeItems = ref<SelectItem[]>([
+  { label: 'Cédula', value: 'cedula' },
+  { label: 'Pasaporte', value: 'pasaporte' },
+  { label: 'RUC', value: 'ruc' }
+])
+
+const isValidIndividual = computed(() => {
+  const f = form.value
+  return (
+    !!f.primerNombre.trim() &&
+    !!f.apellidoPaterno.trim() &&
+    !!f.correoElectronicoPersonal.trim() &&
+    !!f.cedulaOPasaporte.trim()
+  )
+})
+
+const isValidCorporate = computed(() => corporateForm.value.legal_name && corporateForm.value.ruc)
+
+async function submitIndividual() {
+  submitting.value = true
+  try {
+    const body = toIndividualCustomerBody(form.value)
+    const data = (await $customer('/customers', {
+      method: 'POST',
+      body
+    })) as { data?: { id: string } }
+    toast.add({ title: 'Customer created', color: 'success' })
+    createdCustomerName.value = `${form.value.primerNombre} ${form.value.apellidoPaterno}`.trim()
+    createdCustomerId.value = data?.data?.id ?? 'new'
+  } catch (e: unknown) {
+    const err = e as { data?: { errors?: unknown }; message?: string }
+    toast.add({
+      title: 'Failed to create customer',
+      description: err?.data?.errors ? JSON.stringify(err.data.errors) : err?.message,
+      color: 'error'
+    })
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function submitCorporate() {
+  submitting.value = true
+  try {
+    const data = (await $customer('/customers/corporate', {
+      method: 'POST',
+      body: corporateForm.value
+    })) as { data?: { id: string } }
+    toast.add({ title: 'Corporate customer created', color: 'success' })
+    createdCustomerName.value = corporateForm.value.legal_name || corporateForm.value.commercial_name
+    createdCustomerId.value = data?.data?.id ?? 'new'
+  } catch (e: unknown) {
+    const err = e as { data?: { errors?: unknown }; message?: string }
+    toast.add({
+      title: 'Failed to create customer',
+      description: err?.data?.errors ? JSON.stringify(err.data.errors) : err?.message,
+      color: 'error'
+    })
+  } finally {
+    submitting.value = false
+  }
+}
+
+function resetAndAddAnother() {
+  createdCustomerId.value = null
+  createdCustomerName.value = ''
+  form.value = createEmptyClientRegistration()
+  corporateForm.value = {
+    legal_name: '', commercial_name: '', ruc: '',
+    legal_rep_name: '', legal_rep_document_id: '',
+    email: '', phone: '', address: ''
+  }
+}
+</script>
+
+<template>
+  <div class="nc mx-auto max-w-5xl space-y-6 pb-12">
+    <!-- Back -->
+    <NuxtLink to="/customers" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Customers</UButton>
+    </NuxtLink>
+
+    <!-- Sales flow indicator -->
+    <SalesFlowIndicator current-stage="customer" />
+
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">New Customer Registration</h1>
+        <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+          Extended capture aligned with brokerage intake. Core fields map to the customer API.
+        </p>
+      </div>
+      <div class="nc-meta-card">
+        <div class="nc-meta-row">
+          <span class="nc-meta-label">Operator</span>
+          <span class="nc-meta-value">{{ captureMeta.operadorNombre }}</span>
+        </div>
+        <div class="nc-meta-row">
+          <span class="nc-meta-label">Progress</span>
+          <span class="nc-meta-value">{{ captureMeta.progresoCapturaPct }}%</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Type toggle -->
+    <div class="nc-tabs">
+      <button
+        v-for="type in [
+          { id: 'individual' as const, label: 'Persona natural', icon: 'i-heroicons-user' },
+          { id: 'corporate' as const, label: 'Persona jurídica', icon: 'i-heroicons-building-office' }
+        ]"
+        :key="type.id"
+        type="button"
+        class="nc-tab"
+        :class="customerType === type.id ? 'nc-tab-on' : 'nc-tab-off'"
+        @click="customerType = type.id"
+      >
+        <UIcon :name="type.icon" style="width: 14px; height: 14px;" />
+        {{ type.label }}
+      </button>
+    </div>
+
+    <!-- ═══ Success state ═══ -->
+    <div v-if="showSuccess" class="nc-success">
+      <div class="nc-success-icon">
+        <UIcon name="i-heroicons-check-circle" style="width: 32px; height: 32px;" />
+      </div>
+      <h2 class="mt-4 text-[17px] font-semibold text-[var(--text-primary)]">Customer registered</h2>
+      <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+        <strong class="font-medium text-[var(--text-primary)]">{{ createdCustomerName }}</strong> has been added to your customer base.
+      </p>
+      <p class="mt-1 text-[12px] text-[var(--text-muted)]">What would you like to do next?</p>
+
+      <div class="nc-success-actions">
+        <NuxtLink :to="`/quotes/new?customer=${createdCustomerId}`" class="nc-success-btn nc-success-primary">
+          <UIcon name="i-heroicons-calculator" style="width: 16px; height: 16px;" />
+          Proceed to quote
+        </NuxtLink>
+        <NuxtLink :to="`/customers/${createdCustomerId}`" class="nc-success-btn nc-success-secondary">
+          <UIcon name="i-heroicons-user" style="width: 16px; height: 16px;" />
+          View profile
+        </NuxtLink>
+        <button type="button" class="nc-success-btn nc-success-secondary" @click="resetAndAddAnother">
+          <UIcon name="i-heroicons-plus" style="width: 16px; height: 16px;" />
+          Register another
+        </button>
+      </div>
+    </div>
+
+    <div v-if="!showSuccess && customerType === 'individual'" class="nc-card">
+      <div class="nc-card-head">
+        <UIcon name="i-heroicons-identification" style="width: 16px; height: 16px; color: #01696f;" />
+        <span>Datos del cliente</span>
+      </div>
+      <div class="nc-card-body space-y-6">
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          <UFormField label="ID (Mint)">
+            <UInput v-model="form.id" placeholder="Auto" disabled class="w-full" />
+          </UFormField>
+          <UFormField label="Grupo económico">
+            <UInput v-model="form.economicGroupId" class="w-full" />
+          </UFormField>
+          <UFormField label="Conglomerado">
+            <UInput v-model="form.conglomerateId" class="w-full" />
+          </UFormField>
+        </div>
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <UFormField label="Apellido paterno" required>
+            <UInput v-model="form.apellidoPaterno" class="w-full" />
+          </UFormField>
+          <UFormField label="Apellido materno">
+            <UInput v-model="form.apellidoMaterno" class="w-full" />
+          </UFormField>
+          <UFormField label="Primer nombre" required>
+            <UInput v-model="form.primerNombre" class="w-full" />
+          </UFormField>
+          <UFormField label="Segundo nombre">
+            <UInput v-model="form.segundoNombre" class="w-full" />
+          </UFormField>
+          <UFormField label="Fecha de nacimiento">
+            <UInput v-model="form.fechaNacimiento" type="date" class="w-full" />
+          </UFormField>
+          <UFormField label="Tipo de identificación">
+            <USelect v-model="form.tipoIdentificacion" :items="idTypeItems" class="w-full" />
+          </UFormField>
+          <UFormField label="Cédula / pasaporte" required>
+            <UInput v-model="form.cedulaOPasaporte" class="w-full" />
+          </UFormField>
+          <UFormField label="Teléfono celular">
+            <UInput v-model="form.telefonoCelular" class="w-full" />
+          </UFormField>
+          <UFormField label="Correo electrónico" required>
+            <UInput v-model="form.correoElectronicoPersonal" type="email" class="w-full" />
+          </UFormField>
+          <UFormField label="Ocupación">
+            <UInput v-model="form.ocupacion" class="w-full" />
+          </UFormField>
+        </div>
+        <div class="grid grid-cols-1 gap-4">
+          <UFormField label="Procedencia">
+            <UInput v-model="form.procedencia" class="w-full" />
+          </UFormField>
+          <UFormField label="Detalle">
+            <UTextarea v-model="form.detalle" :rows="2" class="w-full" />
+          </UFormField>
+          <UFormField label="Descripción">
+            <UTextarea v-model="form.descripcion" :rows="3" class="w-full" />
+          </UFormField>
+        </div>
+      </div>
+      <div class="nc-card-footer">
+        <NuxtLink to="/customers">
+          <UButton color="neutral" variant="soft" size="sm">Cancel</UButton>
+        </NuxtLink>
+        <UButton
+          color="primary"
+          icon="i-heroicons-check"
+          size="sm"
+          :loading="submitting"
+          :disabled="!isValidIndividual"
+          @click="submitIndividual"
+        >
+          Guardar cliente
+        </UButton>
+      </div>
+    </div>
+
+    <div v-if="!showSuccess && customerType === 'corporate'" class="nc-card">
+      <div class="nc-card-head">
+        <UIcon name="i-heroicons-building-office" style="width: 16px; height: 16px; color: #01696f;" />
+        <span>Persona jurídica</span>
+      </div>
+      <div class="nc-card-body space-y-4">
+        <UFormField label="Legal name" required>
+          <UInput v-model="corporateForm.legal_name" class="w-full" />
+        </UFormField>
+        <UFormField label="Commercial name">
+          <UInput v-model="corporateForm.commercial_name" class="w-full" />
+        </UFormField>
+        <UFormField label="RUC" required>
+          <UInput v-model="corporateForm.ruc" class="w-full" />
+        </UFormField>
+        <div class="grid grid-cols-2 gap-4">
+          <UFormField label="Legal representative">
+            <UInput v-model="corporateForm.legal_rep_name" class="w-full" />
+          </UFormField>
+          <UFormField label="Legal rep document ID">
+            <UInput v-model="corporateForm.legal_rep_document_id" class="w-full" />
+          </UFormField>
+        </div>
+        <UFormField label="Email">
+          <UInput v-model="corporateForm.email" type="email" class="w-full" />
+        </UFormField>
+        <UFormField label="Phone">
+          <UInput v-model="corporateForm.phone" class="w-full" />
+        </UFormField>
+        <UFormField label="Address">
+          <UInput v-model="corporateForm.address" class="w-full" />
+        </UFormField>
+      </div>
+      <div class="nc-card-footer">
+        <NuxtLink to="/customers">
+          <UButton color="neutral" variant="soft" size="sm">Cancel</UButton>
+        </NuxtLink>
+        <UButton
+          color="primary"
+          icon="i-heroicons-check"
+          size="sm"
+          :loading="submitting"
+          :disabled="!isValidCorporate"
+          @click="submitCorporate"
+        >
+          Create corporate customer
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.nc-section-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.06em; color: #8a8a86; margin-bottom: 4px;
+}
+.nc-meta-card {
+  padding: 10px 16px; border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06); background: #ffffff;
+  font-size: 12px;
+}
+.nc-meta-row { display: flex; gap: 12px; padding: 2px 0; }
+.nc-meta-label { color: #8a8a86; min-width: 60px; }
+.nc-meta-value { color: var(--text-primary); font-weight: 500; }
+
+.nc-tabs {
+  display: inline-flex; gap: 2px; padding: 3px;
+  border-radius: 10px; background: rgba(0,0,0,0.04);
+}
+.nc-tab {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 7px 16px; border-radius: 8px;
+  font-size: 13px; font-weight: 500;
+  border: none; cursor: pointer; transition: all 150ms ease;
+}
+.nc-tab-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.nc-tab-off { background: transparent; color: var(--text-muted); }
+.nc-tab-off:hover { color: var(--text-primary); }
+
+.nc-card {
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.nc-card-head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 14px 20px; border-bottom: 1px solid rgba(0,0,0,0.06);
+  font-size: 13px; font-weight: 600; color: var(--text-primary);
+}
+.nc-card-body { padding: 20px; }
+.nc-card-footer {
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 14px 20px; border-top: 1px solid rgba(0,0,0,0.06);
+}
+
+/* ── Success state ── */
+.nc-success {
+  padding: 48px 24px;
+  border-radius: 12px;
+  border: 1px solid rgba(1,105,111,0.12);
+  background: rgba(1,105,111,0.02);
+  text-align: center;
+}
+.nc-success-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px; height: 56px;
+  border-radius: 12px;
+  background: rgba(1,105,111,0.08);
+  color: #01696f;
+}
+.nc-success-actions {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 24px;
+}
+.nc-success-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 150ms ease;
+  text-decoration: none;
+  white-space: nowrap;
+  border: none;
+}
+.nc-success-primary {
+  background: #01696f;
+  color: #fff;
+}
+.nc-success-primary:hover { background: #015458; }
+.nc-success-secondary {
+  background: #fff;
+  color: var(--text-primary);
+  border: 1px solid rgba(0,0,0,0.1);
+}
+.nc-success-secondary:hover {
+  border-color: rgba(0,0,0,0.2);
+  background: rgba(0,0,0,0.02);
+}
+</style>
diff --git a/app/pages/registration/policy.vue b/app/pages/registration/policy.vue
new file mode 100644
index 0000000..a3e7c9c
--- /dev/null
+++ b/app/pages/registration/policy.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type { PolicyRegistration } from '~/types/brokerage-registration'
+import { POLICY_DRAFT_STORAGE_KEY } from '~/types/brokerage-registration'
+import {
+  createEmptyPolicyRegistration,
+  rebuildInstallmentSchedule,
+  setFinOneYearAfterInicio,
+  usePolicyDraftPersistence
+} from '~/composables/usePolicyRegistrationModel'
+
+definePageMeta({ ssr: false })
+usePageTitle('Policy registration')
+
+const toast = useToast()
+const form = ref<PolicyRegistration>(createEmptyPolicyRegistration())
+usePolicyDraftPersistence(form)
+
+watch(
+  () => form.value.inicioVigencia,
+  () => setFinOneYearAfterInicio(form.value)
+)
+
+function refreshSchedule() {
+  form.value.cuotas = rebuildInstallmentSchedule(form.value)
+}
+
+watch(
+  () => [form.value.numCuotas, form.value.primaBruta, form.value.inicioVigencia] as const,
+  () => refreshSchedule(),
+  { deep: true }
+)
+
+onMounted(() => {
+  refreshSchedule()
+})
+
+const draftSavedAt = ref<string | null>(null)
+
+function saveDraft() {
+  try {
+    localStorage.setItem(POLICY_DRAFT_STORAGE_KEY, JSON.stringify(form.value))
+    draftSavedAt.value = new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+    toast.add({ title: 'Borrador guardado', color: 'success' })
+  } catch {
+    toast.add({ title: 'No se pudo guardar', color: 'error' })
+  }
+}
+
+function clearDraft() {
+  form.value = createEmptyPolicyRegistration()
+  refreshSchedule()
+  try {
+    localStorage.removeItem(POLICY_DRAFT_STORAGE_KEY)
+  } catch {
+    /* ignore */
+  }
+  toast.add({ title: 'Borrador borrado', color: 'success' })
+}
+</script>
+
+<template>
+  <div class="min-h-screen space-y-8 bg-gray-50 p-8">
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div class="flex items-center gap-4">
+        <NuxtLink to="/policies">
+          <UButton icon="i-heroicons-arrow-left" color="neutral" variant="ghost">Back</UButton>
+        </NuxtLink>
+        <div>
+          <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Nuevo registro · Póliza</h1>
+          <p class="text-[13px] text-[var(--text-muted)]">
+            Condiciones particulares, plan de pagos y referencias. Draft persists in this browser until an API is
+            wired.
+          </p>
+        </div>
+      </div>
+      <div class="flex flex-wrap items-center gap-2">
+        <UButton color="neutral" variant="soft" @click="saveDraft">Guardar borrador</UButton>
+        <span v-if="draftSavedAt" class="text-[11px] text-emerald-600 font-medium">
+          <UIcon name="i-heroicons-check-circle" style="width: 13px; height: 13px; vertical-align: -2px;" /> Saved at {{ draftSavedAt }}
+        </span>
+        <UButton color="neutral" variant="ghost" @click="clearDraft">Limpiar</UButton>
+        <NuxtLink to="/onboarding/policy-upload/new">
+          <UButton color="primary" variant="soft">Manual policy upload</UButton>
+        </NuxtLink>
+      </div>
+    </div>
+
+    <UCard class="max-w-5xl">
+      <template #header>
+        <span class="font-semibold text-[var(--text-primary)]">Identificación y ramo</span>
+      </template>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <UFormField label="Número póliza Mint">
+          <UInput v-model="form.mintPolicyNumber" disabled class="w-full" />
+        </UFormField>
+        <UFormField label="ID contratante">
+          <UInput v-model="form.contratanteId" class="w-full" />
+        </UFormField>
+        <UFormField label="Ramo">
+          <UInput v-model="form.ramo" class="w-full" />
+        </UFormField>
+        <UFormField label="Sub ramo">
+          <UInput v-model="form.subRamo" class="w-full" />
+        </UFormField>
+        <UFormField label="Aseguradora">
+          <UInput v-model="form.aseguradora" class="w-full" />
+        </UFormField>
+        <UFormField label="Producto">
+          <UInput v-model="form.producto" class="w-full" />
+        </UFormField>
+        <UFormField label="Agencia">
+          <UInput v-model="form.agencia" class="w-full" />
+        </UFormField>
+        <UFormField label="Nº póliza proveedor">
+          <UInput v-model="form.numeroPolizaProveedor" class="w-full" />
+        </UFormField>
+        <UFormField label="Acreedor">
+          <UInput v-model="form.acreedor" class="w-full" />
+        </UFormField>
+      </div>
+    </UCard>
+
+    <UCard class="max-w-5xl">
+      <template #header>
+        <span class="font-semibold text-[var(--text-primary)]">Vigencia y comisiones</span>
+      </template>
+      <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <UFormField label="Fecha emisión">
+          <UInput v-model="form.fechaEmision" type="datetime-local" class="w-full" />
+        </UFormField>
+        <UFormField label="Inicio vigencia">
+          <UInput v-model="form.inicioVigencia" type="datetime-local" class="w-full" />
+        </UFormField>
+        <UFormField label="Fin vigencia">
+          <UInput v-model="form.finVigencia" type="datetime-local" class="w-full" />
+        </UFormField>
+      </div>
+      <p class="mb-2 text-xs text-[var(--text-muted)]">Comisiones agente (%)</p>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div v-for="row in form.comisiones" :key="row.idx" class="flex items-end gap-2">
+          <UFormField :label="`Agente ${row.idx}`" class="flex-1">
+            <UInput v-model="row.agenteId" placeholder="ID" class="w-full" />
+          </UFormField>
+          <UFormField label="%" class="w-24">
+            <UInput v-model="row.porcentaje" class="w-full" />
+          </UFormField>
+        </div>
+      </div>
+    </UCard>
+
+    <UCard class="max-w-5xl">
+      <template #header>
+        <span class="font-semibold text-[var(--text-primary)]">Primas y forma de pago</span>
+      </template>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <UFormField label="Forma de pago">
+          <UInput v-model="form.formaPago" class="w-full" />
+        </UFormField>
+        <UFormField label="Valor asegurado">
+          <UInput v-model="form.valorAsegurado" class="w-full" />
+        </UFormField>
+        <UFormField label="Prima bruta">
+          <UInput v-model="form.primaBruta" class="w-full" />
+        </UFormField>
+        <UFormField label="Impuesto %">
+          <UInput v-model="form.impuestoPct" class="w-full" />
+        </UFormField>
+        <UFormField label="Prima neta">
+          <UInput v-model="form.primaNeta" class="w-full" />
+        </UFormField>
+        <UFormField label="Número de cuotas">
+          <UInput v-model.number="form.numCuotas" type="number" min="1" max="60" class="w-full" />
+        </UFormField>
+      </div>
+    </UCard>
+
+    <UCard class="max-w-5xl">
+      <template #header>
+        <div class="flex w-full items-center justify-between gap-4">
+          <span class="font-semibold text-[var(--text-primary)]">Plan de pagos</span>
+          <UButton size="xs" color="neutral" variant="soft" @click="refreshSchedule">Regenerar cuotas</UButton>
+        </div>
+      </template>
+      <div class="overflow-x-auto rounded-lg border border-[var(--card-border)] bg-[var(--surface)]">
+        <table class="min-w-full text-sm">
+          <thead>
+            <tr class="border-b border-[var(--card-border)] bg-[var(--surface)] text-left text-[var(--text-muted)]">
+              <th class="px-3 py-2 font-medium">#</th>
+              <th class="px-3 py-2 font-medium">Fecha vencimiento</th>
+              <th class="px-3 py-2 font-medium">Prima</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in form.cuotas"
+              :key="row.n"
+              class="border-b border-[var(--divider)] last:border-0"
+            >
+              <td class="px-3 py-2 text-[var(--text-muted)]">{{ row.n }}</td>
+              <td class="px-3 py-2">
+                <UInput v-model="row.fechaVencimiento" type="datetime-local" size="sm" />
+              </td>
+              <td class="px-3 py-2">
+                <UInput v-model="row.prima" size="sm" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </UCard>
+
+    <UCard class="max-w-5xl">
+      <template #header>
+        <span class="font-semibold text-[var(--text-primary)]">Referencias y notas</span>
+      </template>
+      <div class="space-y-4">
+        <UFormField label="Cotización Mint ID">
+          <UInput v-model="form.cotizacionMintId" class="w-full" />
+        </UFormField>
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <UFormField label="PDF cotización (nombre)">
+            <UInput v-model="form.pdfCotizacionNombre" class="w-full" />
+          </UFormField>
+          <UFormField label="PDF póliza (nombre)">
+            <UInput v-model="form.pdfPolizaNombre" class="w-full" />
+          </UFormField>
+        </div>
+        <UFormField label="Notas">
+          <UTextarea v-model="form.notas" :rows="4" class="w-full" />
+        </UFormField>
+      </div>
+    </UCard>
+  </div>
+</template>
diff --git a/app/pages/renewals/[id].vue b/app/pages/renewals/[id].vue
new file mode 100644
index 0000000..9d99f7d
--- /dev/null
+++ b/app/pages/renewals/[id].vue
@@ -0,0 +1,837 @@
+<script setup lang="ts">
+import {
+  MOCK_RENEWAL_DETAILS, carrierStatusLabels, brokerStatusLabels,
+  priorityLabels, retentionRiskLabels, slaColor,
+  type RenewalDetail, type RenewalTask, type RenewalCommunication,
+  type CarrierRenewalStatus, type BrokerRenewalStatus, type RenewalPriority,
+  type RetentionRisk, type CoverageLine,
+} from '~/data/mock-renewals'
+
+definePageMeta({ ssr: false })
+usePageTitle('Renewal Detail')
+
+const route = useRoute()
+const renewalId = route.params.id as string
+const renewal = ref<RenewalDetail | null>(MOCK_RENEWAL_DETAILS[renewalId] ?? null)
+
+// ── Tabs ──────────────────────────────────────────────────────────────────────
+type TabId = 'overview' | 'tasks' | 'communications' | 'documents' | 'comparison'
+const activeTab = ref<TabId>('overview')
+const tabs: { id: TabId; label: string; icon: string }[] = [
+  { id: 'overview', label: 'Overview', icon: 'i-heroicons-squares-2x2' },
+  { id: 'tasks', label: 'Tasks', icon: 'i-heroicons-clipboard-document-check' },
+  { id: 'communications', label: 'Communications', icon: 'i-heroicons-chat-bubble-left-right' },
+  { id: 'documents', label: 'Documents', icon: 'i-heroicons-folder-open' },
+  { id: 'comparison', label: 'Comparison', icon: 'i-heroicons-arrows-right-left' },
+]
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const fmtMoney = (n: number) => '$' + n.toLocaleString('en-US', { minimumFractionDigits: 0 })
+const fmtDate = (d: string) => {
+  if (!d) return '—'
+  return new Date(d).toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric' })
+}
+const fmtDateTime = (d: string) => {
+  if (!d) return '—'
+  return new Date(d).toLocaleDateString('en-US', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+}
+
+const carrierPillClass = (s: CarrierRenewalStatus) => {
+  const map: Record<string, string> = {
+    pending: 'rnd-csp-pending', terms_received: 'rnd-csp-terms', remarketing: 'rnd-csp-remarket',
+    bound: 'rnd-csp-bound', declined: 'rnd-csp-declined', lapsed: 'rnd-csp-lapsed',
+  }
+  return map[s] ?? ''
+}
+const priorityClass = (p: RenewalPriority) => {
+  const map: Record<string, string> = { critical: 'rnd-pri-critical', high: 'rnd-pri-high', medium: 'rnd-pri-medium', low: 'rnd-pri-low' }
+  return map[p] ?? ''
+}
+const riskClass = (r: RetentionRisk) => {
+  const map: Record<string, string> = { high: 'rnd-risk-high', medium: 'rnd-risk-medium', low: 'rnd-risk-low' }
+  return map[r] ?? ''
+}
+const taskStatusClass = (s: string) => {
+  const map: Record<string, string> = { open: 'rnd-ts-open', in_progress: 'rnd-ts-progress', overdue: 'rnd-ts-overdue', done: 'rnd-ts-done' }
+  return map[s] ?? ''
+}
+const commIcon = (t: string) => {
+  const map: Record<string, string> = { email: 'i-heroicons-envelope', call: 'i-heroicons-phone', note: 'i-heroicons-pencil-square', system: 'i-heroicons-cog-6-tooth' }
+  return map[t] ?? 'i-heroicons-chat-bubble-left'
+}
+const deltaFlagClass = (flag: CoverageLine['flag']) => {
+  const map: Record<string, string> = { increase: 'rnd-delta-up', decrease: 'rnd-delta-down', same: '', new: 'rnd-delta-new', removed: 'rnd-delta-removed' }
+  return map[flag ?? ''] ?? ''
+}
+
+// ── Party filter ─────────────────────────────────────────────────────────────
+const activePartyId = ref<string | null>(null)
+const commTypeFilter = ref<string | null>(null)
+
+const filteredComms = computed(() => {
+  if (!renewal.value) return []
+  let comms = [...renewal.value.communications]
+  if (activePartyId.value) {
+    const party = renewal.value.parties.find(p => p.id === activePartyId.value)
+    if (party) comms = comms.filter(c => c.partyRole === party.role)
+  }
+  if (commTypeFilter.value) comms = comms.filter(c => c.type === commTypeFilter.value)
+  return comms.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+})
+
+// ── Tasks ─────────────────────────────────────────────────────────────────────
+const sortedTasks = computed(() => {
+  if (!renewal.value) return []
+  return [...renewal.value.tasks].sort((a, b) => {
+    const order: Record<string, number> = { overdue: 0, open: 1, in_progress: 2, done: 3 }
+    return (order[a.status] ?? 9) - (order[b.status] ?? 9)
+  })
+})
+
+const openActions = computed(() => {
+  if (!renewal.value) return []
+  return renewal.value.tasks.filter(t => t.status === 'open' || t.status === 'overdue' || t.status === 'in_progress')
+})
+
+// ── AI ────────────────────────────────────────────────────────────────────────
+const aiBriefOpen = ref(true)
+
+// ── Quick compose ─────────────────────────────────────────────────────────────
+const composeText = ref('')
+const composeType = ref<'email' | 'call' | 'note'>('note')
+
+// ── Action handlers ──────────────────────────────────────────────────────────
+const toast = useToast()
+function handleSendProposal() {
+  toast.add({ title: 'Proposal sent', description: `Renewal proposal sent to ${renewal.value?.customerName}.`, color: 'green' })
+}
+function handleSendFollowUp() {
+  toast.add({ title: 'Follow-up sent', description: 'Reminder email queued for delivery.', color: 'green' })
+}
+
+// ── Days display ─────────────────────────────────────────────────────────────
+function daysDisplay(d: number) {
+  if (d < 0) return `${Math.abs(d)}d past due`
+  if (d === 0) return 'Expires today'
+  return `${d}d until expiry`
+}
+function daysClass(d: number) {
+  if (d < 0) return 'rnd-days-past'
+  if (d <= 7) return 'rnd-days-critical'
+  if (d <= 30) return 'rnd-days-warn'
+  return ''
+}
+
+// ── Renewal history max ──────────────────────────────────────────────────────
+const maxHistoryPremium = computed(() => {
+  if (!renewal.value) return 1
+  return Math.max(...renewal.value.renewalHistory.map(h => h.premium), 1)
+})
+</script>
+
+<template>
+  <div class="rnd-root mx-auto max-w-6xl pb-12">
+    <!-- Not found -->
+    <template v-if="!renewal">
+      <div class="rnd-not-found">
+        <UIcon name="i-heroicons-exclamation-triangle" class="w-8 h-8" />
+        <h2>Renewal not found</h2>
+        <p>No renewal with ID <strong>{{ renewalId }}</strong> exists.</p>
+        <NuxtLink to="/renewals" class="rnd-back-link">Back to Renewals</NuxtLink>
+      </div>
+    </template>
+
+    <template v-else>
+      <!-- Back link -->
+      <NuxtLink to="/renewals" class="rnd-back-link">
+        <UIcon name="i-heroicons-arrow-left" class="w-3.5 h-3.5" />
+        Back to Renewals
+      </NuxtLink>
+
+      <!-- ═══════════ HEADER ═══════════ -->
+      <div class="rnd-detail-header">
+        <div class="rnd-header-left">
+          <div class="rnd-title-row">
+            <h1 class="rnd-title">{{ renewal.id }}</h1>
+            <span class="rnd-carrier-pill" :class="carrierPillClass(renewal.carrierStatus)">
+              {{ carrierStatusLabels[renewal.carrierStatus] }}
+            </span>
+            <span class="rnd-workflow-pill">
+              {{ brokerStatusLabels[renewal.brokerStatus] }}
+            </span>
+            <span class="rnd-priority-badge" :class="priorityClass(renewal.priority)">
+              {{ priorityLabels[renewal.priority] }}
+            </span>
+            <span class="rnd-risk-badge" :class="riskClass(renewal.retentionRisk)">
+              Risk: {{ retentionRiskLabels[renewal.retentionRisk] }}
+            </span>
+          </div>
+          <div class="rnd-subtitle">
+            <NuxtLink :to="`/customers/${renewal.customerId}`" class="rnd-subtitle-link">{{ renewal.customerName }}</NuxtLink>
+            <span class="rnd-sep">/</span>
+            <NuxtLink :to="`/policies/${renewal.policyId}`" class="rnd-subtitle-link">{{ renewal.policyNumber }}</NuxtLink>
+            <span class="rnd-sep">/</span>
+            <span>{{ renewal.carrier }}</span>
+            <span class="rnd-sep">/</span>
+            <span>{{ renewal.lob }}</span>
+          </div>
+          <div class="rnd-meta-row">
+            <span :class="daysClass(renewal.daysUntilExpiry)">{{ daysDisplay(renewal.daysUntilExpiry) }}</span>
+            <span class="rnd-sep">·</span>
+            <span>Expires {{ fmtDate(renewal.expiryDate) }}</span>
+            <span class="rnd-sep">·</span>
+            <span>Handler: <strong>{{ renewal.assignedTo }}</strong></span>
+            <span class="rnd-sep">·</span>
+            <span>{{ renewal.yearsAsClient }}yr client</span>
+          </div>
+        </div>
+        <div class="rnd-header-right">
+          <button v-if="renewal.brokerStatus === 'under_review' || renewal.brokerStatus === 'unreviewed'" class="rnd-action-btn" @click="handleSendProposal">
+            <UIcon name="i-heroicons-paper-airplane" class="w-4 h-4" />
+            Send Proposal
+          </button>
+          <button v-else-if="renewal.brokerStatus === 'awaiting_client_response'" class="rnd-action-btn" @click="handleSendFollowUp">
+            <UIcon name="i-heroicons-arrow-path" class="w-4 h-4" />
+            Send Follow-Up
+          </button>
+          <button v-else-if="renewal.brokerStatus === 'awaiting_payment'" class="rnd-action-btn" @click="toast.add({ title: 'Payment reminder sent', color: 'green' })">
+            <UIcon name="i-heroicons-banknotes" class="w-4 h-4" />
+            Collect Payment
+          </button>
+        </div>
+      </div>
+
+      <!-- ═══════════ PARTIES STRIP ═══════════ -->
+      <div class="rnd-party-strip">
+        <button class="rnd-party-chip" :class="{ 'rnd-party-active': !activePartyId }" @click="activePartyId = null">
+          <span class="rnd-party-avatar">ALL</span>
+          <span class="rnd-party-name">All Parties</span>
+        </button>
+        <button
+          v-for="party in renewal.parties"
+          :key="party.id"
+          class="rnd-party-chip"
+          :class="{ 'rnd-party-active': activePartyId === party.id }"
+          @click="activePartyId = activePartyId === party.id ? null : party.id"
+        >
+          <span class="rnd-party-avatar">{{ party.name.split(' ').map(w => w[0]).join('').slice(0, 2) }}</span>
+          <div class="rnd-party-info">
+            <span class="rnd-party-role">{{ party.role.replace('_', ' ') }}</span>
+            <span class="rnd-party-name">{{ party.name }}</span>
+          </div>
+          <span v-if="party.hasUnread" class="rnd-party-dot" />
+        </button>
+        <button class="rnd-party-chip rnd-party-add">
+          <UIcon name="i-heroicons-plus" class="w-3.5 h-3.5" />
+          Add Party
+        </button>
+      </div>
+
+      <!-- ═══════════ QUICK STATS ═══════════ -->
+      <div class="rnd-quick-strip">
+        <div class="rnd-quick-item">
+          <UIcon name="i-heroicons-currency-dollar" class="w-4 h-4 rnd-quick-icon" />
+          <div class="rnd-quick-data">
+            <span class="rnd-quick-value">{{ fmtMoney(renewal.currentPremium) }}</span>
+            <span class="rnd-quick-label">Current</span>
+          </div>
+        </div>
+        <div class="rnd-quick-sep" />
+        <div class="rnd-quick-item">
+          <UIcon name="i-heroicons-arrow-trending-up" class="w-4 h-4 rnd-quick-icon" />
+          <div class="rnd-quick-data">
+            <span class="rnd-quick-value">
+              <template v-if="renewal.renewalPremium !== null">
+                {{ fmtMoney(renewal.renewalPremium) }}
+                <span v-if="renewal.premiumDelta !== null" class="rnd-quick-delta" :class="renewal.premiumDelta > 0 ? 'rnd-delta-up' : 'rnd-delta-down'">
+                  {{ renewal.premiumDelta > 0 ? '+' : '' }}{{ renewal.premiumDelta }}%
+                </span>
+              </template>
+              <template v-else>—</template>
+            </span>
+            <span class="rnd-quick-label">Renewal</span>
+          </div>
+        </div>
+        <div class="rnd-quick-sep" />
+        <div class="rnd-quick-item">
+          <UIcon name="i-heroicons-chart-bar" class="w-4 h-4 rnd-quick-icon" />
+          <div class="rnd-quick-data">
+            <span class="rnd-quick-value">{{ (renewal.lossRatio * 100).toFixed(0) }}%</span>
+            <span class="rnd-quick-label">Loss Ratio</span>
+          </div>
+        </div>
+        <div class="rnd-quick-sep" />
+        <div class="rnd-quick-item">
+          <UIcon name="i-heroicons-banknotes" class="w-4 h-4 rnd-quick-icon" />
+          <div class="rnd-quick-data">
+            <span class="rnd-quick-value">{{ fmtMoney(renewal.commissionAmount) }}</span>
+            <span class="rnd-quick-label">Commission ({{ renewal.commissionRate }}%)</span>
+          </div>
+        </div>
+        <div class="rnd-quick-sep" />
+        <div class="rnd-quick-item">
+          <UIcon name="i-heroicons-folder-open" class="w-4 h-4 rnd-quick-icon" />
+          <div class="rnd-quick-data">
+            <span class="rnd-quick-value">
+              {{ renewal.documents.filter(d => d.required && d.fulfilled).length }}/{{ renewal.documents.filter(d => d.required).length }}
+            </span>
+            <span class="rnd-quick-label">Docs</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════ OPEN ACTIONS ═══════════ -->
+      <div v-if="openActions.length" class="rnd-action-panel">
+        <div class="rnd-action-header">
+          <UIcon name="i-heroicons-bell-alert" class="w-4 h-4" />
+          Open Actions
+          <span class="rnd-action-count">{{ openActions.length }}</span>
+        </div>
+        <div v-for="task in openActions" :key="task.id" class="rnd-action-row">
+          <span class="rnd-sla-dot" :class="`rnd-sla-${slaColor(task.slaPercent)}`" />
+          <span class="rnd-action-title">{{ task.title }}</span>
+          <span class="rnd-action-assignee">{{ task.assignee }}</span>
+          <span class="rnd-action-due" :class="{ 'rnd-action-overdue': task.status === 'overdue' }">{{ fmtDate(task.dueDate) }}</span>
+          <div class="rnd-action-btns">
+            <button v-if="task.aiGenerated" class="rnd-btn-escalate">Escalate</button>
+            <button v-if="task.aiGenerated" class="rnd-btn-dismiss">Dismiss</button>
+            <button v-if="task.type === 'send_proposal'" class="rnd-btn-draft">Draft Email</button>
+            <button v-if="task.type === 'follow_up'" class="rnd-btn-draft">Send Reminder</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════ AI RENEWAL BRIEF ═══════════ -->
+      <div v-if="renewal.aiRenewalBrief" class="rnd-ai-panel">
+        <div class="rnd-ai-header" @click="aiBriefOpen = !aiBriefOpen">
+          <span class="rnd-ai-badge">IA</span>
+          <span class="rnd-ai-title">Renewal Brief</span>
+          <UIcon :name="aiBriefOpen ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'" class="w-4 h-4 rnd-ai-toggle" />
+        </div>
+        <div v-if="aiBriefOpen" class="rnd-ai-body">
+          <p>{{ renewal.aiRenewalBrief }}</p>
+
+          <!-- Talk Track -->
+          <div v-if="renewal.aiTalkTrack && renewal.aiTalkTrack.length" class="rnd-ai-section">
+            <h4 class="rnd-ai-section-title">Talk Track</h4>
+            <ol class="rnd-ai-list">
+              <li v-for="(point, i) in renewal.aiTalkTrack" :key="i">{{ point }}</li>
+            </ol>
+          </div>
+
+          <!-- Retention Factors -->
+          <div v-if="renewal.aiRetentionFactors && renewal.aiRetentionFactors.length" class="rnd-ai-section">
+            <h4 class="rnd-ai-section-title">Retention Factors</h4>
+            <ul class="rnd-ai-list">
+              <li v-for="(factor, i) in renewal.aiRetentionFactors" :key="i">{{ factor }}</li>
+            </ul>
+          </div>
+
+          <button class="rnd-ai-regen">
+            <UIcon name="i-heroicons-arrow-path" class="w-3.5 h-3.5" />
+            Regenerar
+          </button>
+        </div>
+      </div>
+
+      <!-- ═══════════ TAB NAVIGATION ═══════════ -->
+      <div class="rnd-main-tabs">
+        <button
+          v-for="t in tabs"
+          :key="t.id"
+          type="button"
+          class="rnd-main-tab"
+          :class="activeTab === t.id ? 'rnd-main-tab-on' : 'rnd-main-tab-off'"
+          @click="activeTab = t.id"
+        >
+          <UIcon :name="t.icon" class="w-4 h-4" />
+          {{ t.label }}
+        </button>
+      </div>
+
+      <!-- ═══════════════════ OVERVIEW TAB ═══════════════════ -->
+      <template v-if="activeTab === 'overview'">
+        <!-- Renewal History -->
+        <div class="rnd-card">
+          <h3 class="rnd-card-title">Renewal History</h3>
+          <table class="rnd-table">
+            <thead>
+              <tr><th>Year</th><th>Carrier</th><th class="text-right">Premium</th><th>Outcome</th><th style="width: 40%;"></th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="h in renewal.renewalHistory" :key="h.year">
+                <td class="font-semibold">{{ h.year }}</td>
+                <td>{{ h.carrier }}</td>
+                <td class="text-right font-semibold">{{ fmtMoney(h.premium) }}</td>
+                <td>
+                  <span class="rnd-outcome" :class="`rnd-outcome-${h.outcome}`">{{ h.outcome }}</span>
+                </td>
+                <td>
+                  <div class="rnd-bar-wrap">
+                    <div class="rnd-bar" :style="{ width: (h.premium / maxHistoryPremium * 100) + '%' }" />
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Parties Detail -->
+        <div class="rnd-card">
+          <h3 class="rnd-card-title">Parties</h3>
+          <div class="rnd-parties-grid">
+            <div v-for="party in renewal.parties" :key="party.id" class="rnd-party-card">
+              <div class="rnd-party-card-avatar">{{ party.name.split(' ').map(w => w[0]).join('').slice(0, 2) }}</div>
+              <div>
+                <p class="rnd-party-card-name">{{ party.name }}</p>
+                <p class="rnd-party-card-role">{{ party.role.replace('_', ' ') }}<template v-if="party.company"> · {{ party.company }}</template></p>
+                <p v-if="party.email" class="rnd-party-card-contact">{{ party.email }}</p>
+                <p v-if="party.phone" class="rnd-party-card-contact">{{ party.phone }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Cancellation Data (if exists) -->
+        <div v-if="renewal.cancellationData" class="rnd-card rnd-card-cancel">
+          <h3 class="rnd-card-title" style="color: #c13838;">Cancellation Details</h3>
+          <div class="rnd-cancel-grid">
+            <div>
+              <span class="rnd-cancel-label">Reason</span>
+              <span class="rnd-cancel-value">{{ renewal.cancellationData.reason }}</span>
+            </div>
+            <div v-if="renewal.cancellationData.reasonDetail">
+              <span class="rnd-cancel-label">Detail</span>
+              <span class="rnd-cancel-value">{{ renewal.cancellationData.reasonDetail }}</span>
+            </div>
+            <div v-if="renewal.cancellationData.competitor">
+              <span class="rnd-cancel-label">Competitor</span>
+              <span class="rnd-cancel-value">{{ renewal.cancellationData.competitor }} @ {{ fmtMoney(renewal.cancellationData.competitorPremium!) }}</span>
+            </div>
+            <div>
+              <span class="rnd-cancel-label">Recoverable</span>
+              <span class="rnd-cancel-value" :style="renewal.cancellationData.recoverable ? 'color: #01696f;' : 'color: #c13838;'">{{ renewal.cancellationData.recoverable ? 'Yes' : 'No' }}</span>
+            </div>
+            <div>
+              <span class="rnd-cancel-label">Exit Date</span>
+              <span class="rnd-cancel-value">{{ fmtDate(renewal.cancellationData.exitDate) }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- ═══════════════════ TASKS TAB ═══════════════════ -->
+      <template v-if="activeTab === 'tasks'">
+        <div class="rnd-card">
+          <table class="rnd-table">
+            <thead>
+              <tr>
+                <th style="width: 28px;"></th>
+                <th>Task</th>
+                <th>Type</th>
+                <th>Status</th>
+                <th>Assignee</th>
+                <th>Due</th>
+                <th style="width: 28px;"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="t in sortedTasks" :key="t.id">
+                <td><span class="rnd-sla-dot" :class="`rnd-sla-${slaColor(t.slaPercent)}`" /></td>
+                <td class="font-medium">{{ t.title }}</td>
+                <td class="text-[var(--text-muted)]">{{ t.type.replace('_', ' ') }}</td>
+                <td><span :class="taskStatusClass(t.status)">{{ t.status.replace('_', ' ') }}</span></td>
+                <td>{{ t.assignee }}</td>
+                <td :class="t.status === 'overdue' ? 'rnd-action-overdue' : ''">{{ fmtDate(t.dueDate) }}</td>
+                <td>
+                  <UIcon v-if="t.aiGenerated" name="i-heroicons-sparkles" class="w-3.5 h-3.5" style="color: #01696f;" title="AI generated" />
+                </td>
+              </tr>
+              <tr v-if="!sortedTasks.length"><td colspan="7" class="rnd-table-empty">No tasks.</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+
+      <!-- ═══════════════════ COMMUNICATIONS TAB ═══════════════════ -->
+      <template v-if="activeTab === 'communications'">
+        <!-- Type filters -->
+        <div class="rnd-comm-filters">
+          <button class="rnd-comm-chip" :class="!commTypeFilter ? 'rnd-comm-chip-on' : 'rnd-comm-chip-off'" @click="commTypeFilter = null">All</button>
+          <button v-for="ct in ['email', 'call', 'note', 'system']" :key="ct" class="rnd-comm-chip" :class="commTypeFilter === ct ? 'rnd-comm-chip-on' : 'rnd-comm-chip-off'" @click="commTypeFilter = commTypeFilter === ct ? null : ct">
+            <UIcon :name="commIcon(ct)" class="w-3.5 h-3.5" />
+            {{ ct }}
+          </button>
+        </div>
+
+        <!-- Timeline -->
+        <div class="rnd-timeline">
+          <div v-for="c in filteredComms" :key="c.id" class="rnd-timeline-item">
+            <div class="rnd-timeline-icon" :class="`rnd-ti-${c.type}`">
+              <UIcon :name="commIcon(c.type)" class="w-4 h-4" />
+            </div>
+            <div class="rnd-timeline-content">
+              <div class="rnd-timeline-head">
+                <span class="rnd-timeline-from">{{ c.from }}</span>
+                <span v-if="c.to" class="rnd-timeline-to">→ {{ c.to }}</span>
+                <span class="rnd-timeline-dir">{{ c.direction }}</span>
+                <span v-if="c.templateUsed" class="rnd-timeline-tpl">template</span>
+                <span class="rnd-timeline-time">{{ fmtDateTime(c.timestamp) }}</span>
+              </div>
+              <p v-if="c.subject" class="rnd-timeline-subject">{{ c.subject }}</p>
+              <p class="rnd-timeline-body">{{ c.body }}</p>
+              <div v-if="c.aiDigest" class="rnd-ai-digest">
+                <span class="rnd-ai-badge" style="font-size: 9px;">IA</span>
+                {{ c.aiDigest }}
+              </div>
+            </div>
+          </div>
+          <div v-if="!filteredComms.length" class="rnd-table-empty" style="padding: 32px; text-align: center;">No communications found.</div>
+        </div>
+
+        <!-- Quick compose -->
+        <div class="rnd-compose">
+          <div class="rnd-compose-type">
+            <button v-for="ct in (['note', 'email', 'call'] as const)" :key="ct" class="rnd-compose-btn" :class="composeType === ct ? 'rnd-compose-btn-on' : ''" @click="composeType = ct">
+              <UIcon :name="commIcon(ct)" class="w-3.5 h-3.5" />
+              {{ ct }}
+            </button>
+          </div>
+          <textarea v-model="composeText" class="rnd-compose-input" placeholder="Add a note, log a call, or compose an email…" rows="2" />
+          <button class="rnd-compose-send" @click="composeText = ''; toast.add({ title: `${composeType} added`, color: 'green' })">
+            <UIcon name="i-heroicons-paper-airplane" class="w-3.5 h-3.5" />
+            Send
+          </button>
+        </div>
+      </template>
+
+      <!-- ═══════════════════ DOCUMENTS TAB ═══════════════════ -->
+      <template v-if="activeTab === 'documents'">
+        <div class="rnd-card">
+          <h3 class="rnd-card-title">Required Documents</h3>
+          <table class="rnd-table">
+            <thead>
+              <tr><th style="width: 28px;"></th><th>Document</th><th>Category</th><th>Uploaded By</th><th>Date</th></tr>
+            </thead>
+            <tbody>
+              <tr v-for="d in renewal.documents" :key="d.id">
+                <td>
+                  <span v-if="d.fulfilled" style="color: #01696f; font-weight: 700; font-size: 16px;">✓</span>
+                  <span v-else style="color: rgba(0,0,0,0.15); font-size: 20px;">○</span>
+                </td>
+                <td class="font-medium">{{ d.name }}</td>
+                <td class="text-[var(--text-muted)]">{{ d.category.replace(/_/g, ' ') }}</td>
+                <td>{{ d.uploadedBy || '—' }}</td>
+                <td>{{ d.uploadedAt ? fmtDate(d.uploadedAt) : '—' }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+
+      <!-- ═══════════════════ COMPARISON TAB ═══════════════════ -->
+      <template v-if="activeTab === 'comparison'">
+        <template v-if="renewal.comparison">
+          <!-- Premium Summary -->
+          <div class="rnd-comp-summary">
+            <div class="rnd-comp-item">
+              <span class="rnd-comp-label">Current Premium</span>
+              <span class="rnd-comp-value">{{ fmtMoney(renewal.comparison.currentPremium) }}</span>
+            </div>
+            <div class="rnd-comp-arrow">→</div>
+            <div class="rnd-comp-item">
+              <span class="rnd-comp-label">Renewal Premium</span>
+              <span class="rnd-comp-value">
+                {{ renewal.comparison.renewalPremium !== null ? fmtMoney(renewal.comparison.renewalPremium) : '—' }}
+                <span v-if="renewal.comparison.premiumDelta !== null" class="rnd-quick-delta" :class="renewal.comparison.premiumDelta > 0 ? 'rnd-delta-up' : 'rnd-delta-down'">
+                  {{ renewal.comparison.premiumDelta > 0 ? '+' : '' }}{{ renewal.comparison.premiumDelta }}%
+                </span>
+              </span>
+            </div>
+            <div class="rnd-comp-sep" />
+            <div class="rnd-comp-item">
+              <span class="rnd-comp-label">Current Deductible</span>
+              <span class="rnd-comp-value">{{ fmtMoney(renewal.comparison.currentDeductible) }}</span>
+            </div>
+            <div class="rnd-comp-arrow">→</div>
+            <div class="rnd-comp-item">
+              <span class="rnd-comp-label">Renewal Deductible</span>
+              <span class="rnd-comp-value">
+                {{ renewal.comparison.renewalDeductible !== null ? fmtMoney(renewal.comparison.renewalDeductible) : '—' }}
+                <span v-if="renewal.comparison.deductibleDelta !== null" class="rnd-quick-delta" :class="renewal.comparison.deductibleDelta > 0 ? 'rnd-delta-up' : 'rnd-delta-down'">
+                  {{ renewal.comparison.deductibleDelta > 0 ? '+' : '' }}{{ renewal.comparison.deductibleDelta }}%
+                </span>
+              </span>
+            </div>
+          </div>
+
+          <!-- Coverage Lines -->
+          <div class="rnd-card">
+            <h3 class="rnd-card-title">Coverage Comparison</h3>
+            <table class="rnd-table">
+              <thead>
+                <tr><th>Coverage</th><th class="text-right">Current</th><th class="text-right">Renewal</th><th class="text-center">Delta</th></tr>
+              </thead>
+              <tbody>
+                <tr v-for="line in renewal.comparison.coverageLines" :key="line.name">
+                  <td class="font-medium">{{ line.name }}</td>
+                  <td class="text-right">{{ typeof line.currentAmount === 'number' ? fmtMoney(line.currentAmount) : line.currentAmount }}</td>
+                  <td class="text-right">{{ line.renewalAmount !== null ? (typeof line.renewalAmount === 'number' ? fmtMoney(line.renewalAmount) : line.renewalAmount) : '—' }}</td>
+                  <td class="text-center">
+                    <span v-if="line.delta" :class="deltaFlagClass(line.flag)">{{ line.delta }}</span>
+                    <span v-else class="text-[var(--text-muted)] opacity-40">—</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- AI Analysis -->
+          <div v-if="renewal.comparison.aiAnalysis" class="rnd-ai-panel">
+            <div class="rnd-ai-header">
+              <span class="rnd-ai-badge">IA</span>
+              <span class="rnd-ai-title">Coverage Analysis</span>
+            </div>
+            <div class="rnd-ai-body">
+              <p>{{ renewal.comparison.aiAnalysis }}</p>
+            </div>
+          </div>
+        </template>
+        <div v-else class="rnd-card" style="text-align: center; padding: 48px 20px; color: #8a8a86;">
+          <UIcon name="i-heroicons-clock" class="w-8 h-8" style="margin: 0 auto 12px; display: block; opacity: 0.4;" />
+          <p class="font-semibold" style="color: #1a1a1a;">Waiting for renewal terms</p>
+          <p style="font-size: 13px; margin-top: 4px;">Comparison will be available once the carrier sends renewal terms.</p>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* =====================================================================
+   RENEWAL DETAIL PAGE — scoped, rnd- prefix
+   ===================================================================== */
+
+.rnd-root {
+  --rnd-brand: #01696f;
+  --rnd-brand-soft: rgba(1, 105, 111, 0.06);
+  --rnd-border: rgba(0, 0, 0, 0.06);
+  --rnd-muted: #8a8a86;
+  --rnd-red: #c13838;
+  --rnd-amber: #c27b1a;
+}
+
+/* ---- Not Found ---- */
+.rnd-not-found { text-align: center; padding: 80px 0; color: var(--rnd-muted); }
+.rnd-not-found h2 { font-size: 18px; font-weight: 600; margin: 12px 0 4px; color: #1a1a1a; }
+.rnd-not-found p { margin-bottom: 16px; font-size: 13px; }
+
+/* ---- Back link ---- */
+.rnd-back-link {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 12px; font-weight: 500; color: var(--rnd-muted);
+  text-decoration: none; margin-bottom: 12px; transition: color 150ms ease;
+}
+.rnd-back-link:hover { color: var(--rnd-brand); }
+
+/* ---- Header ---- */
+.rnd-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
+.rnd-header-left { display: flex; flex-direction: column; gap: 6px; }
+.rnd-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.rnd-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.rnd-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: #1a1a1a; line-height: 1; font-family: 'SF Mono', 'Fira Code', monospace; }
+.rnd-subtitle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #5c5650; flex-wrap: wrap; }
+.rnd-subtitle-link { color: var(--rnd-brand); text-decoration: none; font-weight: 500; }
+.rnd-subtitle-link:hover { text-decoration: underline; }
+.rnd-sep { color: var(--rnd-muted); opacity: 0.5; }
+.rnd-meta-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rnd-muted); flex-wrap: wrap; }
+
+/* ---- Action button ---- */
+.rnd-action-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px; border-radius: 8px;
+  background: #01696f; color: #fff;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.rnd-action-btn:hover { background: #015458; }
+
+/* ---- Status pills ---- */
+.rnd-carrier-pill { display: inline-flex; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
+.rnd-csp-pending { background: rgba(138,138,134,0.08); color: #8a8a86; }
+.rnd-csp-terms { background: rgba(59,130,246,0.08); color: #2563eb; }
+.rnd-csp-remarket { background: rgba(147,51,234,0.08); color: #9333ea; }
+.rnd-csp-bound { background: rgba(22,163,74,0.08); color: #16a34a; }
+.rnd-csp-declined { background: rgba(193,56,56,0.08); color: #c13838; }
+.rnd-csp-lapsed { background: rgba(0,0,0,0.06); color: #6b6b68; }
+.rnd-workflow-pill { display: inline-flex; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; border: 1px solid rgba(1,105,111,0.3); color: #01696f; }
+
+/* ---- Priority / Risk badges ---- */
+.rnd-priority-badge, .rnd-risk-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
+.rnd-pri-critical { background: rgba(193,56,56,0.12); color: #c13838; }
+.rnd-pri-high { background: rgba(194,123,26,0.08); color: #c27b1a; }
+.rnd-pri-medium { background: rgba(0,0,0,0.05); color: #6b6b68; }
+.rnd-pri-low { background: rgba(0,0,0,0.03); color: #8a8a86; }
+.rnd-risk-high { background: rgba(193,56,56,0.08); color: #c13838; }
+.rnd-risk-medium { background: rgba(194,123,26,0.08); color: #c27b1a; }
+.rnd-risk-low { background: rgba(22,163,74,0.08); color: #16a34a; }
+
+/* ---- Days ---- */
+.rnd-days-past { color: #8a8a86; }
+.rnd-days-critical { color: #c13838; font-weight: 600; }
+.rnd-days-warn { color: #c27b1a; }
+
+/* ---- Party strip ---- */
+.rnd-party-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; margin: 8px 0; }
+.rnd-party-chip { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--rnd-border); background: #fff; cursor: pointer; transition: all 150ms ease; white-space: nowrap; position: relative; }
+.rnd-party-chip:hover { border-color: rgba(1,105,111,0.3); }
+.rnd-party-active { border-color: #01696f; background: var(--rnd-brand-soft); }
+.rnd-party-avatar { width: 24px; height: 24px; border-radius: 50%; background: rgba(1,105,111,0.08); color: #01696f; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.rnd-party-info { display: flex; flex-direction: column; }
+.rnd-party-role { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rnd-muted); }
+.rnd-party-name { font-size: 12px; font-weight: 600; color: #1a1a1a; }
+.rnd-party-dot { width: 7px; height: 7px; border-radius: 50%; background: #c13838; position: absolute; top: 6px; right: 6px; }
+.rnd-party-add { border-style: dashed; color: var(--rnd-muted); font-size: 12px; font-weight: 500; }
+.rnd-party-add:hover { color: #01696f; border-color: rgba(1,105,111,0.3); }
+
+/* ---- Quick stats ---- */
+.rnd-quick-strip { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--rnd-border); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03); overflow-x: auto; }
+.rnd-quick-item { display: flex; align-items: center; gap: 8px; }
+.rnd-quick-icon { color: var(--rnd-muted); flex-shrink: 0; }
+.rnd-quick-data { display: flex; flex-direction: column; }
+.rnd-quick-value { font-size: 15px; font-weight: 700; color: #1a1a1a; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.rnd-quick-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rnd-muted); }
+.rnd-quick-sep { width: 1px; height: 28px; background: var(--rnd-border); flex-shrink: 0; }
+.rnd-quick-delta { font-size: 11px; font-weight: 700; margin-left: 4px; }
+.rnd-delta-up { color: #c13838; }
+.rnd-delta-down { color: #16a34a; }
+.rnd-delta-new { color: #2563eb; font-weight: 600; }
+.rnd-delta-removed { color: #c13838; text-decoration: line-through; }
+
+/* ---- Action panel ---- */
+.rnd-action-panel { border-radius: 12px; border: 1px solid var(--rnd-border); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03); overflow: hidden; }
+.rnd-action-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; font-weight: 700; color: #1a1a1a; border-bottom: 1px solid var(--rnd-border); }
+.rnd-action-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9999px; background: rgba(193,56,56,0.08); color: #c13838; }
+.rnd-action-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid rgba(0,0,0,0.03); font-size: 13px; }
+.rnd-action-row:last-child { border-bottom: none; }
+.rnd-action-title { flex: 1; font-weight: 500; }
+.rnd-action-assignee { font-size: 12px; color: var(--rnd-muted); min-width: 60px; }
+.rnd-action-due { font-size: 12px; color: var(--rnd-muted); min-width: 80px; }
+.rnd-action-overdue { color: #c13838 !important; font-weight: 600; }
+.rnd-action-btns { display: flex; gap: 4px; }
+.rnd-btn-escalate { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; background: rgba(193,56,56,0.06); color: #c13838; border: 1px solid rgba(193,56,56,0.15); cursor: pointer; }
+.rnd-btn-dismiss { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; background: transparent; color: var(--rnd-muted); border: 1px solid var(--rnd-border); cursor: pointer; }
+.rnd-btn-draft { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--rnd-brand-soft); color: #01696f; border: 1px solid rgba(1,105,111,0.15); cursor: pointer; }
+
+/* ---- SLA dot ---- */
+.rnd-sla-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
+.rnd-sla-green { background: #059669; }
+.rnd-sla-amber { background: #c27b1a; }
+.rnd-sla-red { background: #c13838; }
+
+/* ---- AI panel ---- */
+.rnd-ai-panel { background: var(--rnd-brand-soft); border: 1px solid var(--rnd-border); border-left: 3px solid #01696f; border-radius: 12px; overflow: hidden; }
+.rnd-ai-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; }
+.rnd-ai-badge { padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; background: #01696f; color: white; }
+.rnd-ai-title { font-size: 14px; font-weight: 700; color: #1a1a1a; flex: 1; }
+.rnd-ai-toggle { color: var(--rnd-muted); }
+.rnd-ai-body { padding: 0 18px 16px; font-size: 13px; line-height: 1.6; color: #3a3a38; }
+.rnd-ai-section { margin-top: 14px; }
+.rnd-ai-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #01696f; margin-bottom: 6px; }
+.rnd-ai-list { padding-left: 18px; font-size: 13px; line-height: 1.7; }
+.rnd-ai-list li { margin-bottom: 4px; }
+.rnd-ai-regen { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; color: #01696f; background: rgba(1,105,111,0.08); border: none; cursor: pointer; }
+.rnd-ai-regen:hover { background: rgba(1,105,111,0.15); }
+
+/* ---- Tabs ---- */
+.rnd-main-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rnd-border); margin-top: 8px; }
+.rnd-main-tab { display: flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--rnd-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; transition: all 150ms ease; }
+.rnd-main-tab-on { color: #01696f; border-bottom-color: #01696f; font-weight: 600; }
+.rnd-main-tab-off:hover { color: #1a1a1a; }
+
+/* ---- Card ---- */
+.rnd-card { background: #fff; border: 1px solid var(--rnd-border); border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); margin-top: 16px; }
+.rnd-card-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
+.rnd-card-cancel { border-left: 3px solid #c13838; }
+
+/* ---- Table ---- */
+.rnd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.rnd-table thead th { padding: 8px 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86; border-bottom: 1px solid var(--rnd-border); text-align: left; white-space: nowrap; }
+.rnd-table tbody td { padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.04); vertical-align: middle; }
+.rnd-table tbody tr:last-child td { border-bottom: none; }
+.rnd-table-empty { text-align: center; padding: 24px !important; color: var(--rnd-muted); font-size: 13px; }
+
+/* ---- Task status ---- */
+.rnd-ts-open { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(59,130,246,0.08); color: #2563eb; }
+.rnd-ts-progress { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(1,105,111,0.08); color: #01696f; }
+.rnd-ts-overdue { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(193,56,56,0.08); color: #c13838; }
+.rnd-ts-done { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(0,0,0,0.04); color: #8a8a86; }
+
+/* ---- History outcomes ---- */
+.rnd-outcome { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; white-space: nowrap; }
+.rnd-outcome-renewed { background: rgba(22,163,74,0.08); color: #16a34a; }
+.rnd-outcome-remarketed { background: rgba(147,51,234,0.08); color: #9333ea; }
+.rnd-outcome-cancelled { background: rgba(193,56,56,0.08); color: #c13838; }
+.rnd-outcome-new { background: rgba(59,130,246,0.08); color: #2563eb; }
+
+/* ---- History bar ---- */
+.rnd-bar-wrap { height: 6px; border-radius: 3px; background: rgba(0,0,0,0.04); overflow: hidden; }
+.rnd-bar { height: 100%; border-radius: 3px; background: #01696f; transition: width 300ms ease; }
+
+/* ---- Parties grid ---- */
+.rnd-parties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
+.rnd-party-card { display: flex; gap: 12px; padding: 14px; border-radius: 10px; border: 1px solid var(--rnd-border); }
+.rnd-party-card-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(1,105,111,0.08); color: #01696f; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.rnd-party-card-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
+.rnd-party-card-role { font-size: 11px; text-transform: uppercase; color: var(--rnd-muted); letter-spacing: 0.03em; }
+.rnd-party-card-contact { font-size: 12px; color: #5c5650; margin-top: 2px; }
+
+/* ---- Cancellation grid ---- */
+.rnd-cancel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
+.rnd-cancel-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rnd-muted); margin-bottom: 2px; }
+.rnd-cancel-value { font-size: 14px; font-weight: 600; color: #1a1a1a; }
+
+/* ---- Communications ---- */
+.rnd-comm-filters { display: flex; gap: 6px; margin-top: 12px; }
+.rnd-comm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 500; border: 1px solid var(--rnd-border); background: #fff; cursor: pointer; transition: all 150ms ease; text-transform: capitalize; }
+.rnd-comm-chip-on { background: #01696f; color: white; border-color: #01696f; }
+.rnd-comm-chip-off { color: var(--rnd-muted); }
+.rnd-comm-chip-off:hover { color: #1a1a1a; border-color: rgba(0,0,0,0.15); }
+
+.rnd-timeline { margin-top: 16px; display: flex; flex-direction: column; gap: 0; }
+.rnd-timeline-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
+.rnd-timeline-item:last-child { border-bottom: none; }
+.rnd-timeline-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.rnd-ti-email { background: rgba(59,130,246,0.08); color: #2563eb; }
+.rnd-ti-call { background: rgba(22,163,74,0.08); color: #16a34a; }
+.rnd-ti-note { background: rgba(194,123,26,0.08); color: #c27b1a; }
+.rnd-ti-system { background: rgba(1,105,111,0.08); color: #01696f; }
+.rnd-timeline-content { flex: 1; min-width: 0; }
+.rnd-timeline-head { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
+.rnd-timeline-from { font-weight: 600; color: #1a1a1a; }
+.rnd-timeline-to { color: var(--rnd-muted); }
+.rnd-timeline-dir { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,0.04); color: var(--rnd-muted); }
+.rnd-timeline-tpl { font-size: 9px; padding: 1px 5px; border-radius: 4px; background: rgba(1,105,111,0.06); color: #01696f; font-weight: 600; }
+.rnd-timeline-time { font-size: 11px; color: var(--rnd-muted); margin-left: auto; }
+.rnd-timeline-subject { font-size: 13px; font-weight: 600; color: #1a1a1a; margin-top: 4px; }
+.rnd-timeline-body { font-size: 13px; line-height: 1.5; color: #5c5650; margin-top: 4px; white-space: pre-line; }
+.rnd-ai-digest { margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--rnd-brand-soft); border-left: 2px solid #01696f; font-size: 12px; color: #3a3a38; display: flex; align-items: flex-start; gap: 8px; }
+
+/* ---- Compose ---- */
+.rnd-compose { margin-top: 16px; border: 1px solid var(--rnd-border); border-radius: 12px; background: #fff; padding: 14px; }
+.rnd-compose-type { display: flex; gap: 4px; margin-bottom: 10px; }
+.rnd-compose-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid var(--rnd-border); background: #fff; color: var(--rnd-muted); cursor: pointer; text-transform: capitalize; }
+.rnd-compose-btn-on { background: #01696f; color: white; border-color: #01696f; }
+.rnd-compose-input { width: 100%; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 10px 12px; font-size: 13px; resize: vertical; }
+.rnd-compose-input:focus { outline: none; border-color: #01696f; }
+.rnd-compose-send { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; background: #01696f; color: white; border: none; cursor: pointer; }
+.rnd-compose-send:hover { background: #015458; }
+
+/* ---- Comparison summary ---- */
+.rnd-comp-summary { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 12px; border: 1px solid var(--rnd-border); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03); flex-wrap: wrap; margin-top: 16px; }
+.rnd-comp-item { display: flex; flex-direction: column; }
+.rnd-comp-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rnd-muted); }
+.rnd-comp-value { font-size: 18px; font-weight: 700; color: #1a1a1a; font-variant-numeric: tabular-nums; }
+.rnd-comp-arrow { font-size: 18px; color: var(--rnd-muted); }
+.rnd-comp-sep { width: 1px; height: 36px; background: var(--rnd-border); }
+</style>
diff --git a/app/pages/renewals/index.vue b/app/pages/renewals/index.vue
new file mode 100644
index 0000000..748c6ae
--- /dev/null
+++ b/app/pages/renewals/index.vue
@@ -0,0 +1,499 @@
+<script setup lang="ts">
+import {
+  MOCK_RENEWALS, carrierStatusLabels, brokerStatusLabels, priorityLabels,
+  retentionRiskLabels, expiryBuckets, slaColor,
+  type Renewal, type CarrierRenewalStatus, type BrokerRenewalStatus,
+  type RenewalPriority, type RetentionRisk,
+} from '~/data/mock-renewals'
+
+usePageTitle('Renewals')
+
+const renewals = ref<Renewal[]>([...MOCK_RENEWALS])
+
+// ── View toggle ─────────────────────────────────────────────────────────────
+const viewMode = ref<'my' | 'all'>('all')
+
+// ── Filter tabs ─────────────────────────────────────────────────────────────
+type PipelineFilter = 'all' | 'needs_action' | 'in_progress' | 'resolved'
+const activeFilter = ref<PipelineFilter>('all')
+
+// ── Dropdown filters ────────────────────────────────────────────────────────
+const carrierFilter = ref('')
+const lobFilter = ref('')
+const handlerFilter = ref('')
+const expiryFilter = ref('')
+const priorityFilter = ref('')
+const riskFilter = ref('')
+const brokerStatusFilter = ref('')
+
+const uniqueCarriers = computed(() => [...new Set(renewals.value.map(r => r.carrier))].sort())
+const uniqueLobs = computed(() => [...new Set(renewals.value.map(r => r.lob))].sort())
+const uniqueHandlers = computed(() => [...new Set(renewals.value.map(r => r.assignedTo))].sort())
+
+// ── Filtering logic ─────────────────────────────────────────────────────────
+const closedStatuses: BrokerRenewalStatus[] = ['closed_renewed', 'closed_remarketed', 'closed_cancelled', 'not_renewing']
+const actionStatuses: BrokerRenewalStatus[] = ['unreviewed', 'under_review']
+const progressStatuses: BrokerRenewalStatus[] = ['proposal_sent', 'awaiting_client_response', 'awaiting_payment']
+
+const filteredRenewals = computed(() => {
+  let result = [...renewals.value]
+
+  // Tab filter
+  if (activeFilter.value === 'needs_action') result = result.filter(r => actionStatuses.includes(r.brokerStatus))
+  if (activeFilter.value === 'in_progress') result = result.filter(r => progressStatuses.includes(r.brokerStatus))
+  if (activeFilter.value === 'resolved') result = result.filter(r => closedStatuses.includes(r.brokerStatus))
+
+  // Dropdown filters
+  if (carrierFilter.value) result = result.filter(r => r.carrier === carrierFilter.value)
+  if (lobFilter.value) result = result.filter(r => r.lob === lobFilter.value)
+  if (handlerFilter.value) result = result.filter(r => r.assignedTo === handlerFilter.value)
+  if (priorityFilter.value) result = result.filter(r => r.priority === priorityFilter.value)
+  if (riskFilter.value) result = result.filter(r => r.retentionRisk === riskFilter.value)
+  if (brokerStatusFilter.value) result = result.filter(r => r.brokerStatus === brokerStatusFilter.value)
+
+  if (expiryFilter.value) {
+    const bucket = expiryBuckets[expiryFilter.value as keyof typeof expiryBuckets]
+    if (bucket) result = result.filter(r => r.daysUntilExpiry >= bucket.min && r.daysUntilExpiry <= bucket.max)
+  }
+
+  // Sort: breached first, then by days until expiry ascending
+  result.sort((a, b) => {
+    const aBreached = a.slaPercent >= 100 ? 0 : 1
+    const bBreached = b.slaPercent >= 100 ? 0 : 1
+    if (aBreached !== bBreached) return aBreached - bBreached
+    return a.daysUntilExpiry - b.daysUntilExpiry
+  })
+
+  return result
+})
+
+// ── Filter counts ───────────────────────────────────────────────────────────
+const filterCounts = computed(() => ({
+  all: renewals.value.length,
+  needs_action: renewals.value.filter(r => actionStatuses.includes(r.brokerStatus)).length,
+  in_progress: renewals.value.filter(r => progressStatuses.includes(r.brokerStatus)).length,
+  resolved: renewals.value.filter(r => closedStatuses.includes(r.brokerStatus)).length,
+}))
+
+// ── KPIs ────────────────────────────────────────────────────────────────────
+const kpis = computed(() => {
+  const active = renewals.value.filter(r => !closedStatuses.includes(r.brokerStatus))
+  const urgent = active.filter(r => r.daysUntilExpiry <= 7).length
+  const pipeline = active.reduce((s, r) => s + r.currentPremium, 0)
+  const atRisk = active.filter(r => r.retentionRisk === 'high').length
+  const breached = active.filter(r => r.slaPercent >= 100).length
+  const renewed = renewals.value.filter(r => r.brokerStatus === 'closed_renewed' || r.brokerStatus === 'closed_remarketed').length
+  return { urgent, pipeline, atRisk, breached, renewed }
+})
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+function formatCurrency(n: number) {
+  return '$' + n.toLocaleString('en-US', { minimumFractionDigits: 0 })
+}
+
+function daysDisplay(d: number) {
+  if (d < 0) return `${Math.abs(d)}d past`
+  if (d === 0) return 'Today'
+  return `${d}d`
+}
+
+function daysClass(d: number) {
+  if (d < 0) return 'rn-days-past'
+  if (d <= 7) return 'rn-days-critical'
+  if (d <= 30) return 'rn-days-warn'
+  return ''
+}
+
+const carrierPillClass = (s: CarrierRenewalStatus) => {
+  const map: Record<string, string> = {
+    pending: 'rn-csp-pending', terms_received: 'rn-csp-terms', remarketing: 'rn-csp-remarket',
+    bound: 'rn-csp-bound', declined: 'rn-csp-declined', lapsed: 'rn-csp-lapsed',
+  }
+  return map[s] ?? ''
+}
+
+const priorityClass = (p: RenewalPriority) => {
+  const map: Record<string, string> = { critical: 'rn-pri-critical', high: 'rn-pri-high', medium: 'rn-pri-medium', low: 'rn-pri-low' }
+  return map[p] ?? ''
+}
+
+const riskClass = (r: RetentionRisk) => {
+  const map: Record<string, string> = { high: 'rn-risk-high', medium: 'rn-risk-medium', low: 'rn-risk-low' }
+  return map[r] ?? ''
+}
+
+function clearFilters() {
+  carrierFilter.value = ''
+  lobFilter.value = ''
+  handlerFilter.value = ''
+  expiryFilter.value = ''
+  priorityFilter.value = ''
+  riskFilter.value = ''
+  brokerStatusFilter.value = ''
+}
+
+const hasActiveFilters = computed(() => !!(carrierFilter.value || lobFilter.value || handlerFilter.value || expiryFilter.value || priorityFilter.value || riskFilter.value || brokerStatusFilter.value))
+
+const toast = useToast()
+function handleSendReminders() {
+  toast.add({ title: 'Sending renewal reminders…', description: 'Batch reminder emails queued for processing.', color: 'green' })
+}
+</script>
+
+<template>
+  <div class="rn-page">
+    <!-- Header -->
+    <div class="flex flex-wrap items-end justify-between gap-3">
+      <div class="max-w-xl">
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Renewals</h1>
+        <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+          Pipeline de renovaciones — seguimiento desde revisión hasta confirmación.
+        </p>
+      </div>
+      <div class="flex gap-2">
+        <NuxtLink to="/claims/settings" class="rn-action-btn-outline">
+          <UIcon name="i-heroicons-cog-6-tooth" style="width: 14px; height: 14px;" />
+          Settings
+        </NuxtLink>
+        <button type="button" class="rn-action-btn-primary" @click="handleSendReminders">
+          <UIcon name="i-heroicons-paper-airplane" style="width: 14px; height: 14px;" />
+          Send Reminders
+        </button>
+      </div>
+    </div>
+
+    <!-- KPI strip -->
+    <div class="rn-kpi-strip">
+      <div class="rn-kpi">
+        <p class="rn-kpi-label">Urgent (≤ 7d)</p>
+        <p class="rn-kpi-value" :style="kpis.urgent > 0 ? 'color: #c13838;' : ''">{{ kpis.urgent }}</p>
+      </div>
+      <div class="rn-kpi">
+        <p class="rn-kpi-label">Pipeline premium</p>
+        <p class="rn-kpi-value">{{ formatCurrency(kpis.pipeline) }}</p>
+      </div>
+      <div class="rn-kpi">
+        <p class="rn-kpi-label">High retention risk</p>
+        <p class="rn-kpi-value" :style="kpis.atRisk > 0 ? 'color: #c27b1a;' : ''">{{ kpis.atRisk }}</p>
+      </div>
+      <div class="rn-kpi">
+        <p class="rn-kpi-label">SLA breached</p>
+        <p class="rn-kpi-value" :style="kpis.breached > 0 ? 'color: #c13838;' : ''">{{ kpis.breached }}</p>
+      </div>
+      <div class="rn-kpi">
+        <p class="rn-kpi-label">Renewed MTD</p>
+        <p class="rn-kpi-value" style="color: #01696f;">{{ kpis.renewed }}</p>
+      </div>
+    </div>
+
+    <!-- View toggle + Filter tabs -->
+    <div class="rn-controls-row">
+      <div class="rn-view-toggle">
+        <button type="button" class="rn-view-btn" :class="viewMode === 'my' ? 'rn-view-on' : 'rn-view-off'" @click="viewMode = 'my'">My Renewals</button>
+        <button type="button" class="rn-view-btn" :class="viewMode === 'all' ? 'rn-view-on' : 'rn-view-off'" @click="viewMode = 'all'">All Renewals</button>
+      </div>
+
+      <div class="rn-filter-tabs">
+        <button
+          v-for="f in ([
+            { id: 'all', label: 'All' },
+            { id: 'needs_action', label: 'Needs Action' },
+            { id: 'in_progress', label: 'In Progress' },
+            { id: 'resolved', label: 'Resolved' },
+          ] as { id: PipelineFilter; label: string }[])"
+          :key="f.id"
+          type="button"
+          class="rn-filter-tab"
+          :class="activeFilter === f.id ? 'rn-filter-on' : 'rn-filter-off'"
+          @click="activeFilter = f.id"
+        >
+          {{ f.label }}
+          <span class="rn-filter-count" :class="activeFilter === f.id ? 'rn-filter-count-on' : ''">{{ filterCounts[f.id] }}</span>
+        </button>
+      </div>
+
+      <span class="text-[11px] text-[var(--text-muted)] ml-auto">{{ filteredRenewals.length }} results</span>
+    </div>
+
+    <!-- Filter dropdowns -->
+    <div class="rn-dropdown-row">
+      <select v-model="brokerStatusFilter" class="rn-dropdown">
+        <option value="">Workflow</option>
+        <option v-for="(label, key) in brokerStatusLabels" :key="key" :value="key">{{ label }}</option>
+      </select>
+      <select v-model="carrierFilter" class="rn-dropdown">
+        <option value="">Carrier</option>
+        <option v-for="c in uniqueCarriers" :key="c" :value="c">{{ c }}</option>
+      </select>
+      <select v-model="lobFilter" class="rn-dropdown">
+        <option value="">LOB</option>
+        <option v-for="l in uniqueLobs" :key="l" :value="l">{{ l }}</option>
+      </select>
+      <select v-model="handlerFilter" class="rn-dropdown">
+        <option value="">Handler</option>
+        <option v-for="h in uniqueHandlers" :key="h" :value="h">{{ h }}</option>
+      </select>
+      <select v-model="expiryFilter" class="rn-dropdown">
+        <option value="">Expiry</option>
+        <option v-for="(b, key) in expiryBuckets" :key="key" :value="key">{{ b.label }}</option>
+      </select>
+      <select v-model="priorityFilter" class="rn-dropdown">
+        <option value="">Priority</option>
+        <option v-for="(label, key) in priorityLabels" :key="key" :value="key">{{ label }}</option>
+      </select>
+      <select v-model="riskFilter" class="rn-dropdown">
+        <option value="">Risk</option>
+        <option v-for="(label, key) in retentionRiskLabels" :key="key" :value="key">{{ label }}</option>
+      </select>
+      <button v-if="hasActiveFilters" class="rn-clear-btn" @click="clearFilters">
+        <UIcon name="i-heroicons-x-mark" class="w-3 h-3" />
+        Clear
+      </button>
+    </div>
+
+    <!-- Table -->
+    <div class="rn-table-wrap">
+      <table class="rn-table">
+        <thead>
+          <tr>
+            <th style="width: 28px;"></th>
+            <th>Renewal</th>
+            <th>Customer</th>
+            <th>LOB / Carrier</th>
+            <th>Status</th>
+            <th class="text-right">Current</th>
+            <th class="text-right">Renewal</th>
+            <th class="text-right">Expiry</th>
+            <th>Risk</th>
+            <th>Priority</th>
+            <th>Handler</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="r in filteredRenewals"
+            :key="r.id"
+            class="rn-row"
+            :class="{ 'rn-breach-row': r.slaPercent >= 100 && !closedStatuses.includes(r.brokerStatus) }"
+            style="cursor: pointer;"
+            @click="navigateTo(`/renewals/${r.id}`)"
+          >
+            <td><span class="rn-sla-dot" :class="`rn-sla-${slaColor(r.slaPercent)}`" /></td>
+            <td>
+              <NuxtLink :to="`/renewals/${r.id}`" class="rn-id-link" @click.stop>{{ r.id }}</NuxtLink>
+              <p class="text-[10px] text-[var(--text-muted)] font-mono mt-0.5">{{ r.policyNumber }}</p>
+            </td>
+            <td>
+              <p class="text-[13px] font-medium text-[var(--text-primary)]">{{ r.customerName || 'Unnamed customer' }}</p>
+              <p class="text-[10px] text-[var(--text-muted)] uppercase">{{ r.customerType }}</p>
+            </td>
+            <td>
+              <p class="text-[13px] text-[var(--text-primary)]">{{ r.lob }}</p>
+              <p class="text-[11px] text-[var(--text-muted)]">{{ r.carrier }}</p>
+            </td>
+            <td>
+              <div class="rn-dual-status">
+                <span class="rn-carrier-pill" :class="carrierPillClass(r.carrierStatus)">{{ carrierStatusLabels[r.carrierStatus] }}</span>
+                <span class="rn-workflow-pill">{{ brokerStatusLabels[r.brokerStatus] }}</span>
+              </div>
+            </td>
+            <td class="text-right text-[13px] font-semibold text-[var(--text-primary)]">{{ formatCurrency(r.currentPremium) }}</td>
+            <td class="text-right text-[13px]">
+              <template v-if="r.renewalPremium !== null">
+                <span class="font-semibold text-[var(--text-primary)]">{{ formatCurrency(r.renewalPremium) }}</span>
+                <span
+                  v-if="r.premiumDelta !== null"
+                  class="rn-delta"
+                  :class="r.premiumDelta > 0 ? 'rn-delta-up' : r.premiumDelta < 0 ? 'rn-delta-down' : ''"
+                >{{ r.premiumDelta > 0 ? '+' : '' }}{{ r.premiumDelta }}%</span>
+              </template>
+              <span v-else class="text-[var(--text-muted)] opacity-40">—</span>
+            </td>
+            <td class="text-right">
+              <span class="text-[13px] font-bold" :class="daysClass(r.daysUntilExpiry)">{{ daysDisplay(r.daysUntilExpiry) }}</span>
+              <p class="text-[10px] text-[var(--text-muted)]">{{ r.expiryDate }}</p>
+            </td>
+            <td>
+              <span class="rn-risk-pill" :class="riskClass(r.retentionRisk)">{{ retentionRiskLabels[r.retentionRisk] }}</span>
+            </td>
+            <td>
+              <span :class="priorityClass(r.priority)">{{ priorityLabels[r.priority] }}</span>
+            </td>
+            <td class="text-[13px] text-[var(--text-muted)]">
+              <span :class="r.assignedTo === 'Unassigned' ? 'rn-unassigned' : ''">{{ r.assignedTo }}</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rn-page {
+  max-width: 76rem; margin: 0 auto;
+  display: flex; flex-direction: column; gap: 20px; padding-bottom: 3rem;
+}
+
+/* ── Action buttons ── */
+.rn-action-btn-primary {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px; border-radius: 8px;
+  background: #01696f; color: #fff;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.rn-action-btn-primary:hover { background: #015458; }
+.rn-action-btn-outline {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px; border-radius: 8px;
+  background: transparent; color: var(--text-secondary);
+  font-size: 13px; font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.1);
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+  text-decoration: none;
+}
+.rn-action-btn-outline:hover { border-color: #01696f; color: #01696f; }
+
+/* ── KPI strip ── */
+.rn-kpi-strip {
+  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.rn-kpi { padding: 14px 18px; background: #fff; }
+.rn-kpi:first-child { border-radius: 12px 0 0 12px; }
+.rn-kpi:last-child { border-radius: 0 12px 12px 0; }
+.rn-kpi-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+}
+.rn-kpi-value {
+  margin-top: 4px; font-size: 22px; font-weight: 600;
+  color: var(--text-primary); font-variant-numeric: tabular-nums;
+}
+@media (max-width: 640px) { .rn-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
+
+/* ── Controls row ── */
+.rn-controls-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+
+/* ── View toggle ── */
+.rn-view-toggle { display: inline-flex; gap: 1px; padding: 2px; border-radius: 8px; background: rgba(0,0,0,0.04); }
+.rn-view-btn { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; transition: all 150ms ease; white-space: nowrap; }
+.rn-view-on { background: #01696f; color: white; }
+.rn-view-off { background: transparent; color: #8a8a86; }
+.rn-view-off:hover { color: var(--text-primary); }
+
+/* ── Filter tabs ── */
+.rn-filter-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,0.04); }
+.rn-filter-tab {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 6px 12px; border-radius: 8px;
+  font-size: 12px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.rn-filter-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.rn-filter-off { background: transparent; color: var(--text-muted); }
+.rn-filter-off:hover { color: var(--text-primary); }
+.rn-filter-count { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 9999px; background: rgba(0,0,0,0.06); color: var(--text-muted); }
+.rn-filter-count-on { background: rgba(1,105,111,0.1); color: #01696f; }
+
+/* ── Dropdown filters ── */
+.rn-dropdown-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.rn-dropdown {
+  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.08); background: #fff; color: var(--text-primary);
+  cursor: pointer; min-width: 100px;
+}
+.rn-dropdown:focus { outline: none; border-color: #01696f; }
+.rn-clear-btn {
+  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px;
+  border-radius: 8px; font-size: 11px; font-weight: 600;
+  background: rgba(193,56,56,0.06); color: #c13838;
+  border: 1px solid rgba(193,56,56,0.15); cursor: pointer;
+}
+.rn-clear-btn:hover { background: rgba(193,56,56,0.12); }
+
+/* ── Table ── */
+.rn-table-wrap {
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow-x: auto;
+}
+.rn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.rn-table thead th {
+  padding: 10px 14px; font-size: 11px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+  white-space: nowrap; text-align: left;
+}
+.rn-table tbody td {
+  padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.04);
+  vertical-align: top;
+}
+.rn-row { transition: background 100ms ease; }
+.rn-row:hover { background: rgba(0,0,0,0.015); }
+.rn-row:last-child td { border-bottom: none; }
+
+/* ── Breach row ── */
+.rn-breach-row { box-shadow: inset 3px 0 0 #c13838; }
+
+/* ── SLA dot ── */
+.rn-sla-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.rn-sla-green { background: #059669; }
+.rn-sla-amber { background: #c27b1a; }
+.rn-sla-red { background: #c13838; }
+
+/* ── ID link ── */
+.rn-id-link {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px; font-weight: 600; color: #01696f;
+  text-decoration: none;
+}
+.rn-id-link:hover { text-decoration: underline; }
+
+/* ── Dual status pills ── */
+.rn-dual-status { display: flex; flex-direction: column; gap: 3px; }
+.rn-carrier-pill {
+  display: inline-flex; padding: 2px 7px; border-radius: 8px;
+  font-size: 10px; font-weight: 600; white-space: nowrap;
+}
+.rn-csp-pending { background: rgba(138,138,134,0.08); color: #8a8a86; }
+.rn-csp-terms { background: rgba(59,130,246,0.08); color: #2563eb; }
+.rn-csp-remarket { background: rgba(147,51,234,0.08); color: #9333ea; }
+.rn-csp-bound { background: rgba(22,163,74,0.08); color: #16a34a; }
+.rn-csp-declined { background: rgba(193,56,56,0.08); color: #c13838; }
+.rn-csp-lapsed { background: rgba(0,0,0,0.06); color: #6b6b68; }
+
+.rn-workflow-pill {
+  display: inline-flex; padding: 0; border-radius: 0;
+  font-size: 10px; font-weight: 500; white-space: nowrap;
+  border: none; color: var(--text-muted);
+}
+
+/* ── Premium delta ── */
+.rn-delta { font-size: 10px; font-weight: 700; margin-left: 4px; }
+.rn-delta-up { color: #c13838; }
+.rn-delta-down { color: #16a34a; }
+
+/* ── Days display ── */
+.rn-days-past { color: #8a8a86; opacity: 0.6; }
+.rn-days-critical { color: #c13838; }
+.rn-days-warn { color: #c27b1a; }
+
+/* ── Risk pills ── */
+.rn-risk-pill { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; white-space: nowrap; }
+.rn-risk-high { background: rgba(193,56,56,0.08); color: #c13838; }
+.rn-risk-medium { background: rgba(194,123,26,0.08); color: #c27b1a; }
+.rn-risk-low { background: rgba(22,163,74,0.08); color: #16a34a; }
+
+/* ── Priority badges ── */
+.rn-pri-critical { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9999px; background: rgba(193,56,56,0.12); color: #c13838; white-space: nowrap; }
+.rn-pri-high { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap; }
+.rn-pri-medium { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(0,0,0,0.05); color: #6b6b68; white-space: nowrap; }
+.rn-pri-low { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(0,0,0,0.03); color: #8a8a86; white-space: nowrap; }
+
+/* ── Unassigned ── */
+.rn-unassigned { font-style: italic; color: #c27b1a; }
+</style>
diff --git a/app/pages/sales/leads/index.vue b/app/pages/sales/leads/index.vue
new file mode 100644
index 0000000..ea5b312
--- /dev/null
+++ b/app/pages/sales/leads/index.vue
@@ -0,0 +1,770 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+usePageTitle('Leads Hub')
+
+const sidebarFeatures = useSidebarFeatures()
+
+/* ── Types ── */
+
+type LeadSource = 'walk_in' | 'instagram' | 'facebook' | 'google' | 'referral' | 'website' | 'phone' | 'campaign'
+type LeadStatus = 'new' | 'contacted' | 'qualified' | 'proposal' | 'won' | 'lost'
+
+type Lead = {
+  id: string
+  name: string
+  email?: string
+  phone?: string
+  source: LeadSource
+  campaignName?: string
+  lob: string
+  status: LeadStatus
+  assignedTo: string | null
+  createdAt: string
+  value?: number
+  note?: string
+}
+
+type LeadIntegration = {
+  id: string
+  name: string
+  icon: string
+  source: LeadSource
+  connected: boolean
+  lastSync?: string
+  leadsCount: number
+  description: string
+}
+
+type AutoAssignRule = {
+  id: string
+  source: LeadSource | 'all'
+  lob: string | 'all'
+  agent: string
+  enabled: boolean
+}
+
+/* ── Source metadata ── */
+
+const SOURCES: { value: LeadSource | 'all'; label: string; icon: string }[] = [
+  { value: 'all', label: 'All sources', icon: 'i-heroicons-funnel' },
+  { value: 'walk_in', label: 'Walk-in', icon: 'i-heroicons-building-storefront' },
+  { value: 'instagram', label: 'Instagram', icon: 'i-heroicons-camera' },
+  { value: 'facebook', label: 'Facebook', icon: 'i-heroicons-chat-bubble-left-right' },
+  { value: 'google', label: 'Google', icon: 'i-heroicons-magnifying-glass' },
+  { value: 'referral', label: 'Referral', icon: 'i-heroicons-user-group' },
+  { value: 'website', label: 'Website', icon: 'i-heroicons-globe-alt' },
+  { value: 'phone', label: 'Phone', icon: 'i-heroicons-phone' },
+  { value: 'campaign', label: 'Campaigns', icon: 'i-heroicons-megaphone' },
+]
+
+const STATUS_OPTIONS: { value: LeadStatus | 'all'; label: string }[] = [
+  { value: 'all', label: 'All statuses' },
+  { value: 'new', label: 'New' },
+  { value: 'contacted', label: 'Contacted' },
+  { value: 'qualified', label: 'Qualified' },
+  { value: 'proposal', label: 'Proposal' },
+  { value: 'won', label: 'Won' },
+  { value: 'lost', label: 'Lost' },
+]
+
+const AGENTS = ['L. Chen', 'A. Morales', 'R. Vega', 'Marco V.']
+
+/* ── Mock integrations ── */
+
+const integrations = ref<LeadIntegration[]>([
+  { id: 'ig', name: 'Instagram', icon: 'i-heroicons-camera', source: 'instagram', connected: false, leadsCount: 0, description: 'DMs, story replies, and lead forms from Instagram Business.' },
+  { id: 'fb', name: 'Facebook', icon: 'i-heroicons-chat-bubble-left-right', source: 'facebook', connected: false, leadsCount: 0, description: 'Lead ads, Messenger, and page contact forms.' },
+  { id: 'ga', name: 'Google Ads', icon: 'i-heroicons-magnifying-glass', source: 'google', connected: true, lastSync: '2026-04-08T10:30:00Z', leadsCount: 14, description: 'Search and display campaign lead forms.' },
+  { id: 'ws', name: 'Website Forms', icon: 'i-heroicons-globe-alt', source: 'website', connected: true, lastSync: '2026-04-08T11:00:00Z', leadsCount: 8, description: 'Contact forms from your brokerage website.' },
+  { id: 'cc', name: 'Call Center', icon: 'i-heroicons-phone-arrow-down-left', source: 'phone', connected: false, leadsCount: 0, description: 'Inbound call tracking and IVR lead capture.' },
+  { id: 'cp', name: 'Custom Campaigns', icon: 'i-heroicons-megaphone', source: 'campaign', connected: true, lastSync: '2026-04-07T16:00:00Z', leadsCount: 6, description: 'Email campaigns, events, mailers, and custom outreach.' },
+])
+
+/* ── Mock leads ── */
+
+const leads = ref<Lead[]>([
+  { id: 'sl-1', name: 'Ana García', email: 'ana.g@mail.com', phone: '+506 7012-3344', source: 'instagram', lob: 'Auto', status: 'new', assignedTo: null, createdAt: '2026-04-08T14:30:00Z', value: 2400, note: 'DM about fleet coverage' },
+  { id: 'sl-2', name: 'Marco Rodríguez', phone: '+506 8876-5500', source: 'walk_in', lob: 'Health', status: 'contacted', assignedTo: 'A. Morales', createdAt: '2026-04-08T09:15:00Z', value: 4800, note: 'Family plan, 4 members' },
+  { id: 'sl-3', name: 'Construcciones TRC', email: 'info@trc.cr', source: 'google', lob: 'General risk', status: 'qualified', assignedTo: 'R. Vega', createdAt: '2026-04-07T16:00:00Z', value: 18500, campaignName: 'Google Ads — Commercial Q2' },
+  { id: 'sl-4', name: 'Isabel Mora', email: 'isa.mora@outlook.com', source: 'facebook', lob: 'Life', status: 'new', assignedTo: null, createdAt: '2026-04-07T11:20:00Z', value: 3200, note: 'Responded to FB carousel ad' },
+  { id: 'sl-5', name: 'Hotel Paraíso', phone: '+506 2234-8800', source: 'referral', lob: 'General risk', status: 'proposal', assignedTo: 'A. Morales', createdAt: '2026-04-06T10:00:00Z', value: 12000, note: 'Referred by Transportes Delta' },
+  { id: 'sl-6', name: 'Laura Jiménez', email: 'laura.j@gmail.com', source: 'website', lob: 'Auto', status: 'contacted', assignedTo: 'R. Vega', createdAt: '2026-04-06T08:45:00Z', value: 1800, note: 'Online form — comparativo request' },
+  { id: 'sl-7', name: 'Farmacia Salud Plus', phone: '+506 2456-7890', source: 'campaign', campaignName: 'Spring Health Push', lob: 'Health', status: 'qualified', assignedTo: 'A. Morales', createdAt: '2026-04-05T15:30:00Z', value: 9600 },
+  { id: 'sl-8', name: 'Diego Araya', source: 'phone', phone: '+506 6100-9988', lob: 'Auto', status: 'new', assignedTo: null, createdAt: '2026-04-05T12:10:00Z', value: 1500 },
+  { id: 'sl-9', name: 'Retail Express', email: 'ventas@retailexp.cr', source: 'campaign', campaignName: 'Commercial Outreach Mar', lob: 'General risk', status: 'won', assignedTo: 'R. Vega', createdAt: '2026-04-04T09:00:00Z', value: 7200 },
+  { id: 'sl-10', name: 'Sofía Vargas', source: 'instagram', phone: '+506 8300-1122', lob: 'Life', status: 'contacted', assignedTo: 'L. Chen', createdAt: '2026-04-03T17:00:00Z', value: 2800, note: 'IG story reply, wants term quote' },
+  { id: 'sl-11', name: 'Carlos Méndez', email: 'carlos.m@corp.cr', source: 'google', lob: 'Auto', status: 'new', assignedTo: null, createdAt: '2026-04-08T08:00:00Z', value: 3400 },
+  { id: 'sl-12', name: 'Inversiones Pacífico', phone: '+506 2200-4455', source: 'campaign', campaignName: 'Spring Health Push', lob: 'Health', status: 'contacted', assignedTo: 'L. Chen', createdAt: '2026-04-07T14:00:00Z', value: 15200 },
+])
+
+/* ── Auto-assign rules (management) ── */
+
+const autoAssignRules = ref<AutoAssignRule[]>([
+  { id: 'r1', source: 'google', lob: 'all', agent: 'R. Vega', enabled: true },
+  { id: 'r2', source: 'instagram', lob: 'all', agent: 'L. Chen', enabled: true },
+  { id: 'r3', source: 'all', lob: 'Health', agent: 'A. Morales', enabled: false },
+])
+
+/* ── Filters ── */
+
+const sourceFilter = ref<LeadSource | 'all'>('all')
+const statusFilter = ref<LeadStatus | 'all'>('all')
+const assignmentFilter = ref<'all' | 'assigned' | 'unassigned'>('all')
+const search = ref('')
+const activeTab = ref<'leads' | 'integrations' | 'management'>('leads')
+const releaseMode = ref<'auto_assign' | 'reception' | 'auto_release' | 'round_robin'>('auto_assign')
+
+const filtered = computed(() => {
+  let list = [...leads.value]
+  if (sourceFilter.value !== 'all') list = list.filter(l => l.source === sourceFilter.value)
+  if (statusFilter.value !== 'all') list = list.filter(l => l.status === statusFilter.value)
+  if (assignmentFilter.value === 'assigned') list = list.filter(l => l.assignedTo !== null)
+  if (assignmentFilter.value === 'unassigned') list = list.filter(l => l.assignedTo === null)
+  const q = search.value.trim().toLowerCase()
+  if (q) list = list.filter(l => l.name.toLowerCase().includes(q) || l.email?.toLowerCase().includes(q) || l.phone?.includes(q))
+  return list.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+})
+
+const sourceCounts = computed(() => {
+  const c: Record<string, number> = { all: leads.value.length }
+  for (const l of leads.value) c[l.source] = (c[l.source] || 0) + 1
+  return c
+})
+
+const unassignedCount = computed(() => leads.value.filter(l => l.assignedTo === null).length)
+const newCount = computed(() => leads.value.filter(l => l.status === 'new').length)
+const totalPipeline = computed(() => leads.value.reduce((s, l) => s + (l.value || 0), 0))
+const connectedCount = computed(() => integrations.value.filter(i => i.connected).length)
+
+/* ── Helpers ── */
+
+function sourceLabel(s: LeadSource) {
+  return SOURCES.find(x => x.value === s)?.label ?? s
+}
+function sourceIcon(s: LeadSource) {
+  return SOURCES.find(x => x.value === s)?.icon ?? 'i-heroicons-question-mark-circle'
+}
+
+function statusBadge(s: LeadStatus) {
+  switch (s) {
+    case 'new': return { label: 'New', cls: 'ld-status-new' }
+    case 'contacted': return { label: 'Contacted', cls: 'ld-status-contacted' }
+    case 'qualified': return { label: 'Qualified', cls: 'ld-status-qualified' }
+    case 'proposal': return { label: 'Proposal', cls: 'ld-status-proposal' }
+    case 'won': return { label: 'Won', cls: 'ld-status-won' }
+    case 'lost': return { label: 'Lost', cls: 'ld-status-lost' }
+  }
+}
+
+function fmtValue(v?: number) {
+  if (!v) return ''
+  return '$' + v.toLocaleString('en-US', { minimumFractionDigits: 0 })
+}
+
+function timeAgo(iso: string) {
+  const diff = Date.now() - new Date(iso).getTime()
+  if (diff < 3600000) return `${Math.max(1, Math.round(diff / 60000))}m ago`
+  if (diff < 86400000) return `${Math.round(diff / 3600000)}h ago`
+  if (diff < 172800000) return 'Yesterday'
+  return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+const toast = useToast()
+
+function assignLead(lead: Lead, agent: string) {
+  lead.assignedTo = agent
+  toast.add({ title: `${lead.name} assigned to ${agent}`, color: 'success' })
+}
+
+function unassignLead(lead: Lead) {
+  lead.assignedTo = null
+  toast.add({ title: `${lead.name} unassigned`, color: 'neutral' })
+}
+
+function toggleIntegration(intg: LeadIntegration) {
+  intg.connected = !intg.connected
+  if (intg.connected) {
+    intg.lastSync = new Date().toISOString()
+    toast.add({ title: `${intg.name} connected`, color: 'success' })
+  } else {
+    toast.add({ title: `${intg.name} disconnected`, color: 'neutral' })
+  }
+}
+</script>
+
+<template>
+  <div class="ld-page">
+    <!-- Header -->
+    <div class="flex flex-wrap items-end justify-between gap-3">
+      <div class="max-w-xl">
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Leads Hub</h1>
+        <p class="mt-1 text-[13px] text-[var(--text-muted)]">All leads from every source — assign, track, and connect APIs.</p>
+      </div>
+    </div>
+
+    <!-- KPI strip -->
+    <div class="ld-kpi-strip">
+      <div class="ld-kpi">
+        <div class="ld-kpi-icon" style="background: rgba(59,130,246,0.08); color: #3b82f6">
+          <UIcon name="i-heroicons-inbox-arrow-down" style="width: 15px; height: 15px;" />
+        </div>
+        <div>
+          <p class="ld-kpi-label">Total leads</p>
+          <p class="ld-kpi-value">{{ leads.length }}</p>
+        </div>
+      </div>
+      <div class="ld-kpi">
+        <div class="ld-kpi-icon" style="background: rgba(194,123,26,0.08); color: #c27b1a">
+          <UIcon name="i-heroicons-exclamation-circle" style="width: 15px; height: 15px;" />
+        </div>
+        <div>
+          <p class="ld-kpi-label">Unassigned</p>
+          <p class="ld-kpi-value">{{ unassignedCount }}</p>
+        </div>
+      </div>
+      <div class="ld-kpi">
+        <div class="ld-kpi-icon" style="background: rgba(15,123,95,0.08); color: #0f7b5f">
+          <UIcon name="i-heroicons-bolt" style="width: 15px; height: 15px;" />
+        </div>
+        <div>
+          <p class="ld-kpi-label">New today</p>
+          <p class="ld-kpi-value">{{ newCount }}</p>
+        </div>
+      </div>
+      <div class="ld-kpi">
+        <div class="ld-kpi-icon" style="background: rgba(1,105,111,0.08); color: #01696f">
+          <UIcon name="i-heroicons-currency-dollar" style="width: 15px; height: 15px;" />
+        </div>
+        <div>
+          <p class="ld-kpi-label">Pipeline value</p>
+          <p class="ld-kpi-value">{{ fmtValue(totalPipeline) }}</p>
+        </div>
+      </div>
+      <div class="ld-kpi">
+        <div class="ld-kpi-icon" style="background: rgba(139,92,246,0.08); color: #8b5cf6">
+          <UIcon name="i-heroicons-signal" style="width: 15px; height: 15px;" />
+        </div>
+        <div>
+          <p class="ld-kpi-label">Connected</p>
+          <p class="ld-kpi-value">{{ connectedCount }}/{{ integrations.length }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab navigation -->
+    <div class="ld-tabs">
+      <button :class="['ld-tab', activeTab === 'leads' ? 'ld-tab--active' : '']" @click="activeTab = 'leads'">
+        <UIcon name="i-heroicons-user-group" style="width: 14px; height: 14px;" />
+        Leads
+      </button>
+      <button :class="['ld-tab', activeTab === 'integrations' ? 'ld-tab--active' : '']" @click="activeTab = 'integrations'">
+        <UIcon name="i-heroicons-signal" style="width: 14px; height: 14px;" />
+        Integrations
+      </button>
+      <button :class="['ld-tab', activeTab === 'management' ? 'ld-tab--active' : '']" @click="activeTab = 'management'">
+        <UIcon name="i-heroicons-cog-6-tooth" style="width: 14px; height: 14px;" />
+        Management
+      </button>
+    </div>
+
+    <!-- ══════ TAB: LEADS ══════ -->
+    <template v-if="activeTab === 'leads'">
+      <!-- Source filter pills -->
+      <div class="ld-filter-row">
+        <button
+          v-for="src in SOURCES" :key="src.value"
+          class="ld-pill" :class="sourceFilter === src.value ? 'ld-pill--active' : ''"
+          @click="sourceFilter = src.value as any"
+        >
+          <UIcon :name="src.icon" style="width: 11px; height: 11px;" />
+          {{ src.label }}
+          <span v-if="sourceCounts[src.value]" class="ld-pill-count">{{ sourceCounts[src.value] }}</span>
+        </button>
+      </div>
+
+      <!-- Search + filters bar -->
+      <div class="ld-toolbar">
+        <UInput v-model="search" icon="i-heroicons-magnifying-glass" placeholder="Search leads..." class="ld-search" />
+        <USelect v-model="statusFilter" :items="STATUS_OPTIONS" value-key="value" label-key="label" class="ld-select" />
+        <USelect v-model="assignmentFilter" :items="[{value:'all',label:'All leads'},{value:'assigned',label:'Assigned'},{value:'unassigned',label:'Unassigned'}]" value-key="value" label-key="label" class="ld-select" />
+      </div>
+
+      <!-- Lead list -->
+      <div class="ld-card">
+        <div class="ld-table-header">
+          <span class="flex-1">Lead</span>
+          <span class="ld-col-source">Source</span>
+          <span class="ld-col-status">Status</span>
+          <span class="ld-col-value">Value</span>
+          <span class="ld-col-agent">Assigned to</span>
+          <span class="ld-col-time">When</span>
+          <span class="w-[60px]"></span>
+        </div>
+
+        <div v-if="filtered.length === 0" class="ld-empty">
+          <UIcon name="i-heroicons-funnel" style="width: 20px; height: 20px; color: #c0c0bc;" />
+          <p>No leads match your filters.</p>
+        </div>
+
+        <div v-for="(lead, i) in filtered" :key="lead.id" class="ld-row" :class="i < filtered.length - 1 ? 'ld-row-border' : ''">
+          <div class="flex items-center gap-2.5 min-w-0 flex-1">
+            <div class="ld-avatar" :class="lead.assignedTo ? '' : 'ld-avatar--unassigned'">
+              {{ lead.name.split(' ').map((w: string) => w[0]).join('').slice(0, 2) }}
+            </div>
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2">
+                <p class="text-[12px] font-medium text-[var(--text-primary)] truncate">{{ lead.name }}</p>
+                <span class="text-[10px] text-[var(--text-muted)]">{{ lead.lob }}</span>
+                <span v-if="!lead.assignedTo" class="ld-unassigned-badge">Unassigned</span>
+              </div>
+              <div class="flex items-center gap-1 mt-0.5">
+                <span v-if="lead.phone" class="text-[10px] text-[var(--text-muted)] tabular-nums">{{ lead.phone }}</span>
+                <template v-if="lead.phone && lead.email"><span class="ld-sep" /></template>
+                <span v-if="lead.email" class="text-[10px] text-[var(--text-muted)] truncate">{{ lead.email }}</span>
+              </div>
+              <p v-if="lead.note || lead.campaignName" class="text-[10px] text-[var(--text-muted)] truncate opacity-60 mt-0.5">
+                {{ lead.campaignName ? '📣 ' + lead.campaignName : lead.note }}
+              </p>
+            </div>
+          </div>
+          <div class="ld-col-source">
+            <span class="ld-source-chip">
+              <UIcon :name="sourceIcon(lead.source)" style="width: 10px; height: 10px;" />
+              {{ sourceLabel(lead.source) }}
+            </span>
+          </div>
+          <div class="ld-col-status">
+            <span :class="statusBadge(lead.status).cls">{{ statusBadge(lead.status).label }}</span>
+          </div>
+          <div class="ld-col-value">
+            <span v-if="lead.value" class="text-[11px] font-medium text-[var(--text-primary)] tabular-nums">{{ fmtValue(lead.value) }}</span>
+          </div>
+          <div class="ld-col-agent">
+            <template v-if="lead.assignedTo">
+              <span class="text-[11px] text-[var(--text-primary)]">{{ lead.assignedTo }}</span>
+              <button class="ld-action-mini" title="Unassign" @click="unassignLead(lead)">
+                <UIcon name="i-heroicons-x-mark" style="width: 10px; height: 10px;" />
+              </button>
+            </template>
+            <select
+              v-else
+              class="ld-assign-native"
+              @change="(e: Event) => { const v = (e.target as HTMLSelectElement).value; if (v) { assignLead(lead, v); (e.target as HTMLSelectElement).value = '' } }"
+            >
+              <option value="">Assign...</option>
+              <option v-for="a in AGENTS" :key="a" :value="a">{{ a }}</option>
+            </select>
+          </div>
+          <div class="ld-col-time">
+            <span class="text-[10px] text-[var(--text-muted)]">{{ timeAgo(lead.createdAt) }}</span>
+          </div>
+          <div class="w-[60px] flex items-center justify-end gap-1">
+            <NuxtLink to="/quotes/new" class="ld-action-btn" title="Start quote">
+              <UIcon name="i-heroicons-calculator" style="width: 11px; height: 11px;" />
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- ══════ TAB: INTEGRATIONS ══════ -->
+    <template v-if="activeTab === 'integrations'">
+      <p class="ld-section-hint">Connect lead sources to automatically import leads. APIs sync on a schedule when connected.</p>
+
+      <div class="ld-intg-grid">
+        <div v-for="intg in integrations" :key="intg.id" class="ld-intg-card" :class="intg.connected ? 'ld-intg-card--connected' : ''">
+          <div class="flex items-center gap-3">
+            <div class="ld-intg-icon" :class="intg.connected ? 'ld-intg-icon--on' : ''">
+              <UIcon :name="intg.icon" style="width: 18px; height: 18px;" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-[13px] font-semibold text-[var(--text-primary)]">{{ intg.name }}</p>
+              <p class="text-[11px] text-[var(--text-muted)] mt-0.5">{{ intg.description }}</p>
+            </div>
+          </div>
+          <div class="flex items-center justify-between mt-3">
+            <div class="flex items-center gap-3">
+              <span v-if="intg.connected" class="ld-intg-stat">
+                <UIcon name="i-heroicons-arrow-path" style="width: 10px; height: 10px;" />
+                {{ intg.leadsCount }} leads
+              </span>
+              <span v-if="intg.connected && intg.lastSync" class="text-[10px] text-[var(--text-muted)]">
+                Last sync: {{ timeAgo(intg.lastSync) }}
+              </span>
+              <span v-if="!intg.connected" class="text-[10px] text-[var(--text-muted)]">Not connected</span>
+            </div>
+            <button
+              class="ld-intg-toggle" :class="intg.connected ? 'ld-intg-toggle--on' : ''"
+              @click="toggleIntegration(intg)"
+            >
+              {{ intg.connected ? 'Disconnect' : 'Connect' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- ══════ TAB: MANAGEMENT ══════ -->
+    <template v-if="activeTab === 'management'">
+      <div class="ld-mgmt-grid">
+        <!-- Auto-assignment rules -->
+        <div class="ld-card">
+          <div class="ld-mgmt-header">
+            <UIcon name="i-heroicons-arrow-path-rounded-square" style="width: 16px; height: 16px; color: #01696f;" />
+            <h3 class="text-[14px] font-semibold text-[var(--text-primary)]">Auto-assignment rules</h3>
+          </div>
+          <p class="text-[11px] text-[var(--text-muted)] mt-1 mb-3 px-4">Automatically assign leads to agents by source and line of business.</p>
+
+          <div v-for="(rule, i) in autoAssignRules" :key="rule.id" class="ld-rule-row" :class="i < autoAssignRules.length - 1 ? 'ld-row-border' : ''">
+            <div class="flex items-center gap-2 min-w-0 flex-1">
+              <span class="ld-source-chip">
+                <UIcon :name="sourceIcon(rule.source as LeadSource)" style="width: 10px; height: 10px;" />
+                {{ rule.source === 'all' ? 'All sources' : sourceLabel(rule.source as LeadSource) }}
+              </span>
+              <UIcon name="i-heroicons-arrow-right" style="width: 10px; height: 10px; color: #8a8a86;" />
+              <span class="text-[11px] text-[var(--text-muted)]">{{ rule.lob === 'all' ? 'Any LOB' : rule.lob }}</span>
+              <UIcon name="i-heroicons-arrow-right" style="width: 10px; height: 10px; color: #8a8a86;" />
+              <span class="text-[12px] font-medium text-[var(--text-primary)]">{{ rule.agent }}</span>
+            </div>
+            <USwitch :model-value="rule.enabled" @update:model-value="rule.enabled = $event" />
+          </div>
+
+          <div class="px-4 py-3">
+            <button class="ld-add-rule">
+              <UIcon name="i-heroicons-plus" style="width: 12px; height: 12px;" />
+              Add rule
+            </button>
+          </div>
+        </div>
+
+        <!-- Lead intake & release workflow -->
+        <div class="ld-card">
+          <div class="ld-mgmt-header">
+            <UIcon name="i-heroicons-inbox-arrow-down" style="width: 16px; height: 16px; color: #01696f;" />
+            <h3 class="text-[14px] font-semibold text-[var(--text-primary)]">Intake & release mode</h3>
+          </div>
+          <p class="text-[11px] text-[var(--text-muted)] mt-1 mb-3 px-4">Choose how incoming leads are handled when they arrive from any source.</p>
+
+          <div class="flex flex-col gap-2 px-4 pb-4">
+            <label class="ld-mode-option" :class="releaseMode === 'auto_assign' ? 'ld-mode-option--active' : ''">
+              <input type="radio" v-model="releaseMode" value="auto_assign" class="ld-radio" />
+              <div class="min-w-0 flex-1">
+                <p class="text-[12px] font-medium text-[var(--text-primary)]">Auto-assign by rules</p>
+                <p class="text-[10px] text-[var(--text-muted)]">Leads matching rules above are assigned automatically. Unmatched leads go to the unassigned pool.</p>
+              </div>
+            </label>
+            <label class="ld-mode-option" :class="releaseMode === 'reception' ? 'ld-mode-option--active' : ''">
+              <input type="radio" v-model="releaseMode" value="reception" class="ld-radio" />
+              <div class="min-w-0 flex-1">
+                <p class="text-[12px] font-medium text-[var(--text-primary)]">Manual reception (monitored)</p>
+                <p class="text-[10px] text-[var(--text-muted)]">All leads held for a manager or receptionist to review and assign individually.</p>
+              </div>
+            </label>
+            <label class="ld-mode-option" :class="releaseMode === 'auto_release' ? 'ld-mode-option--active' : ''">
+              <input type="radio" v-model="releaseMode" value="auto_release" class="ld-radio" />
+              <div class="min-w-0 flex-1">
+                <p class="text-[12px] font-medium text-[var(--text-primary)]">Auto-release unassigned</p>
+                <p class="text-[10px] text-[var(--text-muted)]">Pre-assigned leads (from rules) go to their agent. Everything else is released unassigned to the team pool for agents to claim.</p>
+              </div>
+            </label>
+            <label class="ld-mode-option" :class="releaseMode === 'round_robin' ? 'ld-mode-option--active' : ''">
+              <input type="radio" v-model="releaseMode" value="round_robin" class="ld-radio" />
+              <div class="min-w-0 flex-1">
+                <p class="text-[12px] font-medium text-[var(--text-primary)]">Round-robin to team</p>
+                <p class="text-[10px] text-[var(--text-muted)]">Pre-assigned leads go to their agent. Remaining leads are distributed evenly across active agents in rotation.</p>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        <!-- Release permissions & settings -->
+        <div class="ld-card">
+          <div class="ld-mgmt-header">
+            <UIcon name="i-heroicons-shield-check" style="width: 16px; height: 16px; color: #01696f;" />
+            <h3 class="text-[14px] font-semibold text-[var(--text-primary)]">Release permissions & notifications</h3>
+          </div>
+          <p class="text-[11px] text-[var(--text-muted)] mt-1 mb-3 px-4">Control who can release leads and how agents are notified.</p>
+
+          <div class="flex flex-col gap-3 px-4 pb-4">
+            <label class="ld-setting-row">
+              <div>
+                <p class="text-[12px] font-medium text-[var(--text-primary)]">Only managers can release held leads</p>
+                <p class="text-[10px] text-[var(--text-muted)]">When reception mode is on, only users with manager role can assign or release leads.</p>
+              </div>
+              <USwitch :model-value="true" />
+            </label>
+            <label class="ld-setting-row">
+              <div>
+                <p class="text-[12px] font-medium text-[var(--text-primary)]">Allow agents to self-claim from pool</p>
+                <p class="text-[10px] text-[var(--text-muted)]">Agents can pick up unassigned leads themselves. Turn off to require manager assignment only.</p>
+              </div>
+              <USwitch :model-value="true" />
+            </label>
+            <label class="ld-setting-row">
+              <div>
+                <p class="text-[12px] font-medium text-[var(--text-primary)]">Auto-release stale leads</p>
+                <p class="text-[10px] text-[var(--text-muted)]">Uncontacted leads older than 48h are returned to the unassigned pool.</p>
+              </div>
+              <USwitch :model-value="false" />
+            </label>
+            <label class="ld-setting-row">
+              <div>
+                <p class="text-[12px] font-medium text-[var(--text-primary)]">Notify agents on assignment</p>
+                <p class="text-[10px] text-[var(--text-muted)]">Push notification when a lead is assigned, reassigned, or released to pool.</p>
+              </div>
+              <USwitch :model-value="true" />
+            </label>
+            <label class="ld-setting-row">
+              <div>
+                <p class="text-[12px] font-medium text-[var(--text-primary)]">Notify manager on new unassigned leads</p>
+                <p class="text-[10px] text-[var(--text-muted)]">Alert when leads arrive and no rule matches — useful in reception mode.</p>
+              </div>
+              <USwitch :model-value="true" />
+            </label>
+          </div>
+        </div>
+
+        <!-- Feature toggle info -->
+        <div class="ld-card ld-card-hint">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-heroicons-information-circle" style="width: 14px; height: 14px; color: #01696f;" />
+            <p class="text-[12px] text-[var(--text-muted)]">
+              Leads Hub can be turned on or off in
+              <NuxtLink to="/settings" class="text-[#01696f] font-medium hover:underline">Settings → Sidebar features</NuxtLink>.
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* ── ld- prefix: leads hub scoped styles ── */
+
+.ld-page {
+  display: flex; flex-direction: column; gap: 20px; padding-bottom: 3rem;
+  max-width: 76rem; margin: 0 auto;
+}
+
+/* KPI strip */
+.ld-kpi-strip {
+  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
+  background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03); overflow: hidden;
+}
+@media (min-width: 640px) { .ld-kpi-strip { grid-template-columns: repeat(3, 1fr); } }
+@media (min-width: 1024px) { .ld-kpi-strip { grid-template-columns: repeat(5, 1fr); } }
+.ld-kpi { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #fff; }
+.ld-kpi-icon {
+  width: 34px; height: 34px; border-radius: 9px;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.ld-kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86; }
+.ld-kpi-value { font-size: 22px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
+
+/* Tabs */
+.ld-tabs {
+  display: flex; gap: 2px; background: rgba(0,0,0,0.04); border-radius: 10px; padding: 3px;
+}
+.ld-tab {
+  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
+  border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text-muted);
+  background: transparent; border: none; cursor: pointer; transition: all 120ms ease;
+}
+.ld-tab:hover { color: var(--text-primary); }
+.ld-tab--active {
+  background: #fff; color: var(--text-primary); font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+
+/* Filter pills */
+.ld-filter-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
+.ld-pill {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 10px; border-radius: 9999px;
+  font-size: 11px; font-weight: 500; white-space: nowrap;
+  border: 1px solid rgba(0,0,0,0.08); background: transparent;
+  color: var(--text-muted); cursor: pointer; transition: all 120ms ease;
+}
+.ld-pill:hover { background: rgba(0,0,0,0.03); }
+.ld-pill--active {
+  background: rgba(1,105,111,0.08); color: #01696f;
+  border-color: rgba(1,105,111,0.2); font-weight: 600;
+}
+.ld-pill-count {
+  font-size: 9px; font-weight: 700; min-width: 14px; text-align: center;
+  padding: 0 3px; border-radius: 9999px; background: rgba(0,0,0,0.05); color: var(--text-muted);
+}
+.ld-pill--active .ld-pill-count { background: rgba(1,105,111,0.12); color: #01696f; }
+
+/* Toolbar */
+.ld-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.ld-search { flex: 1 1 220px; min-width: 180px; }
+.ld-select { width: 100%; max-width: 160px; }
+@media (max-width: 639px) { .ld-select { max-width: 100%; } }
+
+/* Card */
+.ld-card {
+  background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03); overflow: hidden;
+}
+.ld-card-hint { padding: 14px 16px; }
+
+/* Table */
+.ld-table-header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 14px; font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  color: var(--text-muted); border-bottom: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.015);
+}
+.ld-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 14px; transition: background 100ms ease;
+}
+.ld-row:hover { background: rgba(1,105,111,0.02); }
+.ld-row-border { border-bottom: 1px solid rgba(0,0,0,0.04); }
+
+.ld-col-source { width: 90px; display: none; }
+.ld-col-status { width: 70px; display: none; }
+.ld-col-value { width: 70px; text-align: right; display: none; }
+.ld-col-agent { width: 120px; display: none; align-items: center; gap: 4px; }
+.ld-col-time { width: 60px; text-align: right; display: none; }
+@media (min-width: 640px) { .ld-col-source, .ld-col-status { display: flex; align-items: center; justify-content: center; } }
+@media (min-width: 768px) { .ld-col-value, .ld-col-time { display: flex; align-items: center; justify-content: flex-end; } }
+@media (min-width: 1024px) { .ld-col-agent { display: flex; } }
+
+.ld-empty {
+  display: flex; flex-direction: column; align-items: center;
+  gap: 4px; padding: 24px 12px; text-align: center;
+  font-size: 12px; color: var(--text-muted);
+}
+
+/* Avatar */
+.ld-avatar {
+  width: 28px; height: 28px; border-radius: 7px;
+  background: rgba(1,105,111,0.07); color: #01696f;
+  font-size: 10px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.ld-avatar--unassigned { background: rgba(194,123,26,0.08); color: #c27b1a; }
+
+.ld-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,0,0.15); flex-shrink: 0; }
+
+.ld-source-chip {
+  display: inline-flex; align-items: center; gap: 3px;
+  font-size: 10px; font-weight: 500; color: #01696f;
+  padding: 1px 6px; border-radius: 9999px; background: rgba(1,105,111,0.06);
+}
+
+.ld-unassigned-badge {
+  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px;
+  background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap;
+}
+
+/* Status badges */
+.ld-status-new { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px; background: rgba(59,130,246,0.08); color: #3b82f6; white-space: nowrap; }
+.ld-status-contacted { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px; background: rgba(1,105,111,0.08); color: #01696f; white-space: nowrap; }
+.ld-status-qualified { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px; background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap; }
+.ld-status-proposal { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px; background: rgba(139,92,246,0.08); color: #8b5cf6; white-space: nowrap; }
+.ld-status-won { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px; background: rgba(15,123,95,0.08); color: #0f7b5f; white-space: nowrap; }
+.ld-status-lost { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9999px; background: rgba(0,0,0,0.04); color: #8a8a86; white-space: nowrap; }
+
+.ld-action-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; border-radius: 6px;
+  background: rgba(1,105,111,0.06); color: #01696f; flex-shrink: 0;
+  transition: all 150ms ease; border: none; cursor: pointer;
+}
+.ld-action-btn:hover { background: rgba(1,105,111,0.14); }
+
+.ld-action-mini {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px; border-radius: 4px;
+  background: transparent; color: var(--text-muted); border: none; cursor: pointer;
+  transition: all 100ms ease;
+}
+.ld-action-mini:hover { background: rgba(193,56,56,0.08); color: #c13838; }
+
+.ld-assign-native {
+  width: 90px; font-size: 10px; padding: 2px 4px; border-radius: 5px;
+  border: 1px solid rgba(0,0,0,0.1); background: #fff; color: var(--text-muted);
+  cursor: pointer;
+}
+.ld-assign-native:hover { border-color: rgba(1,105,111,0.3); }
+
+/* ── Integrations tab ── */
+.ld-section-hint { font-size: 13px; color: var(--text-muted); }
+
+.ld-intg-grid {
+  display: grid; grid-template-columns: 1fr; gap: 12px;
+}
+@media (min-width: 768px) { .ld-intg-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (min-width: 1280px) { .ld-intg-grid { grid-template-columns: repeat(3, 1fr); } }
+
+.ld-intg-card {
+  background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 12px;
+  padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  transition: all 150ms ease;
+}
+.ld-intg-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
+.ld-intg-card--connected { border-color: rgba(1,105,111,0.15); }
+
+.ld-intg-icon {
+  width: 38px; height: 38px; border-radius: 10px;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  background: rgba(0,0,0,0.04); color: #8a8a86;
+}
+.ld-intg-icon--on { background: rgba(1,105,111,0.08); color: #01696f; }
+
+.ld-intg-stat {
+  display: inline-flex; align-items: center; gap: 3px;
+  font-size: 10px; font-weight: 600; color: #01696f;
+}
+
+.ld-intg-toggle {
+  font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.1); background: transparent; color: var(--text-muted);
+  cursor: pointer; transition: all 120ms ease;
+}
+.ld-intg-toggle:hover { border-color: rgba(0,0,0,0.2); }
+.ld-intg-toggle--on {
+  background: rgba(1,105,111,0.06); color: #01696f; border-color: rgba(1,105,111,0.15);
+}
+
+/* ── Management tab ── */
+.ld-mgmt-grid { display: flex; flex-direction: column; gap: 16px; }
+.ld-mgmt-header { display: flex; align-items: center; gap: 8px; padding: 14px 16px 0 16px; }
+
+.ld-rule-row {
+  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
+}
+
+.ld-setting-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 10px 14px; background: rgba(0,0,0,0.015); border-radius: 8px; cursor: pointer;
+}
+.ld-setting-row:hover { background: rgba(0,0,0,0.025); }
+
+.ld-mode-option {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 10px 14px; border-radius: 8px; cursor: pointer;
+  border: 1px solid rgba(0,0,0,0.06); background: rgba(0,0,0,0.01);
+  transition: all 120ms ease;
+}
+.ld-mode-option:hover { border-color: rgba(0,0,0,0.12); }
+.ld-mode-option--active {
+  border-color: rgba(1,105,111,0.25); background: rgba(1,105,111,0.03);
+}
+.ld-radio {
+  margin-top: 2px; accent-color: #01696f; flex-shrink: 0;
+}
+
+.ld-add-rule {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 12px; font-weight: 500; color: #01696f;
+  background: none; border: none; cursor: pointer; padding: 0;
+}
+.ld-add-rule:hover { text-decoration: underline; }
+</style>
diff --git a/app/pages/sales/quick-lead.vue b/app/pages/sales/quick-lead.vue
new file mode 100644
index 0000000..44e15a5
--- /dev/null
+++ b/app/pages/sales/quick-lead.vue
@@ -0,0 +1,519 @@
+<script setup lang="ts">
+import { useQuickLeads, type QuickLead } from '~/composables/useQuickLeads'
+
+usePageTitle('Quick Leads')
+
+const { leads, addLead, removeLead, recentLeads } = useQuickLeads()
+const toast = useToast()
+
+/* ── Form state ── */
+const formOpen = ref(false)
+const name = ref('')
+const phone = ref('')
+const email = ref('')
+const product = ref('')
+const source = ref('')
+const priority = ref<'normal' | 'high' | 'urgent'>('normal')
+const note = ref('')
+
+const productOptions = [
+  { label: 'Auto', value: 'Auto' },
+  { label: 'Health', value: 'Health' },
+  { label: 'Life', value: 'Life' },
+  { label: 'General Risk', value: 'General Risk' },
+  { label: 'Custom', value: 'Custom' },
+]
+
+const sourceOptions = [
+  { label: 'Walk-in', value: 'walk-in' },
+  { label: 'Referral', value: 'referral' },
+  { label: 'Phone call', value: 'phone' },
+  { label: 'Website', value: 'website' },
+  { label: 'Social media', value: 'social' },
+  { label: 'Other', value: 'other' },
+]
+
+const priorityOptions = [
+  { label: 'Normal', value: 'normal' as const },
+  { label: 'High — follow up today', value: 'high' as const },
+  { label: 'Urgent — client waiting', value: 'urgent' as const },
+]
+
+function submit() {
+  if (!name.value.trim() || !product.value) return
+  addLead({
+    name: name.value.trim(),
+    phone: phone.value.trim(),
+    email: email.value.trim(),
+    product: product.value,
+    source: source.value || 'other',
+    priority: priority.value,
+    note: note.value.trim(),
+    agent: 'Me', // placeholder
+  })
+  toast.add({ title: 'Lead captured', description: `${name.value} added to quick leads`, color: 'success' })
+  resetForm()
+}
+
+function resetForm() {
+  name.value = ''
+  phone.value = ''
+  email.value = ''
+  product.value = ''
+  source.value = ''
+  priority.value = 'normal'
+  note.value = ''
+  formOpen.value = false
+}
+
+function confirmRemove(id: string) {
+  removeLead(id)
+  toast.add({ title: 'Lead removed', color: 'neutral' })
+}
+
+/* ── List filtering ── */
+type ListFilter = 'all' | 'urgent' | 'high' | 'normal'
+const activeFilter = ref<ListFilter>('all')
+
+const filteredLeads = computed(() => {
+  if (activeFilter.value === 'all') return leads.value
+  return leads.value.filter(l => l.priority === activeFilter.value)
+})
+
+const filterCounts = computed(() => ({
+  all: leads.value.length,
+  urgent: leads.value.filter(l => l.priority === 'urgent').length,
+  high: leads.value.filter(l => l.priority === 'high').length,
+  normal: leads.value.filter(l => l.priority === 'normal').length,
+}))
+
+/* ── Helpers ── */
+function priorityMeta(p: string) {
+  if (p === 'urgent') return { label: 'Urgent', class: 'ql-pri-urgent' }
+  if (p === 'high') return { label: 'High', class: 'ql-pri-high' }
+  return { label: 'Normal', class: 'ql-pri-normal' }
+}
+
+function formatDate(iso: string) {
+  const d = new Date(iso)
+  const now = new Date()
+  const diff = now.getTime() - d.getTime()
+  if (diff < 3600000) return `${Math.max(1, Math.round(diff / 60000))}m ago`
+  if (diff < 86400000) return `${Math.round(diff / 3600000)}h ago`
+  if (diff < 172800000) return 'Yesterday'
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+/* ── Seed demo data if empty ── */
+onMounted(() => {
+  if (leads.value.length === 0) {
+    const now = Date.now()
+    const demoLeads: Omit<QuickLead, 'id'>[] = [
+      { name: 'Diego Herrera', phone: '+506 6100-4422', email: 'diego.h@gmail.com', product: 'Auto', source: 'referral', priority: 'high', note: 'Referred by Roberto Jiménez — needs fleet quote for 3 vehicles', agent: 'Marco V.', createdAt: new Date(now - 2 * 86400000).toISOString() },
+      { name: 'Valeria Núñez', phone: '+506 8899-1100', email: '', product: 'Auto', source: 'walk-in', priority: 'normal', note: 'Walk-in, interested in comprehensive auto', agent: 'Ana R.', createdAt: new Date(now - 4 * 86400000).toISOString() },
+      { name: 'Patricia Mora', phone: '+506 7700-3311', email: 'patricia.mora@empresa.cr', product: 'Health', source: 'website', priority: 'urgent', note: 'Corporate group health RFP — 20 employees, need response by Friday', agent: 'Ana R.', createdAt: new Date(now - 1 * 86400000).toISOString() },
+      { name: 'José Ramírez', phone: '+506 6045-8820', email: 'jramirez@outlook.com', product: 'Life', source: 'phone', priority: 'normal', note: 'Interested in term life, age 45', agent: 'Marco V.', createdAt: new Date(now - 6 * 86400000).toISOString() },
+      { name: 'Lucía Castillo', phone: '+506 8312-5500', email: '', product: 'Auto', source: 'social', priority: 'high', note: 'Instagram DM — new car, wants quote ASAP', agent: 'Marco V.', createdAt: new Date(now - 3 * 86400000).toISOString() },
+    ]
+    // Insert with proper IDs
+    for (const entry of demoLeads.reverse()) {
+      leads.value = [{
+        id: crypto.randomUUID?.() ?? String(Date.now() + Math.random()),
+        ...entry,
+      }, ...leads.value]
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="ql-page">
+    <!-- Back -->
+    <NuxtLink to="/onboarding" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Sales Pipeline</UButton>
+    </NuxtLink>
+
+    <!-- Sales flow indicator -->
+    <SalesFlowIndicator current-stage="quick_lead" />
+
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Quick Leads</h1>
+        <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+          Capture leads in seconds. Every lead lands here and stays visible until you move it to a full quote or customer profile.
+        </p>
+      </div>
+      <button
+        type="button"
+        class="ql-add-btn"
+        @click="formOpen = !formOpen"
+      >
+        <UIcon :name="formOpen ? 'i-heroicons-chevron-up' : 'i-heroicons-plus'" style="width: 14px; height: 14px;" />
+        {{ formOpen ? 'Close form' : 'New quick lead' }}
+      </button>
+    </div>
+
+    <!-- ═══ Dropdown form ═══ -->
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0 -translate-y-2 max-h-0"
+      enter-to-class="opacity-100 translate-y-0 max-h-[600px]"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100 max-h-[600px]"
+      leave-to-class="opacity-0 -translate-y-2 max-h-0"
+    >
+      <div v-if="formOpen" class="ql-form-card">
+        <!-- Section: Contact -->
+        <div class="ql-section">
+          <p class="ql-section-title">Contact</p>
+          <div class="ql-fields">
+            <div class="ql-field ql-field-full">
+              <label class="ql-label">Name <span class="ql-required">*</span></label>
+              <UInput v-model="name" placeholder="Full name or company" size="sm" />
+            </div>
+            <div class="ql-field">
+              <label class="ql-label">Phone</label>
+              <UInput v-model="phone" placeholder="+506 0000-0000" size="sm" />
+            </div>
+            <div class="ql-field">
+              <label class="ql-label">Email</label>
+              <UInput v-model="email" placeholder="name@company.com" size="sm" type="email" />
+            </div>
+          </div>
+        </div>
+
+        <div class="ql-divider" />
+
+        <!-- Section: Lead info -->
+        <div class="ql-section">
+          <p class="ql-section-title">Lead info</p>
+          <div class="ql-fields">
+            <div class="ql-field">
+              <label class="ql-label">Product line <span class="ql-required">*</span></label>
+              <USelect v-model="product" :items="productOptions" placeholder="Select line..." size="sm" />
+            </div>
+            <div class="ql-field">
+              <label class="ql-label">Source</label>
+              <USelect v-model="source" :items="sourceOptions" placeholder="How did they find us?" size="sm" />
+            </div>
+            <div class="ql-field ql-field-full">
+              <label class="ql-label">Priority</label>
+              <USelect v-model="priority" :items="priorityOptions" placeholder="Normal" size="sm" />
+            </div>
+            <div class="ql-field ql-field-full">
+              <label class="ql-label">Notes</label>
+              <UTextarea v-model="note" placeholder="Brief context, referral source, or anything useful for follow-up..." size="sm" :rows="2" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Submit -->
+        <div class="ql-footer">
+          <div class="flex items-center gap-2 text-[12px] text-[var(--text-muted)]">
+            <UIcon name="i-heroicons-bolt" style="width: 14px; height: 14px; opacity: 0.5;" />
+            Saves to quick lead list
+          </div>
+          <div class="flex gap-2">
+            <button type="button" class="ql-cancel-btn" @click="resetForm">Cancel</button>
+            <button type="button" class="ql-submit-btn" :class="!name.trim() || !product ? 'ql-btn-disabled' : ''" @click="submit">
+              <UIcon name="i-heroicons-paper-airplane" style="width: 14px; height: 14px;" />
+              Add Lead
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- ═══ KPI strip ═══ -->
+    <div class="ql-kpi-strip">
+      <div class="ql-kpi">
+        <p class="ql-kpi-label">Total leads</p>
+        <p class="ql-kpi-value">{{ leads.length }}</p>
+      </div>
+      <div class="ql-kpi">
+        <p class="ql-kpi-label">Last 10 days</p>
+        <p class="ql-kpi-value">{{ recentLeads(10).length }}</p>
+      </div>
+      <div class="ql-kpi">
+        <p class="ql-kpi-label">Urgent</p>
+        <p class="ql-kpi-value" style="color: #c13838;">{{ filterCounts.urgent }}</p>
+      </div>
+      <div class="ql-kpi">
+        <p class="ql-kpi-label">High priority</p>
+        <p class="ql-kpi-value" style="color: #c27b1a;">{{ filterCounts.high }}</p>
+      </div>
+    </div>
+
+    <!-- ═══ Filter tabs ═══ -->
+    <div class="flex items-center justify-between gap-3">
+      <div class="ql-filter-tabs">
+        <button
+          v-for="f in ([
+            { id: 'all', label: 'All' },
+            { id: 'urgent', label: 'Urgent' },
+            { id: 'high', label: 'High' },
+            { id: 'normal', label: 'Normal' },
+          ] as { id: ListFilter; label: string }[])"
+          :key="f.id"
+          type="button"
+          class="ql-filter-tab"
+          :class="activeFilter === f.id ? 'ql-filter-on' : 'ql-filter-off'"
+          @click="activeFilter = f.id"
+        >
+          {{ f.label }}
+          <span class="ql-filter-count" :class="activeFilter === f.id ? 'ql-filter-count-on' : ''">{{ filterCounts[f.id] }}</span>
+        </button>
+      </div>
+      <span class="text-[11px] text-[var(--text-muted)]">{{ filteredLeads.length }} results</span>
+    </div>
+
+    <!-- ═══ Leads list ═══ -->
+    <div v-if="filteredLeads.length === 0" class="ql-empty">
+      <UIcon name="i-heroicons-bolt" style="width: 32px; height: 32px; color: #c0c0bc;" />
+      <p class="text-[13px] text-[var(--text-muted)] mt-2">No quick leads yet.</p>
+      <button type="button" class="ql-add-btn mt-3" @click="formOpen = true">
+        <UIcon name="i-heroicons-plus" style="width: 14px; height: 14px;" />
+        Add your first lead
+      </button>
+    </div>
+
+    <div v-else class="ql-lead-list">
+      <TransitionGroup
+        enter-active-class="transition-all duration-200 ease-out"
+        enter-from-class="opacity-0 -translate-y-1 scale-95"
+        enter-to-class="opacity-100 translate-y-0 scale-100"
+        leave-active-class="transition-all duration-150 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0 scale-95"
+      >
+        <div v-for="lead in filteredLeads" :key="lead.id" class="ql-lead-card group">
+          <div class="ql-lead-top">
+            <div class="ql-lead-avatar">{{ lead.name.split(' ').map(w => w[0]).join('').slice(0, 2) }}</div>
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2 flex-wrap">
+                <p class="text-[14px] font-semibold text-[var(--text-primary)] truncate">{{ lead.name }}</p>
+                <span :class="priorityMeta(lead.priority).class">{{ priorityMeta(lead.priority).label }}</span>
+                <span class="ql-product-tag">{{ lead.product }}</span>
+              </div>
+              <div class="flex items-center gap-3 mt-0.5 text-[11px] text-[var(--text-muted)]">
+                <span v-if="lead.phone">{{ lead.phone }}</span>
+                <span v-if="lead.email">{{ lead.email }}</span>
+                <span>{{ formatDate(lead.createdAt) }}</span>
+              </div>
+            </div>
+            <div class="ql-lead-actions">
+              <NuxtLink :to="`/quotes/new`" title="Start quote">
+                <button type="button" class="ql-action-btn ql-action-quote">
+                  <UIcon name="i-heroicons-calculator" style="width: 14px; height: 14px;" />
+                </button>
+              </NuxtLink>
+              <button type="button" class="ql-action-btn ql-action-delete" title="Remove" @click="confirmRemove(lead.id)">
+                <UIcon name="i-heroicons-trash" style="width: 14px; height: 14px;" />
+              </button>
+            </div>
+          </div>
+          <div v-if="lead.note" class="ql-lead-note">
+            <UIcon name="i-heroicons-chat-bubble-left-ellipsis" style="width: 11px; height: 11px; color: #8a8a86; flex-shrink: 0;" />
+            <span>{{ lead.note }}</span>
+          </div>
+          <div class="ql-lead-meta">
+            <span v-if="lead.source" class="ql-meta-tag">{{ lead.source }}</span>
+            <span class="ql-meta-tag">{{ lead.agent }}</span>
+          </div>
+        </div>
+      </TransitionGroup>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ql-page {
+  max-width: 64rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-bottom: 3rem;
+}
+
+/* ── Add button ── */
+.ql-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 8px;
+  background: #01696f;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.ql-add-btn:hover { background: #015458; }
+
+/* ── Form card ── */
+.ql-form-card {
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+.ql-section { padding: 20px; }
+.ql-section-title {
+  font-size: 13px; font-weight: 600;
+  color: var(--text-primary); margin-bottom: 16px;
+}
+.ql-fields {
+  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
+}
+@media (max-width: 639px) { .ql-fields { grid-template-columns: 1fr; } }
+.ql-field-full { grid-column: 1 / -1; }
+.ql-field { display: flex; flex-direction: column; gap: 6px; }
+.ql-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+}
+.ql-required { color: #c13838; }
+.ql-divider { height: 1px; background: rgba(0, 0, 0, 0.06); margin: 0 20px; }
+.ql-footer {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 16px 20px; border-top: 1px solid rgba(0, 0, 0, 0.06);
+  background: rgba(0, 0, 0, 0.015);
+}
+.ql-submit-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px; border-radius: 8px;
+  background: #01696f; color: #fff;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.ql-submit-btn:hover { background: #015458; }
+.ql-btn-disabled { opacity: 0.5; pointer-events: none; }
+.ql-cancel-btn {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 8px 14px; border-radius: 8px;
+  background: transparent; color: var(--text-muted);
+  font-size: 13px; font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.08); cursor: pointer;
+  transition: all 150ms ease; white-space: nowrap;
+}
+.ql-cancel-btn:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+
+/* ── KPI strip ── */
+.ql-kpi-strip {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.ql-kpi { padding: 14px 18px; background: #fff; }
+.ql-kpi:first-child { border-radius: 12px 0 0 12px; }
+.ql-kpi:last-child { border-radius: 0 12px 12px 0; }
+.ql-kpi-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+}
+.ql-kpi-value {
+  margin-top: 4px; font-size: 22px; font-weight: 600;
+  color: var(--text-primary); font-variant-numeric: tabular-nums;
+}
+@media (max-width: 640px) { .ql-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
+
+/* ── Filter tabs ── */
+.ql-filter-tabs {
+  display: inline-flex; gap: 2px; padding: 3px;
+  border-radius: 10px; background: rgba(0,0,0,0.04);
+}
+.ql-filter-tab {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 6px 12px; border-radius: 8px;
+  font-size: 12px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.ql-filter-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.ql-filter-off { background: transparent; color: var(--text-muted); }
+.ql-filter-off:hover { color: var(--text-primary); }
+.ql-filter-count {
+  font-size: 10px; font-weight: 600; padding: 1px 5px;
+  border-radius: 9999px; background: rgba(0,0,0,0.06); color: var(--text-muted);
+}
+.ql-filter-count-on { background: rgba(1,105,111,0.1); color: #01696f; }
+
+/* ── Lead cards ── */
+.ql-lead-list { display: flex; flex-direction: column; gap: 6px; }
+.ql-lead-card {
+  display: flex; flex-direction: column; gap: 8px;
+  padding: 14px 16px; border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  transition: all 150ms ease;
+}
+.ql-lead-card:hover {
+  border-color: rgba(1,105,111,0.15);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+.ql-lead-top { display: flex; align-items: center; gap: 10px; }
+.ql-lead-avatar {
+  width: 36px; height: 36px; border-radius: 10px;
+  background: rgba(194,123,26,0.08); color: #c27b1a;
+  font-size: 12px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.ql-lead-actions {
+  display: flex; gap: 4px; opacity: 0;
+  transition: opacity 150ms ease; flex-shrink: 0;
+}
+.ql-lead-card:hover .ql-lead-actions { opacity: 1; }
+.ql-action-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 6px;
+  border: none; cursor: pointer;
+  background: rgba(0,0,0,0.03); color: #8a8a86;
+  transition: all 150ms ease;
+}
+.ql-action-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
+.ql-action-quote:hover { background: rgba(1,105,111,0.1); color: #01696f; }
+.ql-action-delete:hover { background: rgba(193,56,56,0.08); color: #c13838; }
+
+.ql-lead-note {
+  display: flex; align-items: flex-start; gap: 5px;
+  padding-left: 46px;
+  font-size: 12px; color: var(--text-muted); line-height: 1.4;
+}
+.ql-lead-meta {
+  display: flex; gap: 4px; padding-left: 46px; flex-wrap: wrap;
+}
+.ql-meta-tag {
+  font-size: 10px; font-weight: 500; padding: 1px 7px;
+  border-radius: 4px; background: rgba(0,0,0,0.04); color: #8a8a86;
+  text-transform: capitalize;
+}
+
+/* ── Priority badges ── */
+.ql-pri-urgent {
+  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px;
+  background: rgba(193,56,56,0.08); color: #c13838; white-space: nowrap;
+}
+.ql-pri-high {
+  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px;
+  background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap;
+}
+.ql-pri-normal {
+  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px;
+  background: rgba(0,0,0,0.04); color: #8a8a86; white-space: nowrap;
+}
+.ql-product-tag {
+  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px;
+  background: rgba(1,105,111,0.07); color: #01696f; white-space: nowrap;
+}
+
+/* ── Empty ── */
+.ql-empty {
+  display: flex; flex-direction: column; align-items: center;
+  padding: 40px 16px; text-align: center;
+}
+</style>
diff --git a/app/pages/settings/agents.vue b/app/pages/settings/agents.vue
new file mode 100644
index 0000000..a21152e
--- /dev/null
+++ b/app/pages/settings/agents.vue
@@ -0,0 +1,1036 @@
+<script setup lang="ts">
+usePageTitle('Agents & Commissions · Settings')
+
+/* ── Types ── */
+type AgentStatus = 'active' | 'inactive' | 'suspended'
+type CommissionTier = { lobId: string; lob: string; newPct: number; renewalPct: number }
+
+interface Agent {
+  id: string
+  name: string
+  email: string
+  phone: string
+  role: string
+  status: AgentStatus
+  hireDate: string
+  book: { policies: number; gwp: number; collected: number; outstanding: number }
+  commissionTiers: CommissionTier[]
+  ytdEarned: number
+  ytdPending: number
+  lastLogin: string
+}
+
+/* ── Mock data ── */
+const agents = ref<Agent[]>([
+  {
+    id: 'AG-001', name: 'Ana Ramírez', email: 'ana.ramirez@segur-os.com', phone: '+506 8812-4455',
+    role: 'Senior producer', status: 'active', hireDate: '2021-03-15',
+    book: { policies: 142, gwp: 2_840_000, collected: 2_610_000, outstanding: 230_000 },
+    commissionTiers: [
+      { lobId: 'auto', lob: 'Auto', newPct: 15, renewalPct: 10 },
+      { lobId: 'health', lob: 'Health', newPct: 12, renewalPct: 8 },
+      { lobId: 'life', lob: 'Life', newPct: 18, renewalPct: 12 },
+      { lobId: 'property', lob: 'Property', newPct: 14, renewalPct: 9 },
+      { lobId: 'general', lob: 'General risk', newPct: 13, renewalPct: 8 },
+    ],
+    ytdEarned: 48_200, ytdPending: 6_400, lastLogin: '2026-04-05 08:32'
+  },
+  {
+    id: 'AG-002', name: 'Marco Villanueva', email: 'marco.v@segur-os.com', phone: '+506 8899-2211',
+    role: 'Producer', status: 'active', hireDate: '2022-08-01',
+    book: { policies: 88, gwp: 1_620_000, collected: 1_480_000, outstanding: 140_000 },
+    commissionTiers: [
+      { lobId: 'auto', lob: 'Auto', newPct: 14, renewalPct: 9 },
+      { lobId: 'health', lob: 'Health', newPct: 11, renewalPct: 7 },
+      { lobId: 'life', lob: 'Life', newPct: 16, renewalPct: 10 },
+      { lobId: 'property', lob: 'Property', newPct: 12, renewalPct: 8 },
+      { lobId: 'general', lob: 'General risk', newPct: 12, renewalPct: 7 },
+    ],
+    ytdEarned: 28_600, ytdPending: 3_200, lastLogin: '2026-04-04 17:15'
+  },
+  {
+    id: 'AG-003', name: 'Lucía Fernández', email: 'lucia.f@segur-os.com', phone: '+506 7745-3388',
+    role: 'Junior producer', status: 'active', hireDate: '2024-01-10',
+    book: { policies: 34, gwp: 420_000, collected: 385_000, outstanding: 35_000 },
+    commissionTiers: [
+      { lobId: 'auto', lob: 'Auto', newPct: 12, renewalPct: 8 },
+      { lobId: 'health', lob: 'Health', newPct: 10, renewalPct: 6 },
+      { lobId: 'life', lob: 'Life', newPct: 14, renewalPct: 9 },
+      { lobId: 'property', lob: 'Property', newPct: 11, renewalPct: 7 },
+      { lobId: 'general', lob: 'General risk', newPct: 10, renewalPct: 6 },
+    ],
+    ytdEarned: 8_400, ytdPending: 1_100, lastLogin: '2026-04-05 09:01'
+  },
+  {
+    id: 'AG-004', name: 'Diego Mora', email: 'diego.m@segur-os.com', phone: '+506 6612-9944',
+    role: 'Producer', status: 'suspended', hireDate: '2023-05-20',
+    book: { policies: 56, gwp: 980_000, collected: 720_000, outstanding: 260_000 },
+    commissionTiers: [
+      { lobId: 'auto', lob: 'Auto', newPct: 13, renewalPct: 9 },
+      { lobId: 'health', lob: 'Health', newPct: 11, renewalPct: 7 },
+      { lobId: 'life', lob: 'Life', newPct: 15, renewalPct: 10 },
+      { lobId: 'property', lob: 'Property', newPct: 12, renewalPct: 8 },
+      { lobId: 'general', lob: 'General risk', newPct: 11, renewalPct: 7 },
+    ],
+    ytdEarned: 14_200, ytdPending: 8_800, lastLogin: '2026-03-28 11:40'
+  },
+  {
+    id: 'AG-005', name: 'Valentina Castro', email: 'val.castro@segur-os.com', phone: '+506 8834-5566',
+    role: 'Senior producer', status: 'inactive', hireDate: '2019-11-03',
+    book: { policies: 0, gwp: 0, collected: 0, outstanding: 0 },
+    commissionTiers: [
+      { lobId: 'auto', lob: 'Auto', newPct: 15, renewalPct: 10 },
+      { lobId: 'health', lob: 'Health', newPct: 12, renewalPct: 8 },
+      { lobId: 'life', lob: 'Life', newPct: 18, renewalPct: 12 },
+      { lobId: 'property', lob: 'Property', newPct: 14, renewalPct: 9 },
+      { lobId: 'general', lob: 'General risk', newPct: 13, renewalPct: 8 },
+    ],
+    ytdEarned: 0, ytdPending: 0, lastLogin: '2025-12-15 14:22'
+  },
+])
+
+/* ── State ── */
+const search = ref('')
+const statusFilter = ref<'all' | AgentStatus>('all')
+const selectedAgent = ref<Agent | null>(null)
+const addModalOpen = ref(false)
+const editingCommissions = ref(false)
+
+/* ── Filtering ── */
+const filteredAgents = computed(() => {
+  let list = agents.value
+  if (statusFilter.value !== 'all') list = list.filter(a => a.status === statusFilter.value)
+  const q = search.value.trim().toLowerCase()
+  if (q) list = list.filter(a =>
+    a.name.toLowerCase().includes(q) ||
+    a.email.toLowerCase().includes(q) ||
+    a.id.toLowerCase().includes(q) ||
+    a.role.toLowerCase().includes(q)
+  )
+  return list
+})
+
+/* ── Aggregate KPIs ── */
+const kpis = computed(() => {
+  const active = agents.value.filter(a => a.status === 'active')
+  const totalBook = agents.value.reduce((s, a) => s + a.book.gwp, 0)
+  const totalCollected = agents.value.reduce((s, a) => s + a.book.collected, 0)
+  const totalOutstanding = agents.value.reduce((s, a) => s + a.book.outstanding, 0)
+  const totalEarned = agents.value.reduce((s, a) => s + a.ytdEarned, 0)
+  const totalPending = agents.value.reduce((s, a) => s + a.ytdPending, 0)
+  return {
+    activeCount: active.length,
+    totalCount: agents.value.length,
+    totalBook,
+    totalCollected,
+    totalOutstanding,
+    collectionRate: totalBook > 0 ? Math.round(totalCollected / totalBook * 100) : 0,
+    totalEarned,
+    totalPending,
+  }
+})
+
+/* ── Add agent modal ── */
+const newAgent = reactive({
+  name: '', email: '', phone: '', role: 'Producer',
+  defaultNewPct: 13, defaultRenewalPct: 8,
+})
+
+function resetNewAgent() {
+  newAgent.name = ''; newAgent.email = ''; newAgent.phone = ''
+  newAgent.role = 'Producer'; newAgent.defaultNewPct = 13; newAgent.defaultRenewalPct = 8
+}
+
+const LOB_LIST = ['Auto', 'Health', 'Life', 'Property', 'General risk']
+
+function submitNewAgent() {
+  if (!newAgent.name.trim() || !newAgent.email.trim()) return
+  const agent: Agent = {
+    id: `AG-${String(agents.value.length + 1).padStart(3, '0')}`,
+    name: newAgent.name.trim(),
+    email: newAgent.email.trim(),
+    phone: newAgent.phone.trim(),
+    role: newAgent.role,
+    status: 'active',
+    hireDate: new Date().toISOString().slice(0, 10),
+    book: { policies: 0, gwp: 0, collected: 0, outstanding: 0 },
+    commissionTiers: LOB_LIST.map((lob, i) => ({
+      lobId: lob.toLowerCase().replace(/\s+/g, '-'),
+      lob,
+      newPct: newAgent.defaultNewPct,
+      renewalPct: newAgent.defaultRenewalPct,
+    })),
+    ytdEarned: 0,
+    ytdPending: 0,
+    lastLogin: '—',
+  }
+  agents.value = [...agents.value, agent]
+  addModalOpen.value = false
+  resetNewAgent()
+  selectedAgent.value = agent
+}
+
+function toggleAgentStatus(agent: Agent) {
+  if (agent.status === 'active') agent.status = 'suspended'
+  else if (agent.status === 'suspended') agent.status = 'active'
+  else agent.status = 'active'
+}
+
+function resetCredentials(_agent: Agent) {
+  // Mock: in production this would trigger a password reset email
+  alert(`Password reset email would be sent to ${_agent.email}`)
+}
+
+/* ── Helpers ── */
+function fmtMoney(n: number) {
+  if (n >= 1_000_000) return `$${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `$${(n / 1_000).toFixed(0)}K`
+  return `$${n.toLocaleString()}`
+}
+
+const statusMeta: Record<AgentStatus, { label: string; cls: string; dot: string }> = {
+  active: { label: 'Active', cls: 'ag-status-active', dot: '#0f7b5f' },
+  inactive: { label: 'Inactive', cls: 'ag-status-inactive', dot: '#8a8a86' },
+  suspended: { label: 'Suspended', cls: 'ag-status-suspended', dot: '#c27b1a' },
+}
+
+const roleOptions = ['Junior producer', 'Producer', 'Senior producer', 'Account executive', 'Manager']
+</script>
+
+<template>
+  <div class="ag-page">
+    <!-- Header -->
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <div class="flex items-center gap-2">
+          <NuxtLink to="/settings" class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors">
+            <UIcon name="i-heroicons-arrow-left" style="width: 16px; height: 16px;" />
+          </NuxtLink>
+        </div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Agents & commissions</h1>
+        <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
+          Manage producer accounts, credentials, and commission schedules. Commissions are calculated on <strong class="font-medium text-[var(--text-primary)]">collected cashflow only</strong> — unpaid or late premiums do not generate commission until received.
+        </p>
+      </div>
+      <button type="button" class="ag-btn-primary" @click="addModalOpen = true; resetNewAgent()">
+        <UIcon name="i-heroicons-user-plus" style="width: 14px; height: 14px;" />
+        Add agent
+      </button>
+    </div>
+
+    <!-- KPI strip -->
+    <div class="ag-kpi-strip">
+      <div class="ag-kpi">
+        <p class="ag-kpi-label">Active agents</p>
+        <p class="ag-kpi-value">{{ kpis.activeCount }}<span class="ag-kpi-sub"> / {{ kpis.totalCount }}</span></p>
+      </div>
+      <div class="ag-kpi-div" />
+      <div class="ag-kpi">
+        <p class="ag-kpi-label">Total book</p>
+        <p class="ag-kpi-value">{{ fmtMoney(kpis.totalBook) }}</p>
+      </div>
+      <div class="ag-kpi-div" />
+      <div class="ag-kpi">
+        <p class="ag-kpi-label">Collected</p>
+        <p class="ag-kpi-value">{{ fmtMoney(kpis.totalCollected) }} <span class="ag-kpi-sub">{{ kpis.collectionRate }}%</span></p>
+      </div>
+      <div class="ag-kpi-div" />
+      <div class="ag-kpi">
+        <p class="ag-kpi-label">Outstanding</p>
+        <p class="ag-kpi-value ag-kpi-warn">{{ fmtMoney(kpis.totalOutstanding) }}</p>
+      </div>
+      <div class="ag-kpi-div" />
+      <div class="ag-kpi">
+        <p class="ag-kpi-label">YTD commissions paid</p>
+        <p class="ag-kpi-value">{{ fmtMoney(kpis.totalEarned) }}</p>
+      </div>
+      <div class="ag-kpi-div" />
+      <div class="ag-kpi">
+        <p class="ag-kpi-label">Pending (uncollected)</p>
+        <p class="ag-kpi-value ag-kpi-warn">{{ fmtMoney(kpis.totalPending) }}</p>
+      </div>
+    </div>
+
+    <!-- Cashflow commission explainer -->
+    <div class="ag-explainer">
+      <UIcon name="i-heroicons-information-circle" style="width: 16px; height: 16px; flex-shrink: 0; color: #01696f;" />
+      <div>
+        <p class="text-[12px] font-medium text-[var(--text-primary)]">Cashflow-based commission model</p>
+        <p class="text-[11px] text-[var(--text-muted)] mt-0.5">
+          Agents earn commission only on premiums actually collected. If a client is overdue or in grace period,
+          the corresponding commission moves to "pending" and is not payable until funds are received. This protects
+          the brokerage from paying out on uncollected revenue.
+        </p>
+      </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="flex flex-wrap items-center gap-3">
+      <div class="ag-search-wrap">
+        <UIcon name="i-heroicons-magnifying-glass" style="width: 14px; height: 14px; color: #8a8a86;" />
+        <input v-model="search" type="text" class="ag-search" placeholder="Search agents..." />
+      </div>
+      <div class="ag-filter-tabs">
+        <button type="button" class="ag-filter-tab" :class="statusFilter === 'all' ? 'ag-filter-on' : ''" @click="statusFilter = 'all'">All</button>
+        <button type="button" class="ag-filter-tab" :class="statusFilter === 'active' ? 'ag-filter-on' : ''" @click="statusFilter = 'active'">Active</button>
+        <button type="button" class="ag-filter-tab" :class="statusFilter === 'suspended' ? 'ag-filter-on' : ''" @click="statusFilter = 'suspended'">Suspended</button>
+        <button type="button" class="ag-filter-tab" :class="statusFilter === 'inactive' ? 'ag-filter-on' : ''" @click="statusFilter = 'inactive'">Inactive</button>
+      </div>
+    </div>
+
+    <!-- Agent list + detail split -->
+    <div class="ag-split">
+      <!-- Agent table -->
+      <div class="ag-card ag-table-wrap">
+        <table class="ag-table">
+          <thead>
+            <tr>
+              <th>Agent</th>
+              <th>Role</th>
+              <th>Policies</th>
+              <th>Book GWP</th>
+              <th>Collected</th>
+              <th>YTD earned</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="agent in filteredAgents"
+              :key="agent.id"
+              class="ag-row"
+              :class="selectedAgent?.id === agent.id ? 'ag-row-selected' : ''"
+              @click="selectedAgent = agent; editingCommissions = false"
+            >
+              <td>
+                <div class="flex items-center gap-2.5">
+                  <div class="ag-avatar">{{ agent.name.split(' ').map(w => w[0]).join('').slice(0, 2) }}</div>
+                  <div class="min-w-0">
+                    <p class="text-[13px] font-medium text-[var(--text-primary)] truncate">{{ agent.name }}</p>
+                    <p class="text-[11px] text-[var(--text-muted)] truncate">{{ agent.email }}</p>
+                  </div>
+                </div>
+              </td>
+              <td class="text-[12px] text-[var(--text-muted)]">{{ agent.role }}</td>
+              <td class="text-[13px] tabular-nums">{{ agent.book.policies }}</td>
+              <td class="text-[13px] font-medium tabular-nums">{{ fmtMoney(agent.book.gwp) }}</td>
+              <td>
+                <div class="flex items-center gap-1.5">
+                  <span class="text-[13px] tabular-nums">{{ fmtMoney(agent.book.collected) }}</span>
+                  <span v-if="agent.book.outstanding > 0" class="ag-outstanding-badge">{{ fmtMoney(agent.book.outstanding) }} due</span>
+                </div>
+              </td>
+              <td class="text-[13px] font-semibold tabular-nums">{{ fmtMoney(agent.ytdEarned) }}</td>
+              <td>
+                <span :class="statusMeta[agent.status].cls">
+                  <span class="ag-status-dot" :style="`background: ${statusMeta[agent.status].dot}`" />
+                  {{ statusMeta[agent.status].label }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <div v-if="filteredAgents.length === 0" class="px-6 py-10 text-center">
+          <p class="text-[13px] text-[var(--text-muted)]">No agents match your search.</p>
+        </div>
+      </div>
+
+      <!-- Detail panel -->
+      <Transition
+        enter-active-class="transition-all duration-200 ease-out"
+        enter-from-class="opacity-0 translate-x-4"
+        enter-to-class="opacity-100 translate-x-0"
+        leave-active-class="transition-all duration-150 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0 translate-x-4"
+      >
+        <div v-if="selectedAgent" class="ag-detail">
+          <div class="ag-card">
+            <!-- Agent header -->
+            <div class="ag-detail-header">
+              <div class="flex items-center gap-3">
+                <div class="ag-avatar-lg">{{ selectedAgent.name.split(' ').map(w => w[0]).join('').slice(0, 2) }}</div>
+                <div>
+                  <h3 class="text-[16px] font-semibold text-[var(--text-primary)]">{{ selectedAgent.name }}</h3>
+                  <p class="text-[12px] text-[var(--text-muted)]">{{ selectedAgent.id }} · {{ selectedAgent.role }}</p>
+                </div>
+              </div>
+              <button type="button" class="ag-close" @click="selectedAgent = null">
+                <UIcon name="i-heroicons-x-mark" style="width: 16px; height: 16px;" />
+              </button>
+            </div>
+
+            <!-- Contact info -->
+            <div class="ag-detail-section">
+              <p class="ag-detail-label">Contact</p>
+              <div class="ag-detail-grid">
+                <div>
+                  <p class="ag-detail-key">Email</p>
+                  <p class="ag-detail-val">{{ selectedAgent.email }}</p>
+                </div>
+                <div>
+                  <p class="ag-detail-key">Phone</p>
+                  <p class="ag-detail-val">{{ selectedAgent.phone }}</p>
+                </div>
+                <div>
+                  <p class="ag-detail-key">Hire date</p>
+                  <p class="ag-detail-val">{{ selectedAgent.hireDate }}</p>
+                </div>
+                <div>
+                  <p class="ag-detail-key">Last login</p>
+                  <p class="ag-detail-val">{{ selectedAgent.lastLogin }}</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Book summary -->
+            <div class="ag-detail-section">
+              <p class="ag-detail-label">Book of business</p>
+              <div class="ag-detail-metrics">
+                <div class="ag-metric">
+                  <p class="ag-metric-val">{{ selectedAgent.book.policies }}</p>
+                  <p class="ag-metric-label">Policies</p>
+                </div>
+                <div class="ag-metric">
+                  <p class="ag-metric-val">{{ fmtMoney(selectedAgent.book.gwp) }}</p>
+                  <p class="ag-metric-label">GWP</p>
+                </div>
+                <div class="ag-metric">
+                  <p class="ag-metric-val">{{ fmtMoney(selectedAgent.book.collected) }}</p>
+                  <p class="ag-metric-label">Collected</p>
+                </div>
+                <div class="ag-metric">
+                  <p class="ag-metric-val" :class="selectedAgent.book.outstanding > 0 ? 'text-[#c27b1a]' : ''">{{ fmtMoney(selectedAgent.book.outstanding) }}</p>
+                  <p class="ag-metric-label">Outstanding</p>
+                </div>
+              </div>
+              <!-- Collection progress bar -->
+              <div v-if="selectedAgent.book.gwp > 0" class="mt-3">
+                <div class="ag-coll-bar">
+                  <div class="ag-coll-fill" :style="`width: ${Math.round(selectedAgent.book.collected / selectedAgent.book.gwp * 100)}%`" />
+                </div>
+                <p class="text-[10px] text-[var(--text-muted)] mt-1">
+                  {{ Math.round(selectedAgent.book.collected / selectedAgent.book.gwp * 100) }}% collected — commission payable on collected portion only
+                </p>
+              </div>
+            </div>
+
+            <!-- Commission earnings -->
+            <div class="ag-detail-section">
+              <p class="ag-detail-label">YTD commission</p>
+              <div class="ag-detail-metrics">
+                <div class="ag-metric">
+                  <p class="ag-metric-val text-[#0f7b5f]">{{ fmtMoney(selectedAgent.ytdEarned) }}</p>
+                  <p class="ag-metric-label">Earned (paid)</p>
+                </div>
+                <div class="ag-metric">
+                  <p class="ag-metric-val text-[#c27b1a]">{{ fmtMoney(selectedAgent.ytdPending) }}</p>
+                  <p class="ag-metric-label">Pending (uncollected)</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- Commission schedule -->
+            <div class="ag-detail-section">
+              <div class="flex items-center justify-between">
+                <p class="ag-detail-label">Commission schedule by LOB</p>
+                <button
+                  type="button"
+                  class="ag-edit-btn"
+                  @click="editingCommissions = !editingCommissions"
+                >
+                  <UIcon :name="editingCommissions ? 'i-heroicons-check' : 'i-heroicons-pencil-square'" style="width: 12px; height: 12px;" />
+                  {{ editingCommissions ? 'Done' : 'Edit' }}
+                </button>
+              </div>
+              <table class="ag-comm-table">
+                <thead>
+                  <tr>
+                    <th>Line of business</th>
+                    <th>New biz %</th>
+                    <th>Renewal %</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="tier in selectedAgent.commissionTiers" :key="tier.lobId">
+                    <td class="text-[12px] font-medium text-[var(--text-primary)]">{{ tier.lob }}</td>
+                    <td>
+                      <input
+                        v-if="editingCommissions"
+                        v-model.number="tier.newPct"
+                        type="number"
+                        min="0"
+                        max="100"
+                        step="0.5"
+                        class="ag-pct-input"
+                      />
+                      <span v-else class="text-[13px] tabular-nums font-semibold text-[var(--text-primary)]">{{ tier.newPct }}%</span>
+                    </td>
+                    <td>
+                      <input
+                        v-if="editingCommissions"
+                        v-model.number="tier.renewalPct"
+                        type="number"
+                        min="0"
+                        max="100"
+                        step="0.5"
+                        class="ag-pct-input"
+                      />
+                      <span v-else class="text-[13px] tabular-nums font-semibold text-[var(--text-primary)]">{{ tier.renewalPct }}%</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <p class="text-[10px] text-[var(--text-muted)] mt-2">
+                Percentages apply to collected premium only. Overdue or grace-period accounts are excluded from the calculation until payment clears.
+              </p>
+            </div>
+
+            <!-- Actions -->
+            <div class="ag-detail-actions">
+              <button type="button" class="ag-action-btn" @click="resetCredentials(selectedAgent)">
+                <UIcon name="i-heroicons-key" style="width: 14px; height: 14px;" />
+                Reset password
+              </button>
+              <button
+                type="button"
+                class="ag-action-btn"
+                :class="selectedAgent.status === 'active' ? 'ag-action-warn' : 'ag-action-success'"
+                @click="toggleAgentStatus(selectedAgent)"
+              >
+                <UIcon :name="selectedAgent.status === 'active' ? 'i-heroicons-pause-circle' : 'i-heroicons-play-circle'" style="width: 14px; height: 14px;" />
+                {{ selectedAgent.status === 'active' ? 'Suspend' : 'Activate' }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+
+    <!-- ═══ ADD AGENT MODAL ═══ -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="addModalOpen" class="ag-modal-overlay" @click.self="addModalOpen = false">
+          <div class="ag-modal">
+            <div class="ag-modal-head">
+              <h3>Add new agent</h3>
+              <button type="button" class="ag-close" @click="addModalOpen = false">
+                <UIcon name="i-heroicons-x-mark" style="width: 16px; height: 16px;" />
+              </button>
+            </div>
+            <div class="ag-modal-body">
+              <div class="ag-field">
+                <label class="ag-label">Full name</label>
+                <input v-model="newAgent.name" type="text" class="ag-input" placeholder="e.g. Ana Ramírez" @keydown.enter="submitNewAgent" />
+              </div>
+              <div class="grid grid-cols-2 gap-3">
+                <div class="ag-field">
+                  <label class="ag-label">Email</label>
+                  <input v-model="newAgent.email" type="email" class="ag-input" placeholder="agent@company.com" />
+                </div>
+                <div class="ag-field">
+                  <label class="ag-label">Phone</label>
+                  <input v-model="newAgent.phone" type="tel" class="ag-input" placeholder="+506 ..." />
+                </div>
+              </div>
+              <div class="ag-field">
+                <label class="ag-label">Role</label>
+                <select v-model="newAgent.role" class="ag-select">
+                  <option v-for="r in roleOptions" :key="r" :value="r">{{ r }}</option>
+                </select>
+              </div>
+              <div class="ag-field">
+                <label class="ag-label">Default commission rates</label>
+                <p class="text-[11px] text-[var(--text-muted)] mb-2">Applied to all LOBs initially. You can customize per-LOB after creating the agent.</p>
+                <div class="grid grid-cols-2 gap-3">
+                  <div class="ag-field">
+                    <label class="ag-label-sm">New business %</label>
+                    <input v-model.number="newAgent.defaultNewPct" type="number" min="0" max="100" step="0.5" class="ag-input" />
+                  </div>
+                  <div class="ag-field">
+                    <label class="ag-label-sm">Renewal %</label>
+                    <input v-model.number="newAgent.defaultRenewalPct" type="number" min="0" max="100" step="0.5" class="ag-input" />
+                  </div>
+                </div>
+              </div>
+              <div class="ag-explainer" style="margin: 0;">
+                <UIcon name="i-heroicons-shield-check" style="width: 14px; height: 14px; flex-shrink: 0; color: #01696f;" />
+                <p class="text-[11px] text-[var(--text-muted)]">
+                  A temporary password will be generated and sent to the agent's email. They will be required to change it on first login.
+                </p>
+              </div>
+            </div>
+            <div class="ag-modal-foot">
+              <button type="button" class="ag-btn-cancel" @click="addModalOpen = false">Cancel</button>
+              <button type="button" class="ag-btn-primary" :disabled="!newAgent.name.trim() || !newAgent.email.trim()" @click="submitNewAgent">
+                Create agent
+              </button>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.ag-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-width: 80rem;
+  margin: 0 auto;
+  padding-bottom: 3rem;
+}
+
+/* ── Buttons ── */
+.ag-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  border-radius: 8px;
+  border: none;
+  background: #01696f;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.ag-btn-primary:hover { background: #015a5f; }
+.ag-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
+
+.ag-btn-cancel {
+  padding: 7px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.ag-btn-cancel:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+
+/* ── KPI strip ── */
+.ag-kpi-strip {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 20px;
+  border-radius: 10px;
+  background: #fff;
+  border: 1px solid rgba(0,0,0,0.06);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow-x: auto;
+  flex-wrap: wrap;
+}
+.ag-kpi { min-width: 0; flex-shrink: 0; }
+.ag-kpi-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86; }
+.ag-kpi-value { font-size: 18px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-top: 2px; }
+.ag-kpi-sub { font-size: 12px; font-weight: 500; color: #8a8a86; }
+.ag-kpi-warn { color: #c27b1a; }
+.ag-kpi-div { width: 1px; height: 32px; background: rgba(0,0,0,0.06); flex-shrink: 0; }
+
+/* ── Explainer ── */
+.ag-explainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background: rgba(1,105,111,0.03);
+  border: 1px solid rgba(1,105,111,0.08);
+}
+
+/* ── Search & filters ── */
+.ag-search-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  flex: 1;
+  max-width: 280px;
+}
+.ag-search {
+  border: none;
+  outline: none;
+  font-size: 12px;
+  color: var(--text-primary);
+  flex: 1;
+  background: transparent;
+}
+.ag-search::placeholder { color: #8a8a86; }
+
+.ag-filter-tabs {
+  display: inline-flex;
+  gap: 1px;
+  padding: 2px;
+  border-radius: 8px;
+  background: rgba(0,0,0,0.04);
+}
+.ag-filter-tab {
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: none;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.ag-filter-on {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
+}
+
+/* ── Split layout ── */
+.ag-split {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: 1fr;
+}
+@media (min-width: 1024px) {
+  .ag-split { grid-template-columns: 1fr 380px; }
+}
+
+/* ── Card ── */
+.ag-card {
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+
+/* ── Table ── */
+.ag-table-wrap { overflow-x: auto; }
+.ag-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.ag-table th {
+  padding: 10px 14px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  text-align: left;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+  white-space: nowrap;
+}
+.ag-table td {
+  padding: 10px 14px;
+  white-space: nowrap;
+}
+.ag-row {
+  cursor: pointer;
+  transition: background 100ms ease;
+  border-bottom: 1px solid rgba(0,0,0,0.03);
+}
+.ag-row:hover { background: rgba(0,0,0,0.015); }
+.ag-row-selected { background: rgba(1,105,111,0.03); }
+.ag-row-selected:hover { background: rgba(1,105,111,0.05); }
+
+.ag-avatar {
+  width: 32px; height: 32px;
+  border-radius: 8px;
+  background: rgba(1,105,111,0.08);
+  color: #01696f;
+  font-size: 11px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.ag-avatar-lg {
+  width: 40px; height: 40px;
+  border-radius: 10px;
+  background: rgba(1,105,111,0.08);
+  color: #01696f;
+  font-size: 14px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ag-outstanding-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background: rgba(194,123,26,0.08);
+  color: #c27b1a;
+  white-space: nowrap;
+}
+
+/* ── Status badges ── */
+.ag-status-active, .ag-status-inactive, .ag-status-suspended {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px 2px 6px;
+  border-radius: 9999px;
+}
+.ag-status-active { background: rgba(15,123,95,0.06); color: #0f7b5f; }
+.ag-status-inactive { background: rgba(0,0,0,0.04); color: #8a8a86; }
+.ag-status-suspended { background: rgba(194,123,26,0.06); color: #c27b1a; }
+.ag-status-dot { width: 6px; height: 6px; border-radius: 50%; }
+
+/* ── Detail panel ── */
+.ag-detail { min-width: 0; }
+
+.ag-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.ag-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px; height: 28px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.ag-close:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
+
+.ag-detail-section {
+  padding: 14px 20px;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+}
+.ag-detail-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  margin-bottom: 8px;
+}
+.ag-detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.ag-detail-key { font-size: 10px; color: #8a8a86; }
+.ag-detail-val { font-size: 12px; font-weight: 500; color: var(--text-primary); margin-top: 1px; }
+
+.ag-detail-metrics {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+.ag-metric { text-align: center; }
+.ag-metric-val { font-size: 16px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
+.ag-metric-label { font-size: 10px; color: #8a8a86; margin-top: 2px; }
+
+/* ── Collection bar ── */
+.ag-coll-bar {
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(0,0,0,0.04);
+  overflow: hidden;
+}
+.ag-coll-fill {
+  height: 100%;
+  border-radius: 2px;
+  background: #01696f;
+  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Commission table ── */
+.ag-comm-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 8px;
+}
+.ag-comm-table th {
+  padding: 6px 0;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  text-align: left;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+}
+.ag-comm-table td {
+  padding: 7px 0;
+  border-bottom: 1px solid rgba(0,0,0,0.03);
+}
+.ag-comm-table tr:last-child td { border-bottom: none; }
+
+.ag-pct-input {
+  width: 60px;
+  padding: 4px 6px;
+  border-radius: 6px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+  transition: border-color 150ms ease;
+}
+.ag-pct-input:focus { border-color: #01696f; }
+
+.ag-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 5px;
+  border: none;
+  background: transparent;
+  font-size: 11px;
+  font-weight: 500;
+  color: #01696f;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+.ag-edit-btn:hover { background: rgba(1,105,111,0.06); }
+
+/* ── Agent actions ── */
+.ag-detail-actions {
+  display: flex;
+  gap: 6px;
+  padding: 14px 20px;
+  flex-wrap: wrap;
+}
+.ag-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border-radius: 7px;
+  border: 1px solid rgba(0,0,0,0.08);
+  background: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.ag-action-btn:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+.ag-action-warn { color: #c27b1a; border-color: rgba(194,123,26,0.15); }
+.ag-action-warn:hover { background: rgba(194,123,26,0.04); border-color: rgba(194,123,26,0.25); color: #c27b1a; }
+.ag-action-success { color: #0f7b5f; border-color: rgba(15,123,95,0.15); }
+.ag-action-success:hover { background: rgba(15,123,95,0.04); border-color: rgba(15,123,95,0.25); color: #0f7b5f; }
+
+/* ── Modal ── */
+.ag-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(0,0,0,0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  backdrop-filter: blur(2px);
+}
+.ag-modal {
+  width: 100%;
+  max-width: 480px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
+  overflow: hidden;
+}
+.ag-modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px 20px 0;
+}
+.ag-modal-head h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); }
+.ag-modal-body {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.ag-modal-foot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 20px 16px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+}
+
+/* ── Form elements ── */
+.ag-field { display: flex; flex-direction: column; gap: 4px; }
+.ag-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+}
+.ag-label-sm {
+  font-size: 10px;
+  font-weight: 500;
+  color: #8a8a86;
+}
+.ag-input {
+  padding: 7px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 13px;
+  color: var(--text-primary);
+  background: #fff;
+  outline: none;
+  transition: border-color 150ms ease;
+}
+.ag-input:focus { border-color: #01696f; }
+.ag-select {
+  padding: 7px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0,0,0,0.1);
+  font-size: 13px;
+  color: var(--text-primary);
+  background: #fff;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8a86' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 28px;
+  transition: border-color 150ms ease;
+}
+.ag-select:focus { border-color: #01696f; }
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .ag-detail-metrics { grid-template-columns: repeat(2, 1fr); }
+  .ag-kpi-strip { gap: 12px; }
+}
+</style>
diff --git a/app/pages/settings/alerts.vue b/app/pages/settings/alerts.vue
new file mode 100644
index 0000000..7d72bf3
--- /dev/null
+++ b/app/pages/settings/alerts.vue
@@ -0,0 +1,616 @@
+<script setup lang="ts">
+import type { AlertRecipient, CustomAlertRule } from '~/composables/useAlertConfig'
+
+definePageMeta({ ssr: false })
+usePageTitle('Alerts & Notifications · Settings')
+
+const { config, addThreshold, removeThreshold, addPaymentTier, removePaymentTier, addCustomRule, updateCustomRule, removeCustomRule } = useAlertConfig()
+const toast = useToast()
+
+// ── Recipient helpers ──────────────────────────────────────────────────────
+const RECIPIENT_OPTIONS: { id: AlertRecipient; label: string }[] = [
+  { id: 'handler', label: 'Handler' },
+  { id: 'manager', label: 'Manager' },
+  { id: 'customer', label: 'Customer' },
+  { id: 'custom', label: 'Custom email' },
+]
+
+function toggleRecipient(list: AlertRecipient[], r: AlertRecipient) {
+  const idx = list.indexOf(r)
+  if (idx === -1) list.push(r)
+  else list.splice(idx, 1)
+}
+
+// ── Threshold add ──────────────────────────────────────────────────────────
+const newRenewalDays = ref(7)
+const newCcDays = ref(7)
+
+function addRenewalThreshold() {
+  addThreshold('renewals', newRenewalDays.value)
+  newRenewalDays.value = 7
+}
+function addCcThreshold() {
+  addThreshold('creditCardExpiry', newCcDays.value)
+  newCcDays.value = 7
+}
+
+// ── Late payment tier add ──────────────────────────────────────────────────
+const newLpDays = ref(45)
+function addNewPaymentTier() {
+  addPaymentTier(newLpDays.value, 'Notify assigned handler', ['handler'])
+  newLpDays.value = 45
+}
+
+// ── Custom rule add ────────────────────────────────────────────────────────
+const FIELD_OPTIONS = [
+  { value: 'premium', label: 'Annual premium' },
+  { value: 'policy_count', label: 'Policy count' },
+  { value: 'days_to_renewal', label: 'Days to renewal' },
+  { value: 'days_overdue', label: 'Days overdue' },
+  { value: 'claim_count', label: 'Open claims' },
+  { value: 'reserve_amount', label: 'Reserve amount' },
+]
+const OPERATOR_OPTIONS = [
+  { value: 'gte', label: '≥' },
+  { value: 'lte', label: '≤' },
+  { value: 'eq', label: '=' },
+  { value: 'gt', label: '>' },
+  { value: 'lt', label: '<' },
+]
+
+const showNewRule = ref(false)
+const newRule = ref({ alertName: '', field: 'premium', operator: 'gte' as const, value: 0 })
+
+function submitNewRule() {
+  if (!newRule.value.alertName.trim()) return
+  addCustomRule({
+    alertName: newRule.value.alertName,
+    field: newRule.value.field,
+    operator: newRule.value.operator,
+    value: newRule.value.value,
+    recipients: ['handler'],
+    enabled: true,
+  })
+  newRule.value = { alertName: '', field: 'premium', operator: 'gte', value: 0 }
+  showNewRule.value = false
+}
+
+// ── Escalation dot color ───────────────────────────────────────────────────
+function tierDotClass(idx: number, total: number) {
+  if (total <= 1) return 'al-dot-green'
+  if (idx === total - 1) return 'al-dot-red'
+  if (idx >= total / 2) return 'al-dot-amber'
+  return 'al-dot-green'
+}
+
+function handleSave() {
+  toast.add({ title: 'Alert configuration saved', color: 'green' })
+}
+</script>
+
+<template>
+  <div class="al-page">
+    <!-- Header -->
+    <div class="al-header">
+      <div>
+        <NuxtLink to="/settings" class="al-back-link">
+          <UIcon name="i-heroicons-arrow-left" class="w-3.5 h-3.5" />
+          Settings
+        </NuxtLink>
+        <h1 class="al-title">Alerts & Notifications</h1>
+        <p class="al-subtitle">Configure automated email alerts for renewals, cancellations, late payments, and custom triggers.</p>
+      </div>
+      <button class="al-save-btn" @click="handleSave">
+        <UIcon name="i-heroicons-check" class="w-4 h-4" />
+        Save Changes
+      </button>
+    </div>
+
+    <!-- ═══════════ 1. EMAIL SENDER ═══════════ -->
+    <div class="al-card">
+      <div class="al-card-header">
+        <UIcon name="i-heroicons-envelope" class="w-5 h-5" />
+        <div>
+          <p class="al-card-title">Email Sender Configuration</p>
+          <p class="al-card-desc">All automated alerts are sent from this email address.</p>
+        </div>
+      </div>
+      <div class="al-field-grid">
+        <div>
+          <label class="al-label">Sender email</label>
+          <input v-model="config.emailSender.senderEmail" class="al-input-med" type="email" placeholder="alertas@miagencia.com" />
+        </div>
+        <div>
+          <label class="al-label">Display name</label>
+          <input v-model="config.emailSender.senderDisplayName" class="al-input-med" type="text" placeholder="Segur-OS Alertas" />
+        </div>
+        <div>
+          <label class="al-label">Reply-to email</label>
+          <input v-model="config.emailSender.replyToEmail" class="al-input-med" type="email" placeholder="soporte@miagencia.com" />
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══════════ 2. RENEWAL ALERTS ═══════════ -->
+    <div class="al-card">
+      <div class="al-card-header">
+        <UIcon name="i-heroicons-arrow-path" class="w-5 h-5" />
+        <div style="flex: 1;">
+          <p class="al-card-title">Renewal Alerts</p>
+          <p class="al-card-desc">Notify when policies approach their renewal date.</p>
+        </div>
+        <button
+          class="al-toggle"
+          :class="config.renewals.enabled ? 'al-toggle-on' : 'al-toggle-off'"
+          @click="config.renewals.enabled = !config.renewals.enabled"
+        >
+          <span class="al-toggle-dot" />
+        </button>
+      </div>
+      <template v-if="config.renewals.enabled">
+        <div class="al-table-wrap">
+          <table class="al-table">
+            <thead>
+              <tr>
+                <th>Days before expiry</th>
+                <th style="width: 80px;">Active</th>
+                <th style="width: 50px;"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="t in config.renewals.thresholds" :key="t.id">
+                <td>
+                  <div class="al-input-group">
+                    <input v-model.number="t.daysBefore" class="al-input-sm" type="number" min="1" />
+                    <span class="al-input-suffix">days</span>
+                  </div>
+                </td>
+                <td class="text-center">
+                  <button
+                    class="al-toggle"
+                    :class="t.enabled ? 'al-toggle-on' : 'al-toggle-off'"
+                    @click="t.enabled = !t.enabled"
+                  >
+                    <span class="al-toggle-dot" />
+                  </button>
+                </td>
+                <td class="text-center">
+                  <button class="al-remove-btn" @click="removeThreshold('renewals', t.id)">
+                    <UIcon name="i-heroicons-x-mark" class="w-3.5 h-3.5" />
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="al-add-row">
+          <input v-model.number="newRenewalDays" class="al-input-sm" type="number" min="1" />
+          <span class="al-input-suffix">days</span>
+          <button class="al-add-btn" @click="addRenewalThreshold">
+            <UIcon name="i-heroicons-plus" class="w-3.5 h-3.5" />
+            Add threshold
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- ═══════════ 3. CANCELLATION ALERTS ═══════════ -->
+    <div class="al-card">
+      <div class="al-card-header">
+        <UIcon name="i-heroicons-x-circle" class="w-5 h-5" />
+        <div style="flex: 1;">
+          <p class="al-card-title">Cancellation Alerts</p>
+          <p class="al-card-desc">Alert when a policy enters the cancellation process.</p>
+        </div>
+        <button
+          class="al-toggle"
+          :class="config.cancellations.enabled ? 'al-toggle-on' : 'al-toggle-off'"
+          @click="config.cancellations.enabled = !config.cancellations.enabled"
+        >
+          <span class="al-toggle-dot" />
+        </button>
+      </div>
+      <template v-if="config.cancellations.enabled">
+        <p class="al-label" style="margin-bottom: 10px;">Notify these recipients:</p>
+        <div class="al-checkbox-list">
+          <label v-for="r in RECIPIENT_OPTIONS" :key="r.id" class="al-checkbox-item">
+            <input
+              type="checkbox"
+              :checked="config.cancellations.recipients.includes(r.id)"
+              @change="toggleRecipient(config.cancellations.recipients, r.id)"
+            />
+            <span>{{ r.label }}</span>
+          </label>
+        </div>
+      </template>
+    </div>
+
+    <!-- ═══════════ 4. LATE PAYMENT ALERTS ═══════════ -->
+    <div class="al-card">
+      <div class="al-card-header">
+        <UIcon name="i-heroicons-clock" class="w-5 h-5" />
+        <div style="flex: 1;">
+          <p class="al-card-title">Late Payment Alerts</p>
+          <p class="al-card-desc">Escalating notifications based on days overdue.</p>
+        </div>
+        <button
+          class="al-toggle"
+          :class="config.latePayments.enabled ? 'al-toggle-on' : 'al-toggle-off'"
+          @click="config.latePayments.enabled = !config.latePayments.enabled"
+        >
+          <span class="al-toggle-dot" />
+        </button>
+      </div>
+      <template v-if="config.latePayments.enabled">
+        <div class="al-escalation-list">
+          <div v-for="(tier, idx) in config.latePayments.tiers" :key="tier.id" class="al-escalation-row">
+            <span class="al-escalation-dot" :class="tierDotClass(idx, config.latePayments.tiers.length)" />
+            <div class="al-escalation-content">
+              <div class="al-escalation-fields">
+                <div class="al-field-inline">
+                  <span class="al-label-sm">Days overdue</span>
+                  <input v-model.number="tier.daysOverdue" class="al-input-sm" type="number" min="1" />
+                </div>
+                <div class="al-field-inline" style="min-width: 220px;">
+                  <span class="al-label-sm">Action</span>
+                  <input v-model="tier.action" class="al-input-med" type="text" />
+                </div>
+                <div class="al-field-inline">
+                  <span class="al-label-sm">Notify</span>
+                  <div class="al-chip-row">
+                    <button
+                      v-for="r in RECIPIENT_OPTIONS"
+                      :key="r.id"
+                      class="al-chip"
+                      :class="tier.recipients.includes(r.id) ? 'al-chip-on' : 'al-chip-off'"
+                      @click="toggleRecipient(tier.recipients, r.id)"
+                    >{{ r.label }}</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <button class="al-remove-btn" @click="removePaymentTier(tier.id)">
+              <UIcon name="i-heroicons-x-mark" class="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+        <div class="al-add-row" style="margin-top: 12px;">
+          <input v-model.number="newLpDays" class="al-input-sm" type="number" min="1" />
+          <span class="al-input-suffix">days</span>
+          <button class="al-add-btn" @click="addNewPaymentTier">
+            <UIcon name="i-heroicons-plus" class="w-3.5 h-3.5" />
+            Add tier
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- ═══════════ 5. CREDIT CARD EXPIRY ═══════════ -->
+    <div class="al-card">
+      <div class="al-card-header">
+        <UIcon name="i-heroicons-credit-card" class="w-5 h-5" />
+        <div style="flex: 1;">
+          <p class="al-card-title">Credit Card Expiry Alerts</p>
+          <p class="al-card-desc">Notify customers before their payment card expires.</p>
+        </div>
+        <button
+          class="al-toggle"
+          :class="config.creditCardExpiry.enabled ? 'al-toggle-on' : 'al-toggle-off'"
+          @click="config.creditCardExpiry.enabled = !config.creditCardExpiry.enabled"
+        >
+          <span class="al-toggle-dot" />
+        </button>
+      </div>
+      <template v-if="config.creditCardExpiry.enabled">
+        <label class="al-checkbox-item" style="margin-bottom: 12px;">
+          <input
+            type="checkbox"
+            :checked="config.creditCardExpiry.autoDebitOnly"
+            @change="config.creditCardExpiry.autoDebitOnly = !config.creditCardExpiry.autoDebitOnly"
+          />
+          <span>Only for customers with auto-debit enabled</span>
+        </label>
+        <div class="al-table-wrap">
+          <table class="al-table">
+            <thead>
+              <tr>
+                <th>Days before expiry</th>
+                <th style="width: 80px;">Active</th>
+                <th style="width: 50px;"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="t in config.creditCardExpiry.thresholds" :key="t.id">
+                <td>
+                  <div class="al-input-group">
+                    <input v-model.number="t.daysBefore" class="al-input-sm" type="number" min="1" />
+                    <span class="al-input-suffix">days</span>
+                  </div>
+                </td>
+                <td class="text-center">
+                  <button
+                    class="al-toggle"
+                    :class="t.enabled ? 'al-toggle-on' : 'al-toggle-off'"
+                    @click="t.enabled = !t.enabled"
+                  >
+                    <span class="al-toggle-dot" />
+                  </button>
+                </td>
+                <td class="text-center">
+                  <button class="al-remove-btn" @click="removeThreshold('creditCardExpiry', t.id)">
+                    <UIcon name="i-heroicons-x-mark" class="w-3.5 h-3.5" />
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="al-add-row">
+          <input v-model.number="newCcDays" class="al-input-sm" type="number" min="1" />
+          <span class="al-input-suffix">days</span>
+          <button class="al-add-btn" @click="addCcThreshold">
+            <UIcon name="i-heroicons-plus" class="w-3.5 h-3.5" />
+            Add threshold
+          </button>
+        </div>
+      </template>
+    </div>
+
+    <!-- ═══════════ 6. CUSTOM ALERTS ═══════════ -->
+    <div class="al-card">
+      <div class="al-card-header">
+        <UIcon name="i-heroicons-adjustments-horizontal" class="w-5 h-5" />
+        <div>
+          <p class="al-card-title">Custom Parameter Alerts</p>
+          <p class="al-card-desc">Define custom rules that trigger alerts based on any field condition.</p>
+        </div>
+      </div>
+      <div class="al-table-wrap">
+        <table class="al-table">
+          <thead>
+            <tr>
+              <th>Alert name</th>
+              <th>Field</th>
+              <th>Operator</th>
+              <th>Value</th>
+              <th>Recipients</th>
+              <th style="width: 70px;">Active</th>
+              <th style="width: 50px;"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="rule in config.customRules" :key="rule.id">
+              <td>
+                <input v-model="rule.alertName" class="al-input-med" type="text" />
+              </td>
+              <td>
+                <select v-model="rule.field" class="al-select">
+                  <option v-for="f in FIELD_OPTIONS" :key="f.value" :value="f.value">{{ f.label }}</option>
+                </select>
+              </td>
+              <td>
+                <select v-model="rule.operator" class="al-select" style="width: 56px;">
+                  <option v-for="o in OPERATOR_OPTIONS" :key="o.value" :value="o.value">{{ o.label }}</option>
+                </select>
+              </td>
+              <td>
+                <input v-model.number="rule.value" class="al-input-sm" type="number" />
+              </td>
+              <td>
+                <div class="al-chip-row">
+                  <button
+                    v-for="r in RECIPIENT_OPTIONS"
+                    :key="r.id"
+                    class="al-chip al-chip-sm"
+                    :class="rule.recipients.includes(r.id) ? 'al-chip-on' : 'al-chip-off'"
+                    @click="toggleRecipient(rule.recipients, r.id)"
+                  >{{ r.label }}</button>
+                </div>
+              </td>
+              <td class="text-center">
+                <button
+                  class="al-toggle"
+                  :class="rule.enabled ? 'al-toggle-on' : 'al-toggle-off'"
+                  @click="rule.enabled = !rule.enabled"
+                >
+                  <span class="al-toggle-dot" />
+                </button>
+              </td>
+              <td class="text-center">
+                <button class="al-remove-btn" @click="removeCustomRule(rule.id)">
+                  <UIcon name="i-heroicons-trash" class="w-3.5 h-3.5" />
+                </button>
+              </td>
+            </tr>
+            <!-- Inline add row -->
+            <tr v-if="showNewRule" class="al-new-rule-row">
+              <td>
+                <input v-model="newRule.alertName" class="al-input-med" type="text" placeholder="Alert name…" />
+              </td>
+              <td>
+                <select v-model="newRule.field" class="al-select">
+                  <option v-for="f in FIELD_OPTIONS" :key="f.value" :value="f.value">{{ f.label }}</option>
+                </select>
+              </td>
+              <td>
+                <select v-model="newRule.operator" class="al-select" style="width: 56px;">
+                  <option v-for="o in OPERATOR_OPTIONS" :key="o.value" :value="o.value">{{ o.label }}</option>
+                </select>
+              </td>
+              <td>
+                <input v-model.number="newRule.value" class="al-input-med" type="number" placeholder="0" />
+              </td>
+              <td colspan="2">
+                <div style="display: flex; gap: 6px;">
+                  <button class="al-add-btn" @click="submitNewRule">Save</button>
+                  <button class="al-remove-btn" @click="showNewRule = false">Cancel</button>
+                </div>
+              </td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-if="!showNewRule" class="al-add-row">
+        <button class="al-add-btn" @click="showNewRule = true">
+          <UIcon name="i-heroicons-plus" class="w-3.5 h-3.5" />
+          Add custom rule
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* =====================================================================
+   ALERTS & NOTIFICATIONS SETTINGS — scoped, al- prefix
+   ===================================================================== */
+
+.al-page {
+  max-width: 64rem; margin: 0 auto;
+  display: flex; flex-direction: column; gap: 24px; padding-bottom: 48px;
+}
+
+/* ── Header ── */
+.al-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.al-back-link {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: 12px; font-weight: 500; color: #8a8a86;
+  text-decoration: none; margin-bottom: 8px; transition: color 150ms ease;
+}
+.al-back-link:hover { color: #01696f; }
+.al-title { font-size: 22px; font-weight: 700; color: #1a1a1a; }
+.al-subtitle { font-size: 13px; color: #8a8a86; margin-top: 4px; }
+.al-save-btn {
+  display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px;
+  border-radius: 10px; font-size: 13px; font-weight: 600;
+  background: #01696f; color: white; border: none; cursor: pointer;
+}
+.al-save-btn:hover { opacity: 0.9; }
+
+/* ── Card ── */
+.al-card {
+  background: #fff; border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+.al-card-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; color: #01696f; }
+.al-card-title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
+.al-card-desc { font-size: 12px; color: #8a8a86; margin-top: 2px; }
+
+/* ── Field grid ── */
+.al-field-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
+@media (max-width: 640px) { .al-field-grid { grid-template-columns: 1fr; } }
+
+/* ── Table ── */
+.al-table-wrap { overflow-x: auto; }
+.al-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.al-table thead th {
+  padding: 8px 12px; font-size: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  color: #8a8a86; border-bottom: 1px solid rgba(0,0,0,0.06);
+  text-align: left; white-space: nowrap;
+}
+.al-table tbody td {
+  padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,0.04);
+  vertical-align: middle;
+}
+.al-table tbody tr:last-child td { border-bottom: none; }
+
+/* ── Inputs ── */
+.al-input-sm {
+  width: 72px; padding: 5px 8px; border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 6px; font-size: 13px; text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.al-input-sm:focus { outline: none; border-color: #01696f; }
+.al-input-med {
+  width: 100%; padding: 5px 10px; border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 6px; font-size: 13px;
+}
+.al-input-med:focus { outline: none; border-color: #01696f; }
+.al-input-group { display: flex; align-items: center; gap: 6px; }
+.al-input-suffix { font-size: 12px; color: #8a8a86; }
+.al-label { display: block; font-size: 13px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
+.al-label-sm { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #8a8a86; margin-bottom: 2px; }
+
+/* ── Select ── */
+.al-select {
+  padding: 5px 8px; border: 1px solid rgba(0,0,0,0.1);
+  border-radius: 6px; font-size: 13px; background: #fff; cursor: pointer;
+}
+.al-select:focus { outline: none; border-color: #01696f; }
+
+/* ── Toggle ── */
+.al-toggle {
+  width: 36px; height: 20px; border-radius: 10px; border: none;
+  cursor: pointer; position: relative; transition: background 200ms ease;
+  padding: 0; flex-shrink: 0;
+}
+.al-toggle-on { background: #01696f; }
+.al-toggle-off { background: rgba(0,0,0,0.15); }
+.al-toggle-dot {
+  display: block; width: 16px; height: 16px; border-radius: 50%;
+  background: white; position: absolute; top: 2px;
+  transition: left 200ms ease;
+}
+.al-toggle-on .al-toggle-dot { left: 18px; }
+.al-toggle-off .al-toggle-dot { left: 2px; }
+
+/* ── Checkbox ── */
+.al-checkbox-list { display: flex; flex-direction: column; gap: 8px; }
+.al-checkbox-item {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 13px; color: #1a1a1a; cursor: pointer;
+}
+.al-checkbox-item input[type="checkbox"] { accent-color: #01696f; width: 15px; height: 15px; }
+
+/* ── Escalation ── */
+.al-escalation-list { display: flex; flex-direction: column; gap: 16px; }
+.al-escalation-row { display: flex; align-items: flex-start; gap: 12px; }
+.al-escalation-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
+.al-dot-green { background: #059669; }
+.al-dot-amber { background: #c27b1a; }
+.al-dot-red { background: #c13838; }
+.al-escalation-content { flex: 1; }
+.al-escalation-fields { display: flex; gap: 12px; flex-wrap: wrap; }
+.al-field-inline { display: flex; flex-direction: column; flex: 1; min-width: 100px; }
+
+/* ── Chips ── */
+.al-chip-row { display: flex; gap: 4px; flex-wrap: wrap; }
+.al-chip {
+  padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
+  border: 1px solid transparent; cursor: pointer; transition: all 150ms ease;
+  white-space: nowrap;
+}
+.al-chip-sm { padding: 2px 6px; font-size: 10px; }
+.al-chip-on { background: rgba(1,105,111,0.08); color: #01696f; border-color: rgba(1,105,111,0.2); }
+.al-chip-off { background: rgba(0,0,0,0.03); color: #8a8a86; border-color: rgba(0,0,0,0.06); }
+.al-chip-off:hover { color: #1a1a1a; background: rgba(0,0,0,0.06); }
+
+/* ── Add row ── */
+.al-add-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
+.al-add-btn {
+  display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px;
+  border-radius: 8px; font-size: 12px; font-weight: 600;
+  background: rgba(1,105,111,0.06); color: #01696f;
+  border: 1px solid rgba(1,105,111,0.15); cursor: pointer;
+}
+.al-add-btn:hover { background: rgba(1,105,111,0.12); }
+
+/* ── Remove button ── */
+.al-remove-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 6px;
+  background: transparent; border: none; color: #8a8a86;
+  cursor: pointer; transition: all 150ms ease;
+}
+.al-remove-btn:hover { background: rgba(193,56,56,0.06); color: #c13838; }
+
+/* ── New rule row ── */
+.al-new-rule-row td { background: rgba(1,105,111,0.02); }
+
+/* ── Responsive ── */
+@media (max-width: 640px) {
+  .al-escalation-fields { flex-direction: column; }
+}
+</style>
diff --git a/app/pages/settings/appearance.vue b/app/pages/settings/appearance.vue
new file mode 100644
index 0000000..a8bdc38
--- /dev/null
+++ b/app/pages/settings/appearance.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+await navigateTo('/account', { replace: true })
+</script>
+
+<template>
+  <div class="p-8 text-sm text-[var(--text-muted)]">Redirecting…</div>
+</template>
diff --git a/app/pages/settings/customer-attention.vue b/app/pages/settings/customer-attention.vue
new file mode 100644
index 0000000..f0ff7c5
--- /dev/null
+++ b/app/pages/settings/customer-attention.vue
@@ -0,0 +1,369 @@
+<script setup lang="ts">
+import { useCustomerAttention } from '~/composables/useCustomerAttention'
+import { MOCK_CUSTOMERS, fmtMoney } from '~/data/mock-customers'
+import { customerTier } from '~/data/mock-customers'
+
+definePageMeta({ ssr: false })
+usePageTitle('Customer Attention · Settings')
+
+const { config, tiers, rules, getScoreForCustomer, getTierForCustomer } = useCustomerAttention()
+
+/* ── Tabs ── */
+type Tab = 'tiers' | 'rules' | 'preview'
+const activeTab = ref<Tab>('tiers')
+const tabItems: { id: Tab; label: string }[] = [
+  { id: 'tiers', label: 'Service Tiers' },
+  { id: 'rules', label: 'Classification Rules' },
+  { id: 'preview', label: 'Preview' },
+]
+
+/* ── Operator labels ── */
+const operatorLabel: Record<string, string> = {
+  gte: '>=',
+  gt: '>',
+  lte: '<=',
+  lt: '<',
+  eq: '=',
+}
+
+/* ── Field labels ── */
+const fieldLabel: Record<string, string> = {
+  premium: 'Annual Premium',
+  policy_count: 'Policy Count',
+  commission: 'Annual Commission',
+  collectivo_member: 'Collectivo Member',
+  multi_line: 'Unique Lines',
+  tenure_years: 'Tenure (years)',
+  has_private_policies: 'Has Private Policies',
+}
+
+/* ── Preview data ── */
+const currentYear = new Date().getFullYear()
+
+const previewRows = computed(() =>
+  MOCK_CUSTOMERS.map((c) => {
+    const activePolicies = c.policies.filter(p => p.status === 'Active' || p.status === 'Pending')
+    const totalPremium = activePolicies.reduce((sum, p) => sum + p.premium, 0)
+    const policyCount = activePolicies.length
+    const lineCount = new Set(activePolicies.map(p => p.line)).size
+    const sinceYear = c.since ? new Date(c.since).getFullYear() : currentYear
+    const tenureYears = currentYear - sinceYear
+    const estimatedCommission = Math.round(totalPremium * 0.15)
+
+    const input = {
+      totalPremium,
+      policyCount,
+      lineCount,
+      tenureYears,
+      isCollectivoMember: false,
+      hasPrivatePolicies: activePolicies.length > 0,
+      estimatedCommission,
+    }
+
+    return {
+      id: c.id,
+      name: c.name,
+      totalPremium,
+      policyCount,
+      lineCount,
+      tenureYears,
+      score: getScoreForCustomer(input),
+      tier: getTierForCustomer(input),
+    }
+  }).sort((a, b) => b.score - a.score)
+)
+
+function formatRuleValue(rule: { field: string; value: number | boolean }): string {
+  if (typeof rule.value === 'boolean') return rule.value ? 'Yes' : 'No'
+  if (rule.field === 'premium' || rule.field === 'commission') return fmtMoney(rule.value)
+  return String(rule.value)
+}
+</script>
+
+<template>
+  <div class="ca-page">
+    <!-- Back -->
+    <NuxtLink to="/settings" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Settings</UButton>
+    </NuxtLink>
+
+    <!-- Header -->
+    <div class="max-w-xl">
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Customer Attention &amp; Service Levels</h1>
+      <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Define service tiers and scoring rules to automatically classify customers by value and engagement.
+      </p>
+    </div>
+
+    <!-- Dev note -->
+    <div class="ca-dev-note">
+      <UIcon name="i-heroicons-beaker" style="width: 16px; height: 16px; flex-shrink: 0;" />
+      <div>
+        <p class="ca-dev-note-title">In development</p>
+        <p class="ca-dev-note-text">
+          This feature uses local configuration only. Once the API is ready, tiers and rules will be persisted server-side and apply across the organization.
+        </p>
+      </div>
+    </div>
+
+    <!-- Tabs -->
+    <div class="ca-filter-tabs">
+      <button
+        v-for="t in tabItems"
+        :key="t.id"
+        type="button"
+        class="ca-filter-tab"
+        :class="activeTab === t.id ? 'ca-filter-on' : 'ca-filter-off'"
+        @click="activeTab = t.id"
+      >
+        {{ t.label }}
+      </button>
+    </div>
+
+    <!-- ═══════════════ Service Tiers ═══════════════ -->
+    <div v-if="activeTab === 'tiers'" class="ca-section-list">
+      <div v-for="tier in tiers" :key="tier.id" class="ca-card">
+        <div class="ca-card-top">
+          <div class="ca-tier-icon" :style="{ background: tier.color + '14', color: tier.color }">
+            <UIcon :name="tier.icon" style="width: 20px; height: 20px;" />
+          </div>
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2 flex-wrap">
+              <p class="text-[14px] font-semibold text-[var(--text-primary)]">{{ tier.name }}</p>
+              <span class="ca-score-badge" :style="{ background: tier.color + '14', color: tier.color }">
+                {{ tier.minScore }}+ pts
+              </span>
+            </div>
+            <p class="mt-0.5 text-[12px] text-[var(--text-muted)]">{{ tier.description }}</p>
+          </div>
+          <div class="ca-card-actions">
+            <button type="button" class="ca-action-btn" title="Edit">
+              <UIcon name="i-heroicons-pencil-square" style="width: 14px; height: 14px;" />
+            </button>
+            <button type="button" class="ca-action-btn ca-action-delete" title="Delete">
+              <UIcon name="i-heroicons-trash" style="width: 14px; height: 14px;" />
+            </button>
+          </div>
+        </div>
+        <div class="ca-benefits">
+          <p class="ca-label">Benefits</p>
+          <div class="ca-benefit-list">
+            <span v-for="b in tier.benefits" :key="b" class="ca-benefit-tag">{{ b }}</span>
+          </div>
+        </div>
+      </div>
+
+      <button type="button" class="ca-btn-primary" style="align-self: flex-start;">
+        <UIcon name="i-heroicons-plus" style="width: 14px; height: 14px;" />
+        Add Tier
+      </button>
+    </div>
+
+    <!-- ═══════════════ Classification Rules ═══════════════ -->
+    <div v-if="activeTab === 'rules'" class="ca-section-list">
+      <!-- Auto-classify toggle -->
+      <div class="ca-card" style="flex-direction: row; align-items: center; justify-content: space-between;">
+        <div>
+          <p class="text-[13px] font-semibold text-[var(--text-primary)]">Auto-classify customers</p>
+          <p class="text-[12px] text-[var(--text-muted)] mt-0.5">Automatically assign tiers based on scoring rules</p>
+        </div>
+        <button
+          type="button"
+          class="ca-toggle"
+          :class="config.autoClassify ? 'ca-toggle-on' : 'ca-toggle-off'"
+          @click="config.autoClassify = !config.autoClassify"
+        >
+          <span class="ca-toggle-dot" :class="config.autoClassify ? 'ca-dot-on' : 'ca-dot-off'" />
+        </button>
+      </div>
+
+      <!-- Rules list -->
+      <div v-for="rule in rules" :key="rule.id" class="ca-rule-row">
+        <div class="ca-rule-field">{{ fieldLabel[rule.field] ?? rule.field }}</div>
+        <span class="ca-rule-op">{{ operatorLabel[rule.operator] ?? rule.operator }}</span>
+        <span class="ca-rule-value">{{ formatRuleValue(rule) }}</span>
+        <span class="ca-rule-arrow">&#8594;</span>
+        <span class="ca-rule-points">+{{ rule.points }} pts</span>
+        <span class="ca-rule-label">{{ rule.label }}</span>
+      </div>
+
+      <button type="button" class="ca-btn-primary" style="align-self: flex-start;">
+        <UIcon name="i-heroicons-plus" style="width: 14px; height: 14px;" />
+        Add Rule
+      </button>
+    </div>
+
+    <!-- ═══════════════ Preview ═══════════════ -->
+    <div v-if="activeTab === 'preview'" class="ca-section-list">
+      <div class="ca-table-wrap">
+        <table class="ca-table">
+          <thead>
+            <tr>
+              <th>Customer</th>
+              <th>Premium</th>
+              <th>Policies</th>
+              <th>Lines</th>
+              <th>Tenure</th>
+              <th>Score</th>
+              <th>Tier</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in previewRows" :key="row.id">
+              <td class="ca-cell-name">{{ row.name }}</td>
+              <td>{{ row.totalPremium > 0 ? fmtMoney(row.totalPremium) : '—' }}</td>
+              <td>{{ row.policyCount }}</td>
+              <td>{{ row.lineCount }}</td>
+              <td>{{ row.tenureYears }}yr</td>
+              <td class="ca-cell-score">{{ row.score }}</td>
+              <td>
+                <span
+                  class="ca-tier-badge"
+                  :style="{ background: row.tier.color + '14', color: row.tier.color }"
+                >
+                  {{ row.tier.name }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p class="text-[11px] text-[var(--text-muted)]">
+        Showing {{ previewRows.length }} mock customers. Scores computed from current rules.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ca-page {
+  max-width: 48rem; margin: 0 auto;
+  display: flex; flex-direction: column; gap: 20px; padding-bottom: 3rem;
+}
+
+/* ── Dev note ── */
+.ca-dev-note {
+  display: flex; align-items: flex-start; gap: 10px;
+  padding: 14px 16px; border-radius: 12px;
+  background: rgba(124, 58, 237, 0.06); border: 1px solid rgba(124, 58, 237, 0.12);
+  color: #6d28d9;
+}
+.ca-dev-note-title { font-size: 13px; font-weight: 600; }
+.ca-dev-note-text { font-size: 12px; margin-top: 2px; line-height: 1.5; opacity: 0.85; }
+
+/* ── Tabs ── */
+.ca-filter-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,0.04); }
+.ca-filter-tab {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 6px 14px; border-radius: 8px;
+  font-size: 12px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.ca-filter-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.ca-filter-off { background: transparent; color: var(--text-muted); }
+.ca-filter-off:hover { color: var(--text-primary); }
+
+/* ── Section list ── */
+.ca-section-list { display: flex; flex-direction: column; gap: 10px; }
+
+/* ── Cards ── */
+.ca-card {
+  display: flex; flex-direction: column; gap: 12px;
+  padding: 16px; border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  transition: all 150ms ease;
+}
+.ca-card:hover { border-color: rgba(1,105,111,0.15); }
+.ca-card-top { display: flex; align-items: center; gap: 12px; }
+.ca-tier-icon {
+  width: 40px; height: 40px; border-radius: 12px;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.ca-score-badge {
+  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; white-space: nowrap;
+}
+.ca-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 150ms ease; flex-shrink: 0; }
+.ca-card:hover .ca-card-actions { opacity: 1; }
+.ca-action-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 6px; border: none; cursor: pointer;
+  background: rgba(0,0,0,0.03); color: #8a8a86; transition: all 150ms ease;
+}
+.ca-action-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
+.ca-action-delete:hover { background: rgba(193,56,56,0.08); color: #c13838; }
+
+/* ── Benefits ── */
+.ca-benefits { padding-left: 52px; }
+.ca-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86; margin-bottom: 6px; }
+.ca-benefit-list { display: flex; flex-wrap: wrap; gap: 5px; }
+.ca-benefit-tag {
+  font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 6px;
+  background: rgba(0,0,0,0.035); color: var(--text-muted); white-space: nowrap;
+}
+
+/* ── Buttons ── */
+.ca-btn-primary {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px; border-radius: 8px;
+  background: #01696f; color: #fff;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.ca-btn-primary:hover { background: #015458; }
+
+/* ── Toggle ── */
+.ca-toggle {
+  width: 36px; height: 20px; border-radius: 10px; border: none;
+  cursor: pointer; position: relative; transition: background 150ms ease; flex-shrink: 0;
+}
+.ca-toggle-on { background: #01696f; }
+.ca-toggle-off { background: rgba(0,0,0,0.12); }
+.ca-toggle-dot {
+  display: block; width: 16px; height: 16px; border-radius: 8px;
+  background: #fff; position: absolute; top: 2px; transition: left 150ms ease;
+}
+.ca-dot-on { left: 18px; }
+.ca-dot-off { left: 2px; }
+
+/* ── Rule rows ── */
+.ca-rule-row {
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+  padding: 12px 16px; border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  font-size: 13px;
+}
+.ca-rule-field { font-weight: 600; color: var(--text-primary); min-width: 120px; }
+.ca-rule-op { font-size: 12px; font-weight: 600; color: #8a8a86; font-family: monospace; }
+.ca-rule-value { font-weight: 600; color: var(--text-primary); }
+.ca-rule-arrow { color: #8a8a86; font-size: 14px; }
+.ca-rule-points {
+  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px;
+  background: rgba(1,105,111,0.08); color: #01696f; white-space: nowrap;
+}
+.ca-rule-label { font-size: 11px; color: var(--text-muted); margin-left: auto; }
+
+/* ── Preview table ── */
+.ca-table-wrap {
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03); overflow: auto;
+}
+.ca-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.ca-table th {
+  text-align: left; padding: 10px 14px;
+  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
+  color: #8a8a86; border-bottom: 1px solid rgba(0,0,0,0.06); white-space: nowrap;
+}
+.ca-table td {
+  padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,0.04);
+  color: var(--text-primary); white-space: nowrap;
+}
+.ca-table tbody tr:last-child td { border-bottom: none; }
+.ca-table tbody tr:hover { background: rgba(0,0,0,0.015); }
+.ca-cell-name { font-weight: 600; white-space: normal; min-width: 160px; }
+.ca-cell-score { font-weight: 700; font-variant-numeric: tabular-nums; }
+.ca-tier-badge {
+  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 9999px; white-space: nowrap;
+}
+</style>
diff --git a/app/pages/settings/forms/index.vue b/app/pages/settings/forms/index.vue
new file mode 100644
index 0000000..fb01255
--- /dev/null
+++ b/app/pages/settings/forms/index.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { refDebounced } from '~/utils/refDebounced'
+import type { FormCatalogRow } from '~/types/form-catalog'
+import { productLineLabel, useFormsCatalog } from '~/composables/useFormsCatalog'
+
+usePageTitle('Forms library · Settings')
+
+const { rows, version, insurerItems, subRamoItems } = useFormsCatalog()
+
+const pageSize = ref(10)
+const page = ref(1)
+const search = ref('')
+const debouncedSearch = refDebounced(search, 250)
+
+const pageSizeItems = [
+  { label: '10', value: 10 },
+  { label: '25', value: 25 },
+  { label: '50', value: 50 }
+]
+
+function rowSearchText(r: FormCatalogRow): string {
+  return [
+    String(r.id),
+    r.description,
+    ...r.insurerSlugs,
+    r.subRamoLabel,
+    r.subRamoKey,
+    r.fileLabel
+  ]
+    .join(' ')
+    .toLowerCase()
+}
+
+const filtered = computed(() => {
+  const q = debouncedSearch.value.trim().toLowerCase()
+  if (!q) return rows.value
+  return rows.value.filter((r) => rowSearchText(r).includes(q))
+})
+
+watch([debouncedSearch, pageSize], () => {
+  page.value = 1
+})
+
+const total = computed(() => filtered.value.length)
+const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+
+watch(pageCount, (c) => {
+  if (page.value > c) page.value = c
+})
+
+const pageRows = computed(() => {
+  const start = (page.value - 1) * pageSize.value
+  return filtered.value.slice(start, start + pageSize.value)
+})
+
+const rangeLabel = computed(() => {
+  if (total.value === 0) return 'No records'
+  const start = (page.value - 1) * pageSize.value + 1
+  const end = Math.min(page.value * pageSize.value, total.value)
+  return `Showing ${start} to ${end} of ${total.value} records`
+})
+
+function goPrev() {
+  page.value = Math.max(1, page.value - 1)
+}
+
+function goNext() {
+  page.value = Math.min(pageCount.value, page.value + 1)
+}
+
+function personLabel(pk: FormCatalogRow['personKinds']) {
+  if (pk === 'both') return 'Natural · Jurídica'
+  return pk === 'natural' ? 'Natural' : 'Jurídica'
+}
+
+function exportCsv() {
+  const headers = [
+    'ID',
+    'Description',
+    'Insurers',
+    'Sub-ramo',
+    'Person type',
+    'Product line',
+    'File',
+    'Badge'
+  ]
+  const lines = [headers.join(',')]
+  for (const r of filtered.value) {
+    const cells = [
+      r.id,
+      `"${r.description.replace(/"/g, '""')}"`,
+      `"${r.insurerSlugs.join('; ')}"`,
+      `"${r.subRamoLabel.replace(/"/g, '""')}"`,
+      r.personKinds,
+      r.productLine ?? '',
+      `"${r.fileLabel.replace(/"/g, '""')}"`,
+      r.badge ?? ''
+    ]
+    lines.push(cells.join(','))
+  }
+  const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `forms-catalog-v${version.value}-${new Date().toISOString().slice(0, 10)}.csv`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-[95rem] space-y-6 pb-12">
+      <div class="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
+        <AppBackToHome />
+        <span class="text-[var(--text-muted)] opacity-50" aria-hidden="true">|</span>
+        <NuxtLink to="/settings" class="font-medium text-[var(--text-muted)] transition hover:text-[var(--text-primary)]">
+          All settings
+        </NuxtLink>
+      </div>
+
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Forms library</h1>
+        <p class="mt-2 max-w-3xl text-[14px] leading-relaxed text-[var(--text-muted)]">
+          Master catalog: each row maps carriers, sub-ramos, person type, and product line (local vs international
+          health, auto full coverage vs DAT, etc.) to a template file. The
+          <NuxtLink to="/onboarding/solicitud" class="app-link">Solicitud</NuxtLink>
+          flow filters this list for customers.
+        </p>
+        <p class="mt-1 text-xs text-[var(--text-muted)]">Catalog version: {{ version }} · {{ rows.length }} rows</p>
+      </div>
+
+      <UAlert
+        color="info"
+        variant="soft"
+        title="Backend wiring next"
+        description="Upload, OCR metadata, and mapping to open-fetch / APIs will plug in here once storage and services are ready."
+      />
+
+      <div class="flex flex-wrap items-center justify-between gap-4">
+        <div class="flex flex-wrap items-center gap-3">
+          <span class="text-sm text-[var(--text-muted)]">Show</span>
+          <USelect v-model="pageSize" :items="pageSizeItems" class="w-24" size="sm" />
+          <span class="text-sm text-[var(--text-muted)]">records</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="text-sm text-[var(--text-muted)]">Search:</span>
+          <UInput
+            v-model="search"
+            icon="i-heroicons-magnifying-glass"
+            placeholder="ID, insurer, sub-ramo, file…"
+            class="w-72 max-w-full"
+            size="sm"
+          />
+        </div>
+      </div>
+
+      <div class="overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--surface)] shadow-sm">
+        <div class="overflow-x-auto">
+          <table class="min-w-full border-collapse text-sm">
+            <thead>
+              <tr
+                class="border-b border-[var(--card-border)] bg-[var(--surface)]/90 text-left text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]"
+              >
+                <th class="whitespace-nowrap px-3 py-3">ID</th>
+                <th class="min-w-[12rem] px-3 py-3">Description</th>
+                <th class="min-w-[8rem] px-3 py-3">Carrier(s)</th>
+                <th class="min-w-[10rem] px-3 py-3">Sub-ramo</th>
+                <th class="whitespace-nowrap px-3 py-3">Person type</th>
+                <th class="min-w-[8rem] px-3 py-3">Product line</th>
+                <th class="min-w-[12rem] px-3 py-3">File</th>
+                <th class="whitespace-nowrap px-3 py-3">Badge</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="row in pageRows"
+                :key="row.id"
+                class="border-b border-[var(--divider)] transition-colors hover:bg-[var(--surface)]/80"
+              >
+                <td class="whitespace-nowrap px-3 py-3 font-mono text-[var(--text-primary)]">{{ row.id }}</td>
+                <td class="max-w-xs px-3 py-3 text-[var(--text-primary)]">{{ row.description }}</td>
+                <td class="px-3 py-3">
+                  <div class="flex flex-wrap gap-1">
+                    <UBadge v-for="s in row.insurerSlugs" :key="s" color="neutral" variant="soft" size="xs">
+                      {{ s }}
+                    </UBadge>
+                  </div>
+                </td>
+                <td class="px-3 py-3 text-[var(--text-primary)]">{{ row.subRamoLabel }}</td>
+                <td class="whitespace-nowrap px-3 py-3">{{ personLabel(row.personKinds) }}</td>
+                <td class="px-3 py-3 text-[var(--text-muted)]">{{ productLineLabel(row.productLine) }}</td>
+                <td class="px-3 py-3">
+                  <a
+                    :href="row.fileUrl"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="break-all text-[var(--brand)] underline hover:text-[var(--brand)]"
+                  >
+                    {{ row.fileLabel }}
+                  </a>
+                </td>
+                <td class="px-3 py-3 text-center">
+                  <UBadge v-if="row.badge != null" color="primary" variant="soft">{{ row.badge }}</UBadge>
+                  <span v-else class="text-[var(--text-muted)] opacity-50">—</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="flex flex-wrap items-center justify-between gap-3 border-t border-[var(--card-border)] px-4 py-3"
+        >
+          <p class="text-sm text-[var(--text-muted)]">{{ rangeLabel }}</p>
+          <div class="flex items-center gap-1">
+            <UButton
+              icon="i-heroicons-chevron-left"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :disabled="page <= 1"
+              @click="goPrev"
+            />
+            <span
+              class="inline-flex min-w-[2.25rem] items-center justify-center rounded-md bg-primary-500 px-2 py-1 text-sm font-medium text-white"
+            >
+              {{ page }}
+            </span>
+            <UButton
+              icon="i-heroicons-chevron-right"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :disabled="page >= pageCount"
+              @click="goNext"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <UButton
+          icon="i-heroicons-arrow-up-tray"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="exportCsv"
+        >
+          Export CSV
+        </UButton>
+        <NuxtLink to="/onboarding/solicitud">
+          <UButton color="primary" variant="soft" size="sm">Open solicitud preview</UButton>
+        </NuxtLink>
+      </div>
+  </div>
+</template>
diff --git a/app/pages/settings/index.vue b/app/pages/settings/index.vue
new file mode 100644
index 0000000..ac441a7
--- /dev/null
+++ b/app/pages/settings/index.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+usePageTitle('Settings')
+
+const { isSuperAdmin } = useSuperAdmin()
+const sidebarFeatures = useSidebarFeatures()
+
+const cards = computed(() => {
+  const base: { to: string; title: string; description: string; icon: string }[] = []
+
+  if (isSuperAdmin.value) {
+    base.push({
+      to: '/settings/organization',
+      title: 'Organization',
+      description: 'Company legal name, logo in the chrome, and PDF report headers — tenant-wide (superadmin only).',
+      icon: 'i-heroicons-building-library'
+    })
+  }
+
+  base.push(
+    {
+      to: '/settings/agents',
+      title: 'Agents & commissions',
+      description: 'Manage producer credentials, commission schedules, and cashflow-based compensation.',
+      icon: 'i-heroicons-user-group'
+    },
+    {
+      to: '/settings/referral-channels',
+      title: 'Referral channels',
+      description: 'Manage referral sources — people, companies, digital campaigns, events, and partnerships that generate leads.',
+      icon: 'i-heroicons-link'
+    },
+    {
+      to: '/settings/providers',
+      title: 'Providers & carriers',
+      description: 'Carrier directory, templates, and status.',
+      icon: 'i-heroicons-building-office-2'
+    },
+    {
+      to: '/settings/permissions',
+      title: 'Permissions',
+      description: 'Roles and SEGUROS permission matrix (seed data until API).',
+      icon: 'i-heroicons-shield-check'
+    },
+    {
+      to: '/settings/forms',
+      title: 'Forms library',
+      description: 'Master catalog of carrier PDFs and routing metadata.',
+      icon: 'i-heroicons-document-duplicate'
+    },
+    {
+      to: '/settings/quote-requests',
+      title: 'Quote requests',
+      description: 'Toggle whether quote flows describe outbound emails to carrier quoting addresses.',
+      icon: 'i-heroicons-envelope'
+    },
+    {
+      to: '/settings/customer-attention',
+      title: 'Customer Attention',
+      description: 'Service tiers and scoring rules to auto-classify customers by value and engagement.',
+      icon: 'i-heroicons-star'
+    },
+    {
+      to: '/settings/profile-layouts',
+      title: 'Profile Layouts',
+      description: 'Configure which customer profile sections appear and in what order based on your role.',
+      icon: 'i-heroicons-rectangle-group'
+    },
+    {
+      to: '/settings/alerts',
+      title: 'Alerts & Notifications',
+      description: 'Configure automated email alerts for renewals, cancellations, late payments, and custom triggers.',
+      icon: 'i-heroicons-bell-alert'
+    },
+    {
+      to: '/settings/support-routing',
+      title: 'Support Routing',
+      description: 'Configure 3-tier routing rules for incoming support requests — auto-routing, keyword classification, and open pool settings.',
+      icon: 'i-heroicons-arrow-path-rounded-square'
+    }
+  )
+
+  return base
+})
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl space-y-8">
+    <div>
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Software configuration</h1>
+      <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Carriers, forms, permissions, and tenant organization (superadmin). Your personal theme and profile live under
+        <NuxtLink to="/account" class="font-medium text-[var(--brand)] underline-offset-2 hover:underline">Account</NuxtLink>.
+      </p>
+    </div>
+
+    <UAlert
+      v-if="!isSuperAdmin"
+      color="neutral"
+      variant="soft"
+      title="Organization settings are restricted"
+      description="Company logo and legal name are changed by a tenant superadmin. In development, superadmin UI defaults on unless localStorage policy-ui.superadmin is set to 0."
+    />
+
+    <div class="grid gap-4 sm:grid-cols-2">
+      <NuxtLink
+        v-for="c in cards"
+        :key="c.to"
+        :to="c.to"
+        class="app-card app-card-interactive group p-5"
+      >
+        <div class="flex items-start gap-4">
+          <div class="inline-flex rounded-lg bg-[var(--brand-soft)] p-2 text-[var(--brand)] ring-1 ring-[var(--brand)]/10">
+            <UIcon :name="c.icon" class="h-6 w-6" />
+          </div>
+          <div>
+            <p class="font-semibold text-[var(--text-primary)] group-hover:text-[var(--brand)]">{{ c.title }}</p>
+            <p class="mt-1 text-sm text-[var(--text-muted)]">{{ c.description }}</p>
+          </div>
+        </div>
+      </NuxtLink>
+    </div>
+
+    <!-- Sidebar modules -->
+    <div>
+      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Sidebar modules</h2>
+      <p class="mt-1 text-[13px] text-[var(--text-muted)]">Show or hide optional sections in the navigation sidebar.</p>
+      <div class="mt-4 flex flex-col gap-3">
+        <label class="app-card flex flex-col gap-3 p-4">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <UIcon name="i-heroicons-inbox-stack" class="h-5 w-5 text-[var(--text-muted)]" />
+              <div>
+                <p class="text-[14px] font-medium text-[var(--text-primary)]">Workstations</p>
+                <p class="text-[12px] text-[var(--text-muted)]">Specialized task queues for collectivos, claims, renewals, collections, and billing.</p>
+              </div>
+            </div>
+            <USwitch :model-value="sidebarFeatures.showWorkstations" @update:model-value="sidebarFeatures.showWorkstations = $event" />
+          </div>
+          <div class="flex items-center gap-2 pl-8 text-[11px] text-[var(--text-muted)]">
+            <UIcon name="i-heroicons-eye" style="width: 12px; height: 12px;" />
+            <span>Adds: Collectivos, Facturacion, Claims Queue, Renewals Queue, Collections Queue</span>
+          </div>
+        </label>
+        <label class="app-card flex flex-col gap-3 p-4">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <UIcon name="i-heroicons-sparkles" class="h-5 w-5 text-[var(--text-muted)]" />
+              <div>
+                <p class="text-[14px] font-medium text-[var(--text-primary)]">AI Tools</p>
+                <p class="text-[12px] text-[var(--text-muted)]">AI-powered assistants for sales, policy comparison, email drafting, and case support.</p>
+              </div>
+            </div>
+            <USwitch :model-value="sidebarFeatures.showAiTools" @update:model-value="sidebarFeatures.showAiTools = $event" />
+          </div>
+          <div class="flex items-center gap-2 pl-8 text-[11px] text-[var(--text-muted)]">
+            <UIcon name="i-heroicons-eye" style="width: 12px; height: 12px;" />
+            <span>Adds: Sales Factory, Policy Advisor, Email Writer, Case Support</span>
+          </div>
+        </label>
+        <label class="app-card flex flex-col gap-3 p-4">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <UIcon name="i-heroicons-signal" class="h-5 w-5 text-[var(--text-muted)]" />
+              <div>
+                <p class="text-[14px] font-medium text-[var(--text-primary)]">Leads Hub</p>
+                <p class="text-[12px] text-[var(--text-muted)]">Centralized lead management with API integrations for Google, Facebook, Instagram, and custom campaigns.</p>
+              </div>
+            </div>
+            <USwitch :model-value="sidebarFeatures.showLeadsHub" @update:model-value="sidebarFeatures.showLeadsHub = $event" />
+          </div>
+          <div class="flex items-center gap-2 pl-8 text-[11px] text-[var(--text-muted)]">
+            <UIcon name="i-heroicons-eye" style="width: 12px; height: 12px;" />
+            <span>Adds: Leads Hub under Customer Service sidebar group</span>
+          </div>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/settings/organization.vue b/app/pages/settings/organization.vue
new file mode 100644
index 0000000..59eb32e
--- /dev/null
+++ b/app/pages/settings/organization.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { MAX_LOGO_FILE_BYTES } from '~/types/branding'
+import type { BrokerageBrandingState } from '~/types/branding'
+
+definePageMeta({ ssr: false })
+
+usePageTitle('Organization · Settings')
+
+const { isSuperAdmin } = useSuperAdmin()
+const toast = useToast()
+const { saved, defaultBrokerageBranding } = useBrokerageBranding()
+const draft = ref<BrokerageBrandingState>(defaultBrokerageBranding())
+const fileInputRef = ref<HTMLInputElement | null>(null)
+
+function syncDraftFromSaved() {
+  const s = saved.value
+  draft.value = {
+    companyName: s.companyName,
+    logoDataUrl: s.logoDataUrl,
+    logoFileName: s.logoFileName,
+    reportPageHeader: s.reportPageHeader,
+    reportPageFooter: s.reportPageFooter
+  }
+}
+
+onMounted(() => syncDraftFromSaved())
+watch(saved, () => syncDraftFromSaved(), { deep: true })
+
+function pickFile() {
+  fileInputRef.value?.click()
+}
+
+function onLogoFile(e: Event) {
+  const input = e.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+  if (!file.type.startsWith('image/')) {
+    toast.add({ title: 'Choose an image file', color: 'error' })
+    return
+  }
+  if (file.size > MAX_LOGO_FILE_BYTES) {
+    toast.add({
+      title: 'Image too large',
+      description: `Use a file under ${Math.round(MAX_LOGO_FILE_BYTES / 1024)} KB.`,
+      color: 'error'
+    })
+    return
+  }
+  const reader = new FileReader()
+  reader.onload = () => {
+    draft.value.logoDataUrl = reader.result as string
+    draft.value.logoFileName = file.name
+  }
+  reader.onerror = () => {
+    toast.add({ title: 'Could not read file', color: 'error' })
+  }
+  reader.readAsDataURL(file)
+}
+
+function clearLogo() {
+  draft.value.logoDataUrl = null
+  draft.value.logoFileName = ''
+}
+
+function save() {
+  saved.value = { ...draft.value }
+  toast.add({
+    title: 'Organization saved',
+    description: 'Sidebar and home use this brokerage identity for all users.',
+    color: 'success'
+  })
+}
+
+function cancel() {
+  syncDraftFromSaved()
+  toast.add({ title: 'Changes discarded', color: 'neutral' })
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-3xl space-y-8">
+    <div class="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
+      <AppBackToHome />
+      <span class="text-[var(--text-muted)] opacity-50" aria-hidden="true">|</span>
+      <NuxtLink to="/settings" class="font-medium text-[var(--text-muted)] transition hover:text-[var(--text-primary)]">
+        All settings
+      </NuxtLink>
+    </div>
+
+    <UAlert
+      v-if="!isSuperAdmin"
+      color="warning"
+      variant="soft"
+      title="Tenant administrators only"
+      description="Company name, logo, and report headers are managed here for the whole organization. Ask a superadmin to update them or to grant you access."
+    />
+
+    <template v-else>
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Organization</h1>
+        <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
+          Brokerage legal name and logo in the app chrome; report header and footer for PDFs and exports. This applies to
+          the whole tenant — not personal account settings.
+        </p>
+      </div>
+
+      <UCard class="overflow-hidden border-[var(--sidebar-border)] bg-[var(--surface)] ring-1 ring-black/5">
+        <div class="border-b border-[var(--sidebar-border)] bg-[var(--page-bg)] px-5 py-3 text-sm text-[var(--text-primary)]">
+          General / General
+        </div>
+        <div class="space-y-6 p-5">
+          <UFormField label="Company legal name" class="w-full">
+            <UInput
+              v-model="draft.companyName"
+              placeholder="Brokerage legal name as registered"
+              class="w-full"
+            />
+          </UFormField>
+          <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
+            <div class="min-w-0 flex-1 space-y-2">
+              <p class="text-sm font-medium text-[var(--text-primary)]">Company logo (sidebar & home)</p>
+              <input ref="fileInputRef" type="file" accept="image/*" class="sr-only" @change="onLogoFile" />
+              <div class="flex flex-wrap items-center gap-2">
+                <UButton color="primary" size="sm" @click="pickFile">Browse…</UButton>
+                <UButton v-if="draft.logoDataUrl" color="neutral" variant="ghost" size="sm" @click="clearLogo">
+                  Remove logo
+                </UButton>
+              </div>
+              <p v-if="draft.logoFileName" class="text-xs text-[var(--text-muted)]">Current file: {{ draft.logoFileName }}</p>
+              <p class="text-xs text-[var(--text-muted)]">Transparent PNGs work best with the sidebar chrome treatment.</p>
+            </div>
+            <div
+              class="app-logo-chrome flex h-28 min-w-[200px] shrink-0 items-center justify-center rounded-lg border border-dashed border-[var(--sidebar-border)] px-4 py-3"
+            >
+              <img
+                v-if="draft.logoDataUrl"
+                :src="draft.logoDataUrl"
+                :alt="draft.companyName || 'Brokerage logo'"
+                class="max-h-24 max-w-full object-contain"
+              />
+              <span v-else class="text-center text-xs text-[var(--text-muted)]">Logo preview</span>
+            </div>
+          </div>
+        </div>
+      </UCard>
+
+      <UCard class="overflow-hidden border-[var(--sidebar-border)] bg-[var(--surface)] ring-1 ring-black/5">
+        <div class="border-b border-[var(--sidebar-border)] bg-[var(--page-bg)] px-5 py-3 text-sm text-[var(--text-primary)]">
+          Reports / Reportes
+        </div>
+        <div class="space-y-4 p-5">
+          <UFormField label="Page header (PDFs)" class="w-full">
+            <UTextarea
+              v-model="draft.reportPageHeader"
+              :rows="4"
+              placeholder="Address, phone, RUC — top of generated reports."
+              class="w-full font-mono text-sm"
+            />
+          </UFormField>
+          <UFormField label="Page footer (PDFs)" class="w-full">
+            <UTextarea
+              v-model="draft.reportPageFooter"
+              :rows="4"
+              placeholder="Legal disclaimer, validity, contact — footer for PDFs."
+              class="w-full font-mono text-sm"
+            />
+          </UFormField>
+        </div>
+      </UCard>
+
+      <div class="flex flex-wrap gap-3">
+        <UButton color="neutral" variant="soft" @click="cancel">Cancel</UButton>
+        <UButton color="primary" icon="i-heroicons-check" @click="save">Save</UButton>
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/app/pages/settings/permissions.vue b/app/pages/settings/permissions.vue
new file mode 100644
index 0000000..5218b40
--- /dev/null
+++ b/app/pages/settings/permissions.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { refDebounced } from '~/utils/refDebounced'
+import { ROLES_SEGUROS_SEED, SEGUROS_PERMISSION_COLUMNS } from '~/data/roles-seguros'
+import type { RoleRow } from '~/types/roles'
+
+usePageTitle('Permissions · Settings')
+
+const pageSize = ref(10)
+const page = ref(1)
+const search = ref('')
+const debouncedSearch = refDebounced(search, 250)
+
+const pageSizeItems = [
+  { label: '10', value: 10 },
+  { label: '25', value: 25 },
+  { label: '50', value: 50 }
+]
+
+const rows = ref<RoleRow[]>([...ROLES_SEGUROS_SEED])
+
+const filtered = computed(() => {
+  const q = debouncedSearch.value.trim().toLowerCase()
+  if (!q) return rows.value
+  return rows.value.filter(
+    (r) => String(r.id).includes(q) || r.description.toLowerCase().includes(q)
+  )
+})
+
+watch([debouncedSearch, pageSize], () => {
+  page.value = 1
+})
+
+const total = computed(() => filtered.value.length)
+const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+
+watch(pageCount, (c) => {
+  if (page.value > c) page.value = c
+})
+
+const pageRows = computed(() => {
+  const start = (page.value - 1) * pageSize.value
+  return filtered.value.slice(start, start + pageSize.value)
+})
+
+const rangeLabel = computed(() => {
+  if (total.value === 0) return 'Sin registros'
+  const start = (page.value - 1) * pageSize.value + 1
+  const end = Math.min(page.value * pageSize.value, total.value)
+  return `Mostrando ${start} a ${end} de ${total.value} registros`
+})
+
+function goPrev() {
+  page.value = Math.max(1, page.value - 1)
+}
+
+function goNext() {
+  page.value = Math.min(pageCount.value, page.value + 1)
+}
+
+function exportCsv() {
+  const headers = [
+    'ID',
+    'Description',
+    'Status',
+    ...SEGUROS_PERMISSION_COLUMNS.map((c) => `SEGUROS_${c.key}`)
+  ]
+  const lines = [headers.join(',')]
+  for (const r of filtered.value) {
+    const cells = [
+      r.id,
+      `"${r.description.replace(/"/g, '""')}"`,
+      r.active ? 'Active' : 'Inactive',
+      ...SEGUROS_PERMISSION_COLUMNS.map((c) => (r.seguros[c.key] ? '1' : '0'))
+    ]
+    lines.push(cells.join(','))
+  }
+  const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `roles-seguros-${new Date().toISOString().slice(0, 10)}.csv`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 p-8">
+    <div class="mx-auto max-w-[90rem] space-y-6">
+      <div class="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
+        <AppBackToHome />
+        <span class="text-[var(--text-muted)] opacity-50" aria-hidden="true">|</span>
+        <NuxtLink to="/settings" class="font-medium text-[var(--text-muted)] transition hover:text-[var(--text-primary)]">
+          All settings
+        </NuxtLink>
+      </div>
+
+      <div>
+        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Roles &amp; permissions</h1>
+        <p class="mt-2 max-w-3xl leading-relaxed text-gray-600">
+          Reference layout for the <strong class="font-medium text-[var(--text-primary)]">SEGUROS</strong> group: each role can
+          grant seven feature columns. Data is static until your API is connected.
+        </p>
+      </div>
+
+      <div class="flex flex-wrap items-center justify-between gap-4">
+        <div class="flex flex-wrap items-center gap-3">
+          <span class="text-sm text-[var(--text-muted)]">Mostrar</span>
+          <USelect v-model="pageSize" :items="pageSizeItems" class="w-24" size="sm" />
+          <span class="text-sm text-[var(--text-muted)]">registros</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="text-sm text-[var(--text-muted)]">Buscar:</span>
+          <UInput
+            v-model="search"
+            icon="i-heroicons-magnifying-glass"
+            placeholder="ID o descripción"
+            class="w-64 max-w-full"
+            size="sm"
+          />
+        </div>
+      </div>
+
+      <UCard :ui="{ body: { padding: 'p-0 sm:p-0' } }">
+        <div class="overflow-x-auto">
+          <table class="min-w-full border-collapse text-sm">
+            <thead>
+              <tr
+                class="border-b border-[var(--card-border)] bg-[var(--surface)]/90 text-left text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]"
+              >
+                <th class="whitespace-nowrap px-4 py-3">ID</th>
+                <th class="whitespace-nowrap px-4 py-3">Descripción</th>
+                <th class="whitespace-nowrap px-4 py-3">Estado</th>
+                <th
+                  class="border-l border-[var(--card-border)] bg-[var(--badge-muted-bg)]/80 px-2 py-2 text-center"
+                  :colspan="SEGUROS_PERMISSION_COLUMNS.length"
+                >
+                  SEGUROS
+                </th>
+              </tr>
+              <tr class="border-b border-[var(--card-border)] bg-[var(--surface)] text-[var(--text-muted)]">
+                <th class="px-4 py-0" colspan="3" />
+                <th
+                  v-for="col in SEGUROS_PERMISSION_COLUMNS"
+                  :key="col.key"
+                  class="border-l border-[var(--divider)] px-1 py-2 first:border-l-slate-200"
+                >
+                  <div class="flex justify-center" :title="col.label">
+                    <UIcon :name="col.icon" class="h-5 w-5" />
+                  </div>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="row in pageRows"
+                :key="row.id"
+                class="border-b border-[var(--divider)] transition-colors hover:bg-[var(--surface)]/80"
+              >
+                <td class="whitespace-nowrap px-4 py-3 font-mono text-[var(--text-primary)]">{{ row.id }}</td>
+                <td class="max-w-xs px-4 py-3 font-medium text-[var(--text-primary)]">{{ row.description }}</td>
+                <td class="whitespace-nowrap px-4 py-3">
+                  <UBadge v-if="row.active" color="success" variant="subtle" class="inline-flex items-center gap-1">
+                    <UIcon name="i-heroicons-check" class="h-3.5 w-3.5" />
+                    Activo
+                  </UBadge>
+                  <UBadge v-else color="neutral" variant="subtle">Inactivo</UBadge>
+                </td>
+                <td
+                  v-for="col in SEGUROS_PERMISSION_COLUMNS"
+                  :key="`${row.id}-${col.key}`"
+                  class="border-l border-[var(--divider)] px-2 py-3 text-center first:border-l-slate-200"
+                >
+                  <span
+                    v-if="row.seguros[col.key]"
+                    class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-[var(--badge-muted-bg)] text-base font-semibold text-[var(--text-primary)]"
+                    :title="`${col.label} — granted`"
+                    aria-label="Permission granted"
+                  >
+                    ×
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div
+          class="flex flex-wrap items-center justify-between gap-3 border-t border-[var(--card-border)] px-4 py-3"
+        >
+          <p class="text-sm text-[var(--text-muted)]">{{ rangeLabel }}</p>
+          <div class="flex items-center gap-1">
+            <UButton
+              icon="i-heroicons-chevron-left"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :disabled="page <= 1"
+              aria-label="Previous page"
+              @click="goPrev"
+            />
+            <span
+              class="inline-flex min-w-[2.25rem] items-center justify-center rounded-md bg-primary-500 px-2 py-1 text-sm font-medium text-white"
+            >
+              {{ page }}
+            </span>
+            <UButton
+              icon="i-heroicons-chevron-right"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :disabled="page >= pageCount"
+              aria-label="Next page"
+              @click="goNext"
+            />
+          </div>
+        </div>
+      </UCard>
+
+      <div class="flex flex-wrap items-center gap-2">
+        <UButton
+          icon="i-heroicons-arrow-up-tray"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="exportCsv"
+        >
+          Export
+        </UButton>
+        <span class="text-xs text-[var(--text-muted)]">Downloads CSV for filtered rows (browser only).</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/settings/personalization.vue b/app/pages/settings/personalization.vue
new file mode 100644
index 0000000..a305103
--- /dev/null
+++ b/app/pages/settings/personalization.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+await navigateTo('/settings/organization', { replace: true })
+</script>
+
+<template>
+  <div class="p-8 text-sm text-[var(--text-muted)]">Redirecting…</div>
+</template>
diff --git a/app/pages/settings/profile-layouts.vue b/app/pages/settings/profile-layouts.vue
new file mode 100644
index 0000000..3e8107b
--- /dev/null
+++ b/app/pages/settings/profile-layouts.vue
@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import { useProfileLayouts } from '~/composables/useProfileLayouts'
+import type { ProfileLayout } from '~/composables/useProfileLayouts'
+
+definePageMeta({ ssr: false })
+usePageTitle('Profile Layouts · Settings')
+
+const {
+  layouts,
+  activeLayoutId,
+  activeLayout,
+  sortedSections,
+  setActiveLayout,
+  updateLayout,
+  removeCustomLayout,
+  resetToDefaults,
+} = useProfileLayouts()
+
+/* ── Built-in vs custom ── */
+const builtInLayouts = computed(() => layouts.value.filter(l => !l.isCustom))
+const customLayouts = computed(() => layouts.value.filter(l => l.isCustom))
+
+/* ── Toggle section visibility ── */
+function toggleSectionVisibility(sectionId: string) {
+  const updated = activeLayout.value.sections.map(s =>
+    s.id === sectionId ? { ...s, visible: !s.visible } : s
+  )
+  updateLayout(activeLayout.value.id, { sections: updated })
+}
+
+/* ── Move section up/down ── */
+function moveSection(sectionId: string, direction: 'up' | 'down') {
+  const sections = [...activeLayout.value.sections].sort((a, b) => a.order - b.order)
+  const idx = sections.findIndex(s => s.id === sectionId)
+  if (idx < 0) return
+  const swapIdx = direction === 'up' ? idx - 1 : idx + 1
+  if (swapIdx < 0 || swapIdx >= sections.length) return
+
+  const tempOrder = sections[idx].order
+  sections[idx] = { ...sections[idx], order: sections[swapIdx].order }
+  sections[swapIdx] = { ...sections[swapIdx], order: tempOrder }
+
+  updateLayout(activeLayout.value.id, { sections })
+}
+
+/* ── Ordered sections for display ── */
+const orderedSections = computed(() =>
+  [...activeLayout.value.sections].sort((a, b) => a.order - b.order)
+)
+
+/* ── Delete custom layout ── */
+function handleDelete(id: string) {
+  removeCustomLayout(id)
+}
+</script>
+
+<template>
+  <div class="pl-page">
+    <!-- Back -->
+    <NuxtLink to="/settings" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Settings</UButton>
+    </NuxtLink>
+
+    <!-- Header -->
+    <div class="max-w-xl">
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Profile Layouts</h1>
+      <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Configure which sections appear and in what order based on your role.
+      </p>
+    </div>
+
+    <!-- Dev note -->
+    <div class="pl-dev-note">
+      <UIcon name="i-heroicons-beaker" style="width: 16px; height: 16px; flex-shrink: 0;" />
+      <div>
+        <p class="pl-dev-note-title">In development</p>
+        <p class="pl-dev-note-text">
+          Layout preferences are stored locally. Once the API is ready, layouts will sync across devices and can be assigned organization-wide by role.
+        </p>
+      </div>
+    </div>
+
+    <!-- ═══════════════ Active Layout Selector ═══════════════ -->
+    <section>
+      <p class="pl-label">Active layout</p>
+      <div class="pl-layout-grid">
+        <button
+          v-for="layout in builtInLayouts"
+          :key="layout.id"
+          type="button"
+          class="pl-layout-card"
+          :class="activeLayoutId === layout.id ? 'pl-layout-active' : 'pl-layout-inactive'"
+          @click="setActiveLayout(layout.id)"
+        >
+          <div class="pl-layout-card-inner">
+            <div class="pl-layout-icon" :class="activeLayoutId === layout.id ? 'pl-icon-active' : 'pl-icon-inactive'">
+              <UIcon :name="layout.icon" style="width: 20px; height: 20px;" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2">
+                <p class="pl-layout-name">{{ layout.name }}</p>
+                <UIcon
+                  v-if="activeLayoutId === layout.id"
+                  name="i-heroicons-check-circle-solid"
+                  class="pl-check-icon"
+                />
+              </div>
+              <p class="pl-layout-desc">{{ layout.description }}</p>
+            </div>
+          </div>
+        </button>
+      </div>
+    </section>
+
+    <!-- ═══════════════ Section Order ═══════════════ -->
+    <section>
+      <p class="pl-label">Section order &middot; {{ activeLayout.name }}</p>
+      <p class="pl-sublabel">Reorder sections and toggle visibility for the active layout.</p>
+      <div class="pl-section-list">
+        <div
+          v-for="(section, idx) in orderedSections"
+          :key="section.id"
+          class="pl-section-row"
+          :class="{ 'pl-section-hidden': !section.visible }"
+        >
+          <div class="pl-drag-handle" title="Drag to reorder (coming soon)">
+            <UIcon name="i-heroicons-bars-3" style="width: 16px; height: 16px;" />
+          </div>
+
+          <span class="pl-section-order">{{ idx + 1 }}</span>
+
+          <span class="pl-section-label" :class="{ 'pl-section-label-hidden': !section.visible }">
+            {{ section.label }}
+          </span>
+
+          <div class="pl-section-spacer" />
+
+          <div class="pl-section-arrows">
+            <button
+              type="button"
+              class="pl-arrow-btn"
+              :disabled="idx === 0"
+              title="Move up"
+              @click="moveSection(section.id, 'up')"
+            >
+              <UIcon name="i-heroicons-chevron-up" style="width: 14px; height: 14px;" />
+            </button>
+            <button
+              type="button"
+              class="pl-arrow-btn"
+              :disabled="idx === orderedSections.length - 1"
+              title="Move down"
+              @click="moveSection(section.id, 'down')"
+            >
+              <UIcon name="i-heroicons-chevron-down" style="width: 14px; height: 14px;" />
+            </button>
+          </div>
+
+          <button
+            type="button"
+            class="pl-toggle"
+            :class="section.visible ? 'pl-toggle-on' : 'pl-toggle-off'"
+            :title="section.visible ? 'Hide section' : 'Show section'"
+            @click="toggleSectionVisibility(section.id)"
+          >
+            <span class="pl-toggle-dot" :class="section.visible ? 'pl-dot-on' : 'pl-dot-off'" />
+          </button>
+        </div>
+      </div>
+
+      <p class="pl-hint">Default tab: <strong>{{ activeLayout.defaultTab }}</strong></p>
+    </section>
+
+    <!-- ═══════════════ Custom Layouts ═══════════════ -->
+    <section>
+      <p class="pl-label">Custom layouts</p>
+      <p class="pl-sublabel">Create personalized layouts beyond the built-in role presets.</p>
+
+      <div v-if="customLayouts.length" class="pl-section-list">
+        <div
+          v-for="layout in customLayouts"
+          :key="layout.id"
+          class="pl-custom-row"
+        >
+          <div class="pl-layout-icon pl-icon-inactive" style="width: 32px; height: 32px;">
+            <UIcon :name="layout.icon" style="width: 16px; height: 16px;" />
+          </div>
+          <div class="min-w-0 flex-1">
+            <p class="text-[13px] font-semibold text-[var(--text-primary)]">{{ layout.name }}</p>
+            <p class="text-[11px] text-[var(--text-muted)]">{{ layout.description }}</p>
+          </div>
+          <button
+            type="button"
+            class="pl-action-btn"
+            title="Use this layout"
+            @click="setActiveLayout(layout.id)"
+          >
+            <UIcon name="i-heroicons-check" style="width: 14px; height: 14px;" />
+          </button>
+          <button
+            type="button"
+            class="pl-action-btn pl-action-delete"
+            title="Delete custom layout"
+            @click="handleDelete(layout.id)"
+          >
+            <UIcon name="i-heroicons-trash" style="width: 14px; height: 14px;" />
+          </button>
+        </div>
+      </div>
+
+      <div v-else class="pl-empty">
+        <p>No custom layouts yet.</p>
+      </div>
+
+      <button type="button" class="pl-btn-primary" style="margin-top: 12px;" disabled>
+        <UIcon name="i-heroicons-plus" style="width: 16px; height: 16px;" />
+        Create Custom Layout
+      </button>
+      <p class="pl-hint" style="margin-top: 6px;">Custom layout creation coming soon.</p>
+    </section>
+
+    <!-- Reset -->
+    <section class="pl-reset-section">
+      <button type="button" class="pl-btn-ghost" @click="resetToDefaults">
+        <UIcon name="i-heroicons-arrow-uturn-left" style="width: 14px; height: 14px;" />
+        Reset all layouts to defaults
+      </button>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+/* ── Page shell ── */
+.pl-page {
+  max-width: 56rem;
+  margin: 0 auto;
+  display: flex; flex-direction: column; gap: 28px;
+}
+
+/* ── Dev note ── */
+.pl-dev-note {
+  display: flex; gap: 10px; align-items: flex-start;
+  padding: 12px 16px; border-radius: 10px;
+  background: rgba(124, 58, 237, 0.06); color: #7c3aed;
+}
+.pl-dev-note-title { font-size: 12px; font-weight: 700; }
+.pl-dev-note-text  { font-size: 12px; line-height: 1.5; opacity: 0.85; }
+
+/* ── Labels ── */
+.pl-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86; margin-bottom: 10px;
+}
+.pl-sublabel {
+  font-size: 13px; color: var(--text-muted); margin-top: -4px; margin-bottom: 12px;
+}
+.pl-hint {
+  font-size: 12px; color: var(--text-muted); margin-top: 8px;
+}
+
+/* ── Layout selector grid ── */
+.pl-layout-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
+}
+.pl-layout-card {
+  border-radius: 12px; padding: 14px; cursor: pointer;
+  border: 1.5px solid transparent; background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  transition: all 150ms ease; text-align: left;
+}
+.pl-layout-inactive {
+  border-color: rgba(0,0,0,0.06);
+}
+.pl-layout-inactive:hover {
+  border-color: rgba(0,0,0,0.12);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
+}
+.pl-layout-active {
+  border-color: #01696f;
+  box-shadow: 0 0 0 1px #01696f, 0 2px 8px rgba(1,105,111,0.10);
+}
+.pl-layout-card-inner {
+  display: flex; align-items: flex-start; gap: 10px;
+}
+.pl-layout-icon {
+  width: 40px; height: 40px; border-radius: 10px;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.pl-icon-active  { background: rgba(1,105,111,0.10); color: #01696f; }
+.pl-icon-inactive { background: rgba(0,0,0,0.04); color: #8a8a86; }
+.pl-layout-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.pl-layout-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
+.pl-check-icon  { width: 16px; height: 16px; color: #01696f; flex-shrink: 0; }
+
+/* ── Section list ── */
+.pl-section-list {
+  display: flex; flex-direction: column; gap: 6px;
+}
+.pl-section-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px; border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  transition: background 150ms ease;
+}
+.pl-section-row:hover { background: rgba(0,0,0,0.01); }
+.pl-section-hidden { opacity: 0.5; }
+
+.pl-drag-handle {
+  color: #c4c4c0; cursor: grab; display: flex; align-items: center;
+}
+.pl-section-order {
+  font-size: 11px; font-weight: 700; color: #8a8a86;
+  width: 20px; text-align: center; font-variant-numeric: tabular-nums;
+}
+.pl-section-label { font-size: 13px; font-weight: 500; color: var(--text-primary); }
+.pl-section-label-hidden { text-decoration: line-through; color: var(--text-muted); }
+.pl-section-spacer { flex: 1; }
+
+/* ── Arrows ── */
+.pl-section-arrows { display: flex; flex-direction: column; gap: 1px; }
+.pl-arrow-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 18px; border-radius: 4px; border: none; cursor: pointer;
+  background: transparent; color: #8a8a86; transition: all 120ms ease;
+}
+.pl-arrow-btn:hover:not(:disabled) { background: rgba(0,0,0,0.06); color: var(--text-primary); }
+.pl-arrow-btn:disabled { opacity: 0.25; cursor: not-allowed; }
+
+/* ── Toggle ── */
+.pl-toggle {
+  width: 36px; height: 20px; border-radius: 10px; border: none;
+  cursor: pointer; position: relative; transition: background 150ms ease; flex-shrink: 0;
+}
+.pl-toggle-on  { background: #01696f; }
+.pl-toggle-off { background: rgba(0,0,0,0.12); }
+.pl-toggle-dot {
+  display: block; width: 16px; height: 16px; border-radius: 8px;
+  background: #fff; position: absolute; top: 2px; transition: left 150ms ease;
+}
+.pl-dot-on  { left: 18px; }
+.pl-dot-off { left: 2px; }
+
+/* ── Custom layout rows ── */
+.pl-custom-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px; border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+.pl-action-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 6px; border: none; cursor: pointer;
+  background: rgba(0,0,0,0.03); color: #8a8a86; transition: all 150ms ease;
+}
+.pl-action-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
+.pl-action-delete:hover { background: rgba(193,56,56,0.08); color: #c13838; }
+
+/* ── Empty state ── */
+.pl-empty {
+  padding: 20px; border-radius: 10px; text-align: center;
+  border: 1px dashed rgba(0,0,0,0.10); color: var(--text-muted);
+  font-size: 13px;
+}
+
+/* ── Buttons ── */
+.pl-btn-primary {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px; border-radius: 8px;
+  background: #01696f; color: #fff;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.pl-btn-primary:hover:not(:disabled) { background: #015458; }
+.pl-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.pl-btn-ghost {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 6px 12px; border-radius: 6px;
+  background: transparent; color: var(--text-muted);
+  font-size: 12px; font-weight: 500; border: 1px solid rgba(0,0,0,0.08);
+  cursor: pointer; transition: all 150ms ease;
+}
+.pl-btn-ghost:hover { background: rgba(0,0,0,0.03); color: var(--text-primary); }
+
+/* ── Reset section ── */
+.pl-reset-section {
+  padding-top: 8px;
+  border-top: 1px solid rgba(0,0,0,0.06);
+}
+</style>
diff --git a/app/pages/settings/providers.vue b/app/pages/settings/providers.vue
new file mode 100644
index 0000000..9b6b343
--- /dev/null
+++ b/app/pages/settings/providers.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+usePageTitle('Providers · Settings')
+
+const bullets = [
+  'Create and maintain carrier legal identity, contacts, and RUC for reporting.',
+  'Upload solicitation PDF templates per policy type — fields are discovered after upload.',
+  'Activate or pause a carrier when you pause quoting or renew credential rotation.'
+] as const
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl space-y-8">
+    <div>
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">
+        Providers &amp; carriers
+      </h1>
+      <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Operational directory for insurance carriers. This is the same provider list used across quotes,
+        onboarding, and policy book — configure templates and status per carrier from detail pages.
+      </p>
+    </div>
+
+    <UAlert
+      color="primary"
+      variant="soft"
+      icon="i-heroicons-information-circle"
+      title="Brokerage-wide carrier setup"
+      description="Provider records are shared across the workspace. Changes here affect new business, renewals, and form routing."
+    />
+
+    <div class="grid gap-4 sm:grid-cols-2">
+      <NuxtLink
+        to="/providers"
+        class="group rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-5 shadow-sm ring-1 ring-[var(--card-border)]/40 transition hover:border-[var(--brand)]/30 hover:shadow-md"
+      >
+        <div class="flex items-start gap-3">
+          <div class="inline-flex rounded-lg bg-[var(--brand-faint)] p-2 text-[var(--brand)] ring-1 ring-[var(--brand)]/10">
+            <UIcon name="i-heroicons-building-office-2" class="h-6 w-6" />
+          </div>
+          <div>
+            <p class="font-semibold text-[var(--text-primary)] group-hover:text-[var(--brand)]">Browse providers</p>
+            <p class="mt-1 text-sm text-[var(--text-muted)]">Search, filter, and open a carrier profile.</p>
+          </div>
+        </div>
+      </NuxtLink>
+      <NuxtLink
+        to="/providers/new"
+        class="group rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-5 shadow-sm ring-1 ring-[var(--card-border)]/40 transition hover:border-[var(--brand)]/30 hover:shadow-md"
+      >
+        <div class="flex items-start gap-3">
+          <div class="inline-flex rounded-lg bg-emerald-50 p-2 text-emerald-700 ring-1 ring-emerald-100/80">
+            <UIcon name="i-heroicons-plus-circle" class="h-6 w-6" />
+          </div>
+          <div>
+            <p class="font-semibold text-[var(--text-primary)] group-hover:text-[var(--brand)]">New provider</p>
+            <p class="mt-1 text-sm text-[var(--text-muted)]">Add a carrier before attaching templates or quotes.</p>
+          </div>
+        </div>
+      </NuxtLink>
+    </div>
+
+    <div class="rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-6 shadow-sm ring-1 ring-[var(--card-border)]/40">
+      <h2 class="text-sm font-semibold text-[var(--text-primary)]">What you configure per carrier</h2>
+      <ul class="mt-4 list-inside list-disc space-y-2 text-sm text-[var(--text-muted)]">
+        <li v-for="(b, i) in bullets" :key="i">{{ b }}</li>
+      </ul>
+      <p class="mt-4 text-sm text-[var(--text-muted)]">
+        Open any provider from the list to manage templates, credentials, and activity — the detail view is
+        the operational control surface.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/settings/quote-requests.vue b/app/pages/settings/quote-requests.vue
new file mode 100644
index 0000000..9eae3b4
--- /dev/null
+++ b/app/pages/settings/quote-requests.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+usePageTitle('Quote requests · Settings')
+
+const { quoteRequestEmailEnabled, setQuoteRequestEmailEnabled } = useQuoteRequestEmailEnabled()
+</script>
+
+<template>
+  <div class="mx-auto max-w-3xl space-y-8">
+    <div class="flex flex-wrap items-center gap-x-3 gap-y-2 text-sm">
+      <NuxtLink
+        to="/settings"
+        class="font-medium text-[var(--text-muted)] transition hover:text-[var(--text-primary)]"
+      >
+        ← All settings
+      </NuxtLink>
+    </div>
+
+    <div>
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Quote requests</h1>
+      <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Control whether the app <strong>describes</strong> outbound emails to carrier quoting addresses (Settings →
+        Providers). Turn off when your tenant already gets rates from published tables, direct APIs, or agentic / AI
+        quoting — so users aren’t prompted to “email” carriers unnecessarily.
+      </p>
+    </div>
+
+    <UCard class="border-[var(--sidebar-border)] bg-[var(--surface)] ring-1 ring-black/5">
+      <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <p class="font-semibold text-[var(--text-primary)]">Provider quote emails</p>
+          <p class="mt-1 text-sm text-[var(--text-muted)]">
+            When enabled, auto and health quote flows explain that requests can be emailed to providers. When disabled,
+            runs are saved in-app for manual pricing, rate tables, or future automation — without implying email dispatch.
+          </p>
+        </div>
+        <UToggle :model-value="quoteRequestEmailEnabled" @update:model-value="setQuoteRequestEmailEnabled" />
+      </div>
+    </UCard>
+
+    <UAlert color="neutral" variant="soft" title="Note" description="This is a UI and workflow toggle for the mock app. Production would enforce the same rule with server-side job dispatch and audit logging." />
+  </div>
+</template>
diff --git a/app/pages/settings/referral-channels.vue b/app/pages/settings/referral-channels.vue
new file mode 100644
index 0000000..94da974
--- /dev/null
+++ b/app/pages/settings/referral-channels.vue
@@ -0,0 +1,431 @@
+<script setup lang="ts">
+import { useReferralChannels, type ReferralChannel } from '~/composables/useReferralChannels'
+
+usePageTitle('Referral Channels · Settings')
+
+const { channels, addChannel, updateChannel, removeChannel } = useReferralChannels()
+const toast = useToast()
+
+/* ── Form state ── */
+const formOpen = ref(false)
+const editingId = ref<string | null>(null)
+
+const fname = ref('')
+const ftype = ref<ReferralChannel['type']>('person')
+const fcontactName = ref('')
+const fcontactPhone = ref('')
+const fcontactEmail = ref('')
+const fnote = ref('')
+const factive = ref(true)
+
+const typeOptions = [
+  { label: 'Person', value: 'person' as const },
+  { label: 'Company', value: 'company' as const },
+  { label: 'Digital / Online', value: 'digital' as const },
+  { label: 'Event', value: 'event' as const },
+  { label: 'Other', value: 'other' as const },
+]
+
+function resetForm() {
+  fname.value = ''
+  ftype.value = 'person'
+  fcontactName.value = ''
+  fcontactPhone.value = ''
+  fcontactEmail.value = ''
+  fnote.value = ''
+  factive.value = true
+  editingId.value = null
+  formOpen.value = false
+}
+
+function editChannel(ch: ReferralChannel) {
+  editingId.value = ch.id
+  fname.value = ch.name
+  ftype.value = ch.type
+  fcontactName.value = ch.contactName
+  fcontactPhone.value = ch.contactPhone
+  fcontactEmail.value = ch.contactEmail
+  fnote.value = ch.note
+  factive.value = ch.active
+  formOpen.value = true
+}
+
+function submit() {
+  if (!fname.value.trim()) return
+  if (editingId.value) {
+    updateChannel(editingId.value, {
+      name: fname.value.trim(),
+      type: ftype.value,
+      contactName: fcontactName.value.trim(),
+      contactPhone: fcontactPhone.value.trim(),
+      contactEmail: fcontactEmail.value.trim(),
+      note: fnote.value.trim(),
+      active: factive.value,
+    })
+    toast.add({ title: 'Channel updated', color: 'success' })
+  } else {
+    addChannel({
+      name: fname.value.trim(),
+      type: ftype.value,
+      contactName: fcontactName.value.trim(),
+      contactPhone: fcontactPhone.value.trim(),
+      contactEmail: fcontactEmail.value.trim(),
+      note: fnote.value.trim(),
+      active: factive.value,
+    })
+    toast.add({ title: 'Channel added', description: `${fname.value} added to referral channels`, color: 'success' })
+  }
+  resetForm()
+}
+
+function confirmRemove(id: string) {
+  removeChannel(id)
+  toast.add({ title: 'Channel removed', color: 'neutral' })
+}
+
+function toggleActive(id: string) {
+  const ch = channels.value.find(c => c.id === id)
+  if (ch) updateChannel(id, { active: !ch.active })
+}
+
+/* ── Filter ── */
+type ListFilter = 'all' | 'active' | 'inactive'
+const activeFilter = ref<ListFilter>('all')
+
+const filteredChannels = computed(() => {
+  if (activeFilter.value === 'active') return channels.value.filter(c => c.active)
+  if (activeFilter.value === 'inactive') return channels.value.filter(c => !c.active)
+  return channels.value
+})
+
+const filterCounts = computed(() => ({
+  all: channels.value.length,
+  active: channels.value.filter(c => c.active).length,
+  inactive: channels.value.filter(c => !c.active).length,
+}))
+
+/* ── Helpers ── */
+const typeMeta: Record<string, { label: string; icon: string; class: string }> = {
+  person: { label: 'Person', icon: 'i-heroicons-user', class: 'rc-type-person' },
+  company: { label: 'Company', icon: 'i-heroicons-building-office', class: 'rc-type-company' },
+  digital: { label: 'Digital', icon: 'i-heroicons-globe-alt', class: 'rc-type-digital' },
+  event: { label: 'Event', icon: 'i-heroicons-calendar-days', class: 'rc-type-event' },
+  other: { label: 'Other', icon: 'i-heroicons-tag', class: 'rc-type-other' },
+}
+</script>
+
+<template>
+  <div class="rc-page">
+    <!-- Back -->
+    <NuxtLink to="/settings" class="inline-flex">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-heroicons-arrow-left">Settings</UButton>
+    </NuxtLink>
+
+    <!-- Header -->
+    <div class="flex flex-wrap items-end justify-between gap-3">
+      <div class="max-w-xl">
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Referral Channels</h1>
+        <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
+          Manage the sources that generate leads and new business — people, companies, digital campaigns, events, and more.
+        </p>
+      </div>
+      <button type="button" class="rc-btn-primary" @click="formOpen = !formOpen; if (!formOpen) resetForm()">
+        <UIcon :name="formOpen ? 'i-heroicons-chevron-up' : 'i-heroicons-plus'" style="width: 14px; height: 14px;" />
+        {{ formOpen ? 'Close form' : 'Add channel' }}
+      </button>
+    </div>
+
+    <!-- ═══ Add / Edit form ═══ -->
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="opacity-0 -translate-y-2 max-h-0"
+      enter-to-class="opacity-100 translate-y-0 max-h-[700px]"
+      leave-active-class="transition-all duration-150 ease-in"
+      leave-from-class="opacity-100 max-h-[700px]"
+      leave-to-class="opacity-0 -translate-y-2 max-h-0"
+    >
+      <div v-if="formOpen" class="rc-form-card">
+        <div class="rc-section">
+          <p class="rc-section-title">{{ editingId ? 'Edit channel' : 'New referral channel' }}</p>
+          <div class="rc-fields">
+            <div class="rc-field rc-field-full">
+              <label class="rc-label">Channel name <span class="rc-required">*</span></label>
+              <UInput v-model="fname" placeholder="e.g. Roberto Jiménez, Instagram Ads, Expo 2026" size="sm" />
+            </div>
+            <div class="rc-field">
+              <label class="rc-label">Type</label>
+              <USelect v-model="ftype" :items="typeOptions" size="sm" />
+            </div>
+            <div class="rc-field">
+              <label class="rc-label">Status</label>
+              <div class="flex items-center gap-2 mt-1">
+                <button type="button" class="rc-toggle" :class="factive ? 'rc-toggle-on' : 'rc-toggle-off'" @click="factive = !factive">
+                  <span class="rc-toggle-dot" :class="factive ? 'rc-dot-on' : 'rc-dot-off'" />
+                </button>
+                <span class="text-[12px]" :class="factive ? 'text-[#01696f] font-medium' : 'text-[#8a8a86]'">{{ factive ? 'Active' : 'Inactive' }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="rc-divider" />
+
+        <div class="rc-section">
+          <p class="rc-section-title">Contact info</p>
+          <div class="rc-fields">
+            <div class="rc-field">
+              <label class="rc-label">Contact name</label>
+              <UInput v-model="fcontactName" placeholder="Primary contact person" size="sm" />
+            </div>
+            <div class="rc-field">
+              <label class="rc-label">Phone</label>
+              <UInput v-model="fcontactPhone" placeholder="+506 0000-0000" size="sm" />
+            </div>
+            <div class="rc-field">
+              <label class="rc-label">Email</label>
+              <UInput v-model="fcontactEmail" placeholder="email@company.com" size="sm" type="email" />
+            </div>
+            <div class="rc-field rc-field-full">
+              <label class="rc-label">Notes</label>
+              <UTextarea v-model="fnote" placeholder="Context, relationship, expected lead volume..." size="sm" :rows="2" />
+            </div>
+          </div>
+        </div>
+
+        <div class="rc-footer">
+          <div class="flex items-center gap-2 text-[12px] text-[var(--text-muted)]">
+            <UIcon name="i-heroicons-link" style="width: 14px; height: 14px; opacity: 0.5;" />
+            {{ editingId ? 'Editing existing channel' : 'Creates a new referral source' }}
+          </div>
+          <div class="flex gap-2">
+            <button type="button" class="rc-cancel-btn" @click="resetForm">Cancel</button>
+            <button type="button" class="rc-btn-primary" :class="!fname.trim() ? 'rc-btn-disabled' : ''" @click="submit">
+              <UIcon :name="editingId ? 'i-heroicons-check' : 'i-heroicons-plus'" style="width: 14px; height: 14px;" />
+              {{ editingId ? 'Save changes' : 'Add Channel' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- ═══ KPI strip ═══ -->
+    <div class="rc-kpi-strip">
+      <div class="rc-kpi">
+        <p class="rc-kpi-label">Total channels</p>
+        <p class="rc-kpi-value">{{ channels.length }}</p>
+      </div>
+      <div class="rc-kpi">
+        <p class="rc-kpi-label">Active</p>
+        <p class="rc-kpi-value" style="color: #01696f;">{{ filterCounts.active }}</p>
+      </div>
+      <div class="rc-kpi">
+        <p class="rc-kpi-label">Inactive</p>
+        <p class="rc-kpi-value">{{ filterCounts.inactive }}</p>
+      </div>
+      <div class="rc-kpi">
+        <p class="rc-kpi-label">Types</p>
+        <p class="rc-kpi-value">{{ new Set(channels.map(c => c.type)).size }}</p>
+      </div>
+    </div>
+
+    <!-- ═══ Filter tabs ═══ -->
+    <div class="flex items-center justify-between gap-3">
+      <div class="rc-filter-tabs">
+        <button
+          v-for="f in ([
+            { id: 'all', label: 'All' },
+            { id: 'active', label: 'Active' },
+            { id: 'inactive', label: 'Inactive' },
+          ] as { id: ListFilter; label: string }[])"
+          :key="f.id"
+          type="button"
+          class="rc-filter-tab"
+          :class="activeFilter === f.id ? 'rc-filter-on' : 'rc-filter-off'"
+          @click="activeFilter = f.id"
+        >
+          {{ f.label }}
+          <span class="rc-filter-count" :class="activeFilter === f.id ? 'rc-filter-count-on' : ''">{{ filterCounts[f.id] }}</span>
+        </button>
+      </div>
+      <span class="text-[11px] text-[var(--text-muted)]">{{ filteredChannels.length }} results</span>
+    </div>
+
+    <!-- ═══ Channel list ═══ -->
+    <div v-if="filteredChannels.length === 0" class="rc-empty">
+      <UIcon name="i-heroicons-link" style="width: 32px; height: 32px; color: #c0c0bc;" />
+      <p class="text-[13px] text-[var(--text-muted)] mt-2">No referral channels yet.</p>
+      <button type="button" class="rc-btn-primary mt-3" @click="formOpen = true">
+        <UIcon name="i-heroicons-plus" style="width: 14px; height: 14px;" />
+        Add your first channel
+      </button>
+    </div>
+
+    <div v-else class="rc-list">
+      <div v-for="ch in filteredChannels" :key="ch.id" class="rc-card group">
+        <div class="rc-card-top">
+          <div class="rc-card-icon" :class="typeMeta[ch.type]?.class">
+            <UIcon :name="typeMeta[ch.type]?.icon ?? 'i-heroicons-tag'" style="width: 16px; height: 16px;" />
+          </div>
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2 flex-wrap">
+              <p class="text-[14px] font-semibold text-[var(--text-primary)] truncate">{{ ch.name }}</p>
+              <span class="rc-type-badge" :class="typeMeta[ch.type]?.class">{{ typeMeta[ch.type]?.label ?? ch.type }}</span>
+              <span v-if="!ch.active" class="rc-inactive-badge">Inactive</span>
+            </div>
+            <div class="flex items-center gap-3 mt-0.5 text-[11px] text-[var(--text-muted)]">
+              <span v-if="ch.contactName">{{ ch.contactName }}</span>
+              <span v-if="ch.contactPhone">{{ ch.contactPhone }}</span>
+              <span v-if="ch.contactEmail">{{ ch.contactEmail }}</span>
+            </div>
+          </div>
+          <div class="rc-card-actions">
+            <button type="button" class="rc-action-btn" :class="ch.active ? 'rc-action-toggle-on' : 'rc-action-toggle-off'" :title="ch.active ? 'Deactivate' : 'Activate'" @click="toggleActive(ch.id)">
+              <UIcon :name="ch.active ? 'i-heroicons-eye' : 'i-heroicons-eye-slash'" style="width: 14px; height: 14px;" />
+            </button>
+            <button type="button" class="rc-action-btn" title="Edit" @click="editChannel(ch)">
+              <UIcon name="i-heroicons-pencil-square" style="width: 14px; height: 14px;" />
+            </button>
+            <button type="button" class="rc-action-btn rc-action-delete" title="Remove" @click="confirmRemove(ch.id)">
+              <UIcon name="i-heroicons-trash" style="width: 14px; height: 14px;" />
+            </button>
+          </div>
+        </div>
+        <div v-if="ch.note" class="rc-card-note">
+          <UIcon name="i-heroicons-chat-bubble-left-ellipsis" style="width: 11px; height: 11px; color: #8a8a86; flex-shrink: 0;" />
+          <span>{{ ch.note }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rc-page {
+  max-width: 48rem; margin: 0 auto;
+  display: flex; flex-direction: column; gap: 20px; padding-bottom: 3rem;
+}
+
+/* ── Buttons ── */
+.rc-btn-primary {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px; border-radius: 8px;
+  background: #01696f; color: #fff;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.rc-btn-primary:hover { background: #015458; }
+.rc-btn-disabled { opacity: 0.5; pointer-events: none; }
+.rc-cancel-btn {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 8px 14px; border-radius: 8px;
+  background: transparent; color: var(--text-muted);
+  font-size: 13px; font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.08); cursor: pointer;
+  transition: all 150ms ease; white-space: nowrap;
+}
+.rc-cancel-btn:hover { border-color: rgba(0,0,0,0.15); color: var(--text-primary); }
+
+/* ── Form card ── */
+.rc-form-card {
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03); overflow: hidden;
+}
+.rc-section { padding: 20px; }
+.rc-section-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
+.rc-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
+@media (max-width: 639px) { .rc-fields { grid-template-columns: 1fr; } }
+.rc-field-full { grid-column: 1 / -1; }
+.rc-field { display: flex; flex-direction: column; gap: 6px; }
+.rc-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86; }
+.rc-required { color: #c13838; }
+.rc-divider { height: 1px; background: rgba(0,0,0,0.06); margin: 0 20px; }
+.rc-footer {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 16px 20px; border-top: 1px solid rgba(0,0,0,0.06); background: rgba(0,0,0,0.015);
+}
+
+/* Toggle */
+.rc-toggle {
+  width: 32px; height: 18px; border-radius: 9px; border: none;
+  cursor: pointer; position: relative; transition: background 150ms ease;
+}
+.rc-toggle-on { background: #01696f; }
+.rc-toggle-off { background: rgba(0,0,0,0.12); }
+.rc-toggle-dot {
+  display: block; width: 14px; height: 14px; border-radius: 7px;
+  background: #fff; position: absolute; top: 2px; transition: left 150ms ease;
+}
+.rc-dot-on { left: 16px; }
+.rc-dot-off { left: 2px; }
+
+/* ── KPI strip ── */
+.rc-kpi-strip {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.03); overflow: hidden;
+}
+.rc-kpi { padding: 14px 18px; background: #fff; }
+.rc-kpi:first-child { border-radius: 12px 0 0 12px; }
+.rc-kpi:last-child { border-radius: 0 12px 12px 0; }
+.rc-kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #8a8a86; }
+.rc-kpi-value { margin-top: 4px; font-size: 22px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
+@media (max-width: 640px) { .rc-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
+
+/* ── Filter tabs ── */
+.rc-filter-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,0.04); }
+.rc-filter-tab {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 6px 12px; border-radius: 8px;
+  font-size: 12px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.rc-filter-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.rc-filter-off { background: transparent; color: var(--text-muted); }
+.rc-filter-off:hover { color: var(--text-primary); }
+.rc-filter-count { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 9999px; background: rgba(0,0,0,0.06); color: var(--text-muted); }
+.rc-filter-count-on { background: rgba(1,105,111,0.1); color: #01696f; }
+
+/* ── Channel cards ── */
+.rc-list { display: flex; flex-direction: column; gap: 6px; }
+.rc-card {
+  display: flex; flex-direction: column; gap: 8px;
+  padding: 14px 16px; border-radius: 10px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  transition: all 150ms ease;
+}
+.rc-card:hover { border-color: rgba(1,105,111,0.15); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
+.rc-card-top { display: flex; align-items: center; gap: 10px; }
+.rc-card-icon {
+  width: 36px; height: 36px; border-radius: 10px;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.rc-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 150ms ease; flex-shrink: 0; }
+.rc-card:hover .rc-card-actions { opacity: 1; }
+.rc-action-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: 6px; border: none; cursor: pointer;
+  background: rgba(0,0,0,0.03); color: #8a8a86; transition: all 150ms ease;
+}
+.rc-action-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
+.rc-action-delete:hover { background: rgba(193,56,56,0.08); color: #c13838; }
+.rc-action-toggle-on:hover { background: rgba(1,105,111,0.1); color: #01696f; }
+.rc-action-toggle-off { opacity: 0.5; }
+.rc-action-toggle-off:hover { background: rgba(194,123,26,0.08); color: #c27b1a; opacity: 1; }
+
+.rc-card-note {
+  display: flex; align-items: flex-start; gap: 5px; padding-left: 46px;
+  font-size: 12px; color: var(--text-muted); line-height: 1.4;
+}
+
+/* ── Type badges ── */
+.rc-type-badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; white-space: nowrap; }
+.rc-type-person { background: rgba(59,130,246,0.08); color: #3b82f6; }
+.rc-type-company { background: rgba(1,105,111,0.08); color: #01696f; }
+.rc-type-digital { background: rgba(147,51,234,0.08); color: #9333ea; }
+.rc-type-event { background: rgba(194,123,26,0.08); color: #c27b1a; }
+.rc-type-other { background: rgba(0,0,0,0.04); color: #8a8a86; }
+.rc-inactive-badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(0,0,0,0.06); color: #8a8a86; white-space: nowrap; }
+
+/* ── Empty state ── */
+.rc-empty { display: flex; flex-direction: column; align-items: center; padding: 40px 16px; text-align: center; }
+</style>
diff --git a/app/pages/settings/support-routing.vue b/app/pages/settings/support-routing.vue
new file mode 100644
index 0000000..08bf310
--- /dev/null
+++ b/app/pages/settings/support-routing.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { TIER_LABELS, QUEUE_LABELS, type RoutingTier, type RoutedQueue, type RoutingRule } from '~/data/mock-support'
+
+usePageTitle('Support Routing')
+
+const { state, toggleRule, updateRule } = useSupportTickets()
+
+type TierTab = 'tier1' | 'tier2' | 'tier3'
+const activeTier = ref<TierTab>('tier1')
+
+const tierTabs: { id: TierTab; label: string; tier: RoutingTier; description: string }[] = [
+  { id: 'tier1', label: 'Tier 1 — Auto', tier: 'tier1_auto', description: 'Ruteo automático para clientes conocidos, formularios web con LOB, y auto-cumplimiento de documentos.' },
+  { id: 'tier2', label: 'Tier 2 — Reglas', tier: 'tier2_rule', description: 'Clasificación por palabras clave del mensaje. El LLM detecta la intención y dirige a la cola correcta.' },
+  { id: 'tier3', label: 'Tier 3 — Pool', tier: 'tier3_open', description: 'Mensajes ambiguos que no coinciden con ninguna regla van al pool abierto para triaje manual.' },
+]
+
+const tier1Rules = computed(() => state.value.routingRules.filter(r => r.tier === 'tier1_auto'))
+const tier2Rules = computed(() => state.value.routingRules.filter(r => r.tier === 'tier2_rule'))
+
+const queueOptions: { label: string; value: RoutedQueue }[] = [
+  { label: 'Cobros', value: 'collections' },
+  { label: 'Siniestros', value: 'claims' },
+  { label: 'Ventas', value: 'sales' },
+  { label: 'Renovaciones', value: 'renewals' },
+  { label: 'Operaciones', value: 'operations' },
+  { label: 'Pool Abierto', value: 'open_pool' },
+]
+
+// Tier 3 settings (mock)
+const tier3DefaultAssignee = ref('Round-robin')
+const tier3EscalationHours = ref(4)
+
+const toast = useToast()
+function handleSave() {
+  toast.add({ title: 'Configuración guardada', color: 'green' })
+}
+</script>
+
+<template>
+  <div class="srt-page">
+    <!-- Back + Header -->
+    <NuxtLink to="/settings" class="srt-back-link">
+      <UIcon name="i-heroicons-arrow-left" class="w-3.5 h-3.5" />
+      Volver a Configuración
+    </NuxtLink>
+
+    <div>
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Support Routing</h1>
+      <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Configure 3-tier routing rules for incoming support requests — auto-routing, keyword classification, and open pool settings.
+      </p>
+    </div>
+
+    <!-- Tier tabs -->
+    <div class="srt-tier-tabs">
+      <button
+        v-for="tab in tierTabs"
+        :key="tab.id"
+        type="button"
+        class="srt-tier-tab"
+        :class="activeTier === tab.id ? 'srt-tier-on' : 'srt-tier-off'"
+        @click="activeTier = tab.id"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <!-- Tier description -->
+    <p class="text-[13px] text-[var(--text-muted)] -mt-2">
+      {{ tierTabs.find(t => t.id === activeTier)?.description }}
+    </p>
+
+    <!-- ═══════════ TIER 1 ═══════════ -->
+    <div v-if="activeTier === 'tier1'" class="srt-rules">
+      <div v-for="rule in tier1Rules" :key="rule.id" class="srt-rule-card">
+        <div class="srt-rule-header">
+          <div class="flex-1 min-w-0">
+            <p class="srt-rule-name">{{ rule.name }}</p>
+            <p class="srt-rule-condition">{{ rule.condition }}</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="srt-queue-chip">{{ QUEUE_LABELS[rule.targetQueue] }}</span>
+            <USwitch :model-value="rule.enabled" @update:model-value="toggleRule(rule.id)" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══════════ TIER 2 ═══════════ -->
+    <div v-if="activeTier === 'tier2'" class="srt-rules">
+      <div v-for="rule in tier2Rules" :key="rule.id" class="srt-rule-card">
+        <div class="srt-rule-header">
+          <div class="flex-1 min-w-0">
+            <p class="srt-rule-name">{{ rule.name }}</p>
+            <p class="srt-rule-condition">{{ rule.condition }}</p>
+          </div>
+          <div class="flex items-center gap-3">
+            <select
+              class="srt-queue-select"
+              :value="rule.targetQueue"
+              @change="updateRule(rule.id, { targetQueue: ($event.target as HTMLSelectElement).value as RoutedQueue })"
+            >
+              <option v-for="q in queueOptions" :key="q.value" :value="q.value">{{ q.label }}</option>
+            </select>
+            <USwitch :model-value="rule.enabled" @update:model-value="toggleRule(rule.id)" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══════════ TIER 3 ═══════════ -->
+    <div v-if="activeTier === 'tier3'" class="srt-rules">
+      <div class="srt-rule-card">
+        <div class="srt-rule-header">
+          <div class="flex-1">
+            <p class="srt-rule-name">Asignación por defecto</p>
+            <p class="srt-rule-condition">Tickets sin coincidencia de regla se asignan a:</p>
+          </div>
+          <select v-model="tier3DefaultAssignee" class="srt-queue-select">
+            <option>Round-robin</option>
+            <option>Ana R.</option>
+            <option>Marco V.</option>
+            <option>Carlos Villalba</option>
+            <option>María Fernanda Ortiz</option>
+          </select>
+        </div>
+      </div>
+      <div class="srt-rule-card">
+        <div class="srt-rule-header">
+          <div class="flex-1">
+            <p class="srt-rule-name">Umbral de escalamiento</p>
+            <p class="srt-rule-condition">Si un ticket no asignado permanece en el pool más de este tiempo, se escala automáticamente.</p>
+          </div>
+          <div class="flex items-center gap-2">
+            <input
+              v-model.number="tier3EscalationHours"
+              type="number"
+              min="1"
+              max="48"
+              class="srt-hour-input"
+            />
+            <span class="text-[12px] text-[var(--text-muted)]">horas</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Save button -->
+    <div class="flex justify-end">
+      <button type="button" class="srt-save-btn" @click="handleSave">
+        Guardar configuración
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.srt-page {
+  max-width: 56rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-bottom: 3rem;
+}
+
+.srt-back-link {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 12px; font-weight: 600; color: #01696f;
+  text-decoration: none;
+}
+.srt-back-link:hover { text-decoration: underline; }
+
+/* ── Tier tabs ── */
+.srt-tier-tabs {
+  display: inline-flex; gap: 2px; padding: 3px;
+  border-radius: 10px; background: rgba(0,0,0,0.04);
+  width: fit-content;
+}
+.srt-tier-tab {
+  padding: 8px 18px; border-radius: 8px;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.srt-tier-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.srt-tier-off { background: transparent; color: var(--text-muted); }
+.srt-tier-off:hover { color: var(--text-primary); }
+
+/* ── Rules ── */
+.srt-rules { display: flex; flex-direction: column; gap: 10px; }
+.srt-rule-card {
+  padding: 16px; border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+.srt-rule-header {
+  display: flex; align-items: center; gap: 16px;
+}
+.srt-rule-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
+.srt-rule-condition { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
+
+.srt-queue-chip {
+  display: inline-flex; padding: 2px 8px; border-radius: 8px;
+  font-size: 11px; font-weight: 600;
+  background: rgba(1,105,111,0.06); color: #01696f;
+  white-space: nowrap;
+}
+
+.srt-queue-select {
+  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.08); background: #fff; color: var(--text-primary);
+  cursor: pointer; min-width: 120px;
+}
+.srt-queue-select:focus { outline: none; border-color: #01696f; }
+
+.srt-hour-input {
+  width: 60px; padding: 5px 8px; border-radius: 8px;
+  font-size: 13px; font-weight: 600; text-align: center;
+  border: 1px solid rgba(0,0,0,0.08); background: #fff; color: var(--text-primary);
+}
+.srt-hour-input:focus { outline: none; border-color: #01696f; }
+
+.srt-save-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 20px; border-radius: 8px;
+  background: #01696f; color: #fff;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease;
+}
+.srt-save-btn:hover { background: #015458; }
+</style>
diff --git a/app/pages/support/[id].vue b/app/pages/support/[id].vue
new file mode 100644
index 0000000..75b32ce
--- /dev/null
+++ b/app/pages/support/[id].vue
@@ -0,0 +1,752 @@
+<script setup lang="ts">
+import {
+  slaColor, fmtDate, fmtTime, fmtDateTime,
+  CHANNEL_LABELS, CHANNEL_ICONS, STATUS_LABELS,
+  PRIORITY_LABELS, INTENT_LABELS, TIER_LABELS, QUEUE_LABELS,
+  type SupportTicketDetail, type TicketMessage, type MessageType,
+  type TicketStatus, type SupportChannel,
+} from '~/data/mock-support'
+
+definePageMeta({ ssr: false })
+usePageTitle('Ticket Detail')
+
+const route = useRoute()
+const ticketId = route.params.id as string
+const { getDetail, updateStatus, assignTicket, addMessage } = useSupportTickets()
+
+const ticket = ref<SupportTicketDetail | null>(getDetail(ticketId) ?? null)
+
+// ── Tabs ──
+type TabId = 'thread' | 'overview' | 'documents'
+const activeTab = ref<TabId>('thread')
+const tabs: { id: TabId; label: string; icon: string }[] = [
+  { id: 'thread', label: 'Conversación', icon: 'i-heroicons-chat-bubble-left-right' },
+  { id: 'overview', label: 'Resumen', icon: 'i-heroicons-squares-2x2' },
+  { id: 'documents', label: 'Documentos', icon: 'i-heroicons-folder-open' },
+]
+
+// ── Helpers ──
+const statusClass = (s: TicketStatus) => {
+  const map: Record<string, string> = {
+    open: 'spd-st-open', in_progress: 'spd-st-progress',
+    pending_customer: 'spd-st-pending', resolved: 'spd-st-resolved',
+  }
+  return map[s] ?? ''
+}
+
+const priorityClass = (p: string) => {
+  const map: Record<string, string> = {
+    urgent: 'spd-pri-urgent', high: 'spd-pri-high',
+    medium: 'spd-pri-medium', low: 'spd-pri-low',
+  }
+  return map[p] ?? ''
+}
+
+const tierClass = (t: string) => {
+  const map: Record<string, string> = {
+    tier1_auto: 'spd-tier-1', tier2_rule: 'spd-tier-2', tier3_open: 'spd-tier-3',
+  }
+  return map[t] ?? ''
+}
+
+const deliveryIcon = (s?: string) => {
+  if (s === 'read') return '✓✓'
+  if (s === 'delivered') return '✓✓'
+  if (s === 'sent') return '✓'
+  return ''
+}
+
+const deliveryClass = (s?: string) => s === 'read' ? 'spd-delivery-read' : 'spd-delivery-default'
+
+// ── Composer ──
+const composerChannel = ref<'whatsapp' | 'email' | 'internal_note'>(
+  ticket.value?.channel === 'whatsapp' ? 'whatsapp'
+    : ticket.value?.channel === 'email' ? 'email'
+    : 'internal_note'
+)
+const composerText = ref('')
+
+function sendMessage() {
+  if (!composerText.value.trim() || !ticket.value) return
+  const typeMap: Record<string, MessageType> = {
+    whatsapp: 'whatsapp', email: 'email', internal_note: 'internal_note',
+  }
+  addMessage(ticketId, {
+    type: typeMap[composerChannel.value],
+    direction: composerChannel.value === 'internal_note' ? 'internal' : 'outbound',
+    from: ticket.value.assignedTo ?? 'Agente',
+    to: composerChannel.value === 'internal_note' ? null : ticket.value.customerName,
+    subject: composerChannel.value === 'email' ? `Re: ${ticket.value.subject}` : null,
+    body: composerText.value.trim(),
+    aiDigest: null,
+    deliveryStatus: composerChannel.value === 'whatsapp' ? 'sent' : undefined,
+  })
+  composerText.value = ''
+  // refresh detail
+  ticket.value = getDetail(ticketId) ?? null
+}
+
+// ── AI recap ──
+const aiRecapOpen = ref(true)
+
+// ── Actions ──
+const toast = useToast()
+function handleResolve() {
+  updateStatus(ticketId, 'resolved')
+  ticket.value = getDetail(ticketId) ?? null
+  toast.add({ title: 'Ticket resuelto', color: 'green' })
+}
+
+function handleAssign() {
+  const agent = prompt('Asignar a:')
+  if (agent) {
+    assignTicket(ticketId, agent)
+    ticket.value = getDetail(ticketId) ?? null
+    toast.add({ title: `Asignado a ${agent}`, color: 'green' })
+  }
+}
+
+function handleEscalate() {
+  toast.add({ title: 'Escalado', description: 'Ticket movido al pool abierto para triaje.', color: 'neutral' })
+}
+
+// ── Sorted messages (oldest first) ──
+const sortedMessages = computed(() => {
+  if (!ticket.value) return []
+  return [...ticket.value.messages].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
+})
+</script>
+
+<template>
+  <div class="spd-root mx-auto max-w-5xl pb-12">
+    <!-- Not found -->
+    <template v-if="!ticket">
+      <div class="spd-not-found">
+        <UIcon name="i-heroicons-exclamation-triangle" class="w-8 h-8" />
+        <h2>Ticket no encontrado</h2>
+        <p>No existe un ticket con ID <strong>{{ ticketId }}</strong>.</p>
+        <NuxtLink to="/support" class="spd-back-link">Volver a Soporte</NuxtLink>
+      </div>
+    </template>
+
+    <template v-else>
+      <!-- Back link -->
+      <NuxtLink to="/support" class="spd-back-link">
+        <UIcon name="i-heroicons-arrow-left" class="w-3.5 h-3.5" />
+        Volver a Soporte
+      </NuxtLink>
+
+      <!-- ═══════════ HEADER ═══════════ -->
+      <div class="spd-detail-header">
+        <div class="spd-header-left">
+          <div class="spd-title-row">
+            <h1 class="spd-title">{{ ticket.id }}</h1>
+            <span :class="['spd-status-pill', statusClass(ticket.status)]">{{ STATUS_LABELS[ticket.status] }}</span>
+            <span :class="['spd-priority-badge', priorityClass(ticket.priority)]">{{ PRIORITY_LABELS[ticket.priority] }}</span>
+            <span :class="['spd-tier-badge', tierClass(ticket.routingTier)]">{{ TIER_LABELS[ticket.routingTier] }}</span>
+            <UIcon :name="CHANNEL_ICONS[ticket.channel]" class="w-5 h-5" :style="ticket.channel === 'whatsapp' ? 'color: #25D366;' : 'color: #8a8a86;'" :title="CHANNEL_LABELS[ticket.channel]" />
+          </div>
+          <div class="spd-header-meta">
+            <span>Cliente: <strong>{{ ticket.customerName }}</strong></span>
+            <template v-if="ticket.policyNumber">
+              <span class="spd-meta-sep">·</span>
+              <span>Póliza: <NuxtLink :to="`/policies/${ticket.policyId}`" class="spd-meta-link">{{ ticket.policyNumber }}</NuxtLink></span>
+            </template>
+            <span class="spd-meta-sep">·</span>
+            <span>Creado: {{ fmtDate(ticket.createdAt) }}</span>
+            <span class="spd-meta-sep">·</span>
+            <span>{{ ticket.daysOpen }} días abierto</span>
+            <span class="spd-meta-sep">·</span>
+            <span>Asignado: {{ ticket.assignedTo ?? 'Sin asignar' }}</span>
+          </div>
+        </div>
+        <div class="spd-header-actions">
+          <button type="button" class="spd-action-btn" @click="handleAssign">
+            <UIcon name="i-heroicons-user-plus" class="w-4 h-4" />
+            Asignar
+          </button>
+          <button type="button" class="spd-action-btn" @click="handleEscalate">
+            <UIcon name="i-heroicons-arrow-up-circle" class="w-4 h-4" />
+            Escalar
+          </button>
+          <button v-if="ticket.status !== 'resolved'" type="button" class="spd-action-btn-primary" @click="handleResolve">
+            <UIcon name="i-heroicons-check-circle" class="w-4 h-4" />
+            Resolver
+          </button>
+        </div>
+      </div>
+
+      <!-- ═══════════ POLICY CONTEXT PANEL ═══════════ -->
+      <div v-if="ticket.linkedPolicies.length" class="spd-context-panel">
+        <p class="spd-context-title">
+          <UIcon name="i-heroicons-briefcase" class="w-4 h-4" />
+          Contexto del Cliente
+        </p>
+        <div class="spd-context-policies">
+          <div v-for="pol in ticket.linkedPolicies" :key="pol.id" class="spd-context-policy-row">
+            <span class="spd-context-pol-number">{{ pol.number }}</span>
+            <span class="spd-context-pol-chip">{{ pol.lob }}</span>
+            <span class="text-[12px] text-[var(--text-muted)]">{{ pol.carrier }}</span>
+            <span class="text-[12px]" :class="pol.status === 'Vigente' ? 'text-emerald-600' : 'text-[var(--text-muted)]'">{{ pol.status }}</span>
+            <span class="text-[11px] text-[var(--text-muted)]">Ren: {{ pol.renewal }}</span>
+          </div>
+        </div>
+        <div v-if="ticket.linkedClaims.length" class="mt-2">
+          <p class="text-[11px] font-semibold uppercase text-[var(--text-muted)]">Siniestros vinculados</p>
+          <div v-for="cl in ticket.linkedClaims" :key="cl.id" class="spd-context-claim">
+            <span class="text-[12px] font-mono font-semibold text-[#01696f]">{{ cl.id }}</span>
+            <span class="text-[12px] text-[var(--text-muted)]">{{ cl.type }} — {{ cl.status }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════ QUICK STATS ═══════════ -->
+      <div class="spd-quick-strip">
+        <div class="spd-quick-item">
+          <span class="spd-quick-label">SLA</span>
+          <span class="spd-quick-val" :style="`color: ${ticket.slaPercent >= 100 ? '#c13838' : ticket.slaPercent >= 70 ? '#c27b1a' : '#059669'}`">{{ ticket.slaPercent }}%</span>
+        </div>
+        <div class="spd-quick-item">
+          <span class="spd-quick-label">Mensajes</span>
+          <span class="spd-quick-val">{{ ticket.messageCount }}</span>
+        </div>
+        <div class="spd-quick-item">
+          <span class="spd-quick-label">Días abierto</span>
+          <span class="spd-quick-val">{{ ticket.daysOpen }}</span>
+        </div>
+        <div class="spd-quick-item">
+          <span class="spd-quick-label">Cola</span>
+          <span class="spd-quick-val" style="font-size: 13px;">{{ QUEUE_LABELS[ticket.routedQueue] }}</span>
+        </div>
+      </div>
+
+      <!-- ═══════════ AI SECTION ═══════════ -->
+      <div class="spd-ai-panel">
+        <div class="spd-ai-header" @click="aiRecapOpen = !aiRecapOpen" style="cursor: pointer;">
+          <div class="flex items-center gap-2">
+            <span class="spd-ai-badge">IA</span>
+            <span class="text-[13px] font-semibold text-[var(--text-primary)]">Análisis automático</span>
+          </div>
+          <UIcon :name="aiRecapOpen ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'" class="w-4 h-4 text-[var(--text-muted)]" />
+        </div>
+        <div v-if="aiRecapOpen" class="spd-ai-body">
+          <div class="spd-ai-row">
+            <span class="spd-ai-label">Resumen</span>
+            <p class="text-[13px] text-[var(--text-primary)]">{{ ticket.aiSummary }}</p>
+          </div>
+          <div class="spd-ai-row">
+            <span class="spd-ai-label">Intención detectada</span>
+            <span class="text-[13px] font-medium text-[var(--text-primary)]">{{ INTENT_LABELS[ticket.aiSuggestedIntent] }}</span>
+            <span class="spd-ai-confidence">{{ Math.round(ticket.aiConfidence * 100) }}% confianza</span>
+          </div>
+          <div v-if="ticket.routingTrace.length" class="spd-ai-row">
+            <span class="spd-ai-label">Traza de ruteo</span>
+            <div class="spd-routing-trace">
+              <div v-for="(step, i) in ticket.routingTrace" :key="i" class="spd-trace-step">
+                <span class="spd-trace-dot" />
+                <div>
+                  <p class="text-[12px] font-medium text-[var(--text-primary)]">{{ step.step }}</p>
+                  <p class="text-[11px] text-[var(--text-muted)]">{{ step.result }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════ TABS ═══════════ -->
+      <div class="spd-main-tabs">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          type="button"
+          class="spd-tab"
+          :class="activeTab === tab.id ? 'spd-tab-on' : 'spd-tab-off'"
+          @click="activeTab = tab.id"
+        >
+          <UIcon :name="tab.icon" class="w-4 h-4" />
+          {{ tab.label }}
+        </button>
+      </div>
+
+      <!-- ═══════════ THREAD TAB ═══════════ -->
+      <div v-if="activeTab === 'thread'" class="spd-thread">
+        <div v-for="msg in sortedMessages" :key="msg.id" class="spd-msg" :class="[
+          msg.type === 'system' ? 'spd-msg-system' : '',
+          msg.type === 'internal_note' ? 'spd-msg-note' : '',
+          msg.direction === 'inbound' && msg.type !== 'system' && msg.type !== 'internal_note' ? 'spd-msg-inbound' : '',
+          msg.direction === 'outbound' ? 'spd-msg-outbound' : '',
+        ]">
+          <!-- System message -->
+          <template v-if="msg.type === 'system'">
+            <div class="spd-msg-system-inner">
+              <UIcon name="i-heroicons-cog-6-tooth" class="w-3.5 h-3.5" />
+              <span>{{ msg.body }}</span>
+              <span class="spd-msg-time">{{ fmtDateTime(msg.timestamp) }}</span>
+            </div>
+          </template>
+
+          <!-- Internal note -->
+          <template v-else-if="msg.type === 'internal_note'">
+            <div class="spd-msg-note-inner">
+              <div class="spd-msg-note-header">
+                <UIcon name="i-heroicons-lock-closed" class="w-3.5 h-3.5" />
+                <span class="font-semibold">{{ msg.from }}</span>
+                <span class="spd-msg-time">{{ fmtDateTime(msg.timestamp) }}</span>
+              </div>
+              <p class="spd-msg-note-body">{{ msg.body }}</p>
+            </div>
+          </template>
+
+          <!-- Email message -->
+          <template v-else-if="msg.type === 'email'">
+            <div class="spd-msg-email" :class="msg.direction === 'outbound' ? 'spd-email-outbound' : 'spd-email-inbound'">
+              <div class="spd-email-header">
+                <UIcon name="i-heroicons-envelope" class="w-3.5 h-3.5" />
+                <span class="font-semibold text-[12px]">{{ msg.from }}</span>
+                <span v-if="msg.to" class="text-[11px] text-[var(--text-muted)]">→ {{ msg.to }}</span>
+                <span class="spd-msg-time ml-auto">{{ fmtDateTime(msg.timestamp) }}</span>
+              </div>
+              <p v-if="msg.subject" class="spd-email-subject">{{ msg.subject }}</p>
+              <p class="spd-email-body">{{ msg.body }}</p>
+            </div>
+          </template>
+
+          <!-- WhatsApp / Phone note -->
+          <template v-else>
+            <div class="spd-msg-bubble" :class="msg.direction === 'outbound' ? 'spd-bubble-outbound' : 'spd-bubble-inbound'">
+              <p class="spd-bubble-from">{{ msg.from }}</p>
+              <p class="spd-bubble-body">{{ msg.body }}</p>
+              <div class="spd-bubble-footer">
+                <span class="spd-bubble-time">{{ fmtTime(msg.timestamp) }}</span>
+                <span v-if="msg.direction === 'outbound' && msg.deliveryStatus" :class="['spd-delivery', deliveryClass(msg.deliveryStatus)]">
+                  {{ deliveryIcon(msg.deliveryStatus) }}
+                </span>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <!-- ═══════════ REPLY COMPOSER ═══════════ -->
+        <div class="spd-composer" :class="composerChannel === 'whatsapp' ? 'spd-composer-wa' : composerChannel === 'internal_note' ? 'spd-composer-note' : ''">
+          <div class="spd-composer-channel-row">
+            <button
+              v-for="ch in ([
+                { id: 'whatsapp', label: 'WhatsApp', icon: 'i-heroicons-chat-bubble-left-ellipsis' },
+                { id: 'email', label: 'Email', icon: 'i-heroicons-envelope' },
+                { id: 'internal_note', label: 'Nota interna', icon: 'i-heroicons-lock-closed' },
+              ] as { id: typeof composerChannel; label: string; icon: string }[])"
+              :key="ch.id"
+              type="button"
+              class="spd-composer-ch-btn"
+              :class="composerChannel === ch.id ? 'spd-ch-active' : 'spd-ch-inactive'"
+              @click="composerChannel = ch.id"
+            >
+              <UIcon :name="ch.icon" class="w-3.5 h-3.5" />
+              {{ ch.label }}
+            </button>
+          </div>
+          <div class="spd-composer-input-row">
+            <textarea
+              v-model="composerText"
+              class="spd-composer-textarea"
+              :placeholder="composerChannel === 'internal_note' ? 'Escribir nota interna...' : `Responder vía ${composerChannel === 'whatsapp' ? 'WhatsApp' : 'email'}...`"
+              rows="2"
+              @keydown.meta.enter="sendMessage"
+              @keydown.ctrl.enter="sendMessage"
+            />
+            <button type="button" class="spd-composer-send" :disabled="!composerText.trim()" @click="sendMessage">
+              <UIcon name="i-heroicons-paper-airplane" class="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════ OVERVIEW TAB ═══════════ -->
+      <div v-if="activeTab === 'overview'" class="spd-overview">
+        <div class="spd-overview-section">
+          <h3 class="spd-section-title">Traza de Ruteo</h3>
+          <div class="spd-routing-trace">
+            <div v-for="(step, i) in ticket.routingTrace" :key="i" class="spd-trace-step">
+              <span class="spd-trace-dot" />
+              <div>
+                <p class="text-[12px] font-medium text-[var(--text-primary)]">{{ step.step }}</p>
+                <p class="text-[11px] text-[var(--text-muted)]">{{ step.result }} — {{ fmtDateTime(step.timestamp) }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="spd-overview-section">
+          <h3 class="spd-section-title">Información del Cliente</h3>
+          <div class="spd-info-grid">
+            <div class="spd-info-item">
+              <span class="spd-info-label">Nombre</span>
+              <span class="spd-info-value">{{ ticket.customerName }}</span>
+            </div>
+            <div class="spd-info-item">
+              <span class="spd-info-label">Email</span>
+              <span class="spd-info-value">{{ ticket.customerEmail ?? '—' }}</span>
+            </div>
+            <div class="spd-info-item">
+              <span class="spd-info-label">Teléfono</span>
+              <span class="spd-info-value">{{ ticket.customerPhone ?? '—' }}</span>
+            </div>
+            <div class="spd-info-item">
+              <span class="spd-info-label">Canal de entrada</span>
+              <span class="spd-info-value">{{ CHANNEL_LABELS[ticket.channel] }}</span>
+            </div>
+            <div class="spd-info-item">
+              <span class="spd-info-label">Intención</span>
+              <span class="spd-info-value">{{ INTENT_LABELS[ticket.intentCategory] }}</span>
+            </div>
+            <div class="spd-info-item">
+              <span class="spd-info-label">Cola</span>
+              <span class="spd-info-value">{{ QUEUE_LABELS[ticket.routedQueue] }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ═══════════ DOCUMENTS TAB ═══════════ -->
+      <div v-if="activeTab === 'documents'" class="spd-documents">
+        <div class="spd-docs-placeholder">
+          <UIcon name="i-heroicons-folder-open" class="w-8 h-8 text-[var(--text-muted)]" />
+          <p class="mt-2 text-sm font-medium text-[var(--text-primary)]">Documentos adjuntos</p>
+          <p class="mt-1 text-[12px] text-[var(--text-muted)]">Los archivos compartidos en la conversación aparecerán aquí. Funcionalidad de carga próximamente.</p>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* ══════════ BASE ══════════ */
+.spd-root { display: flex; flex-direction: column; gap: 20px; }
+
+.spd-not-found {
+  text-align: center; padding: 64px 24px;
+  display: flex; flex-direction: column; align-items: center; gap: 8px;
+  color: var(--text-muted);
+}
+.spd-not-found h2 { font-size: 18px; font-weight: 600; color: var(--text-primary); }
+
+.spd-back-link {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 12px; font-weight: 600; color: #01696f;
+  text-decoration: none;
+}
+.spd-back-link:hover { text-decoration: underline; }
+
+/* ══════════ HEADER ══════════ */
+.spd-detail-header {
+  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
+}
+.spd-header-left { flex: 1; min-width: 0; }
+.spd-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.spd-title { font-size: 24px; font-weight: 700; color: var(--text-primary); font-family: 'SF Mono', 'Fira Code', monospace; }
+.spd-header-meta {
+  margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+  font-size: 13px; color: var(--text-muted);
+}
+.spd-meta-sep { color: rgba(0,0,0,0.15); }
+.spd-meta-link { color: #01696f; text-decoration: none; font-weight: 500; }
+.spd-meta-link:hover { text-decoration: underline; }
+
+.spd-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
+.spd-action-btn {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 7px 12px; border-radius: 8px;
+  font-size: 12px; font-weight: 600;
+  background: #fff; color: var(--text-primary);
+  border: 1px solid rgba(0,0,0,0.1);
+  cursor: pointer; transition: all 150ms ease;
+}
+.spd-action-btn:hover { border-color: rgba(0,0,0,0.2); background: rgba(0,0,0,0.02); }
+.spd-action-btn-primary {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 7px 14px; border-radius: 8px;
+  font-size: 12px; font-weight: 600;
+  background: #01696f; color: #fff; border: none;
+  cursor: pointer; transition: all 150ms ease;
+}
+.spd-action-btn-primary:hover { background: #015458; }
+
+/* ── Status pill / Priority / Tier badges ── */
+.spd-status-pill {
+  display: inline-flex; padding: 2px 8px; border-radius: 9999px;
+  font-size: 11px; font-weight: 600; white-space: nowrap;
+}
+.spd-st-open { background: rgba(193,56,56,0.08); color: #c13838; }
+.spd-st-progress { background: rgba(194,123,26,0.08); color: #c27b1a; }
+.spd-st-pending { background: rgba(147,51,234,0.08); color: #9333ea; }
+.spd-st-resolved { background: rgba(0,0,0,0.04); color: #8a8a86; }
+
+.spd-priority-badge {
+  display: inline-flex; padding: 1px 7px; border-radius: 9999px;
+  font-size: 10px; font-weight: 600; white-space: nowrap;
+}
+.spd-pri-urgent { background: rgba(193,56,56,0.12); color: #c13838; }
+.spd-pri-high { background: rgba(194,123,26,0.08); color: #c27b1a; }
+.spd-pri-medium { background: rgba(0,0,0,0.05); color: #6b6b68; }
+.spd-pri-low { background: rgba(0,0,0,0.03); color: #8a8a86; }
+
+.spd-tier-badge {
+  display: inline-flex; padding: 2px 7px; border-radius: 8px;
+  font-size: 10px; font-weight: 600; white-space: nowrap;
+}
+.spd-tier-1 { background: rgba(16,185,129,0.08); color: #059669; }
+.spd-tier-2 { background: rgba(59,130,246,0.08); color: #2563eb; }
+.spd-tier-3 { background: rgba(194,123,26,0.08); color: #c27b1a; }
+
+/* ══════════ CONTEXT PANEL ══════════ */
+.spd-context-panel {
+  padding: 16px; border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+}
+.spd-context-title {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86; margin-bottom: 10px;
+}
+.spd-context-policies { display: flex; flex-direction: column; gap: 6px; }
+.spd-context-policy-row {
+  display: flex; align-items: center; gap: 12px;
+  padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,0.015);
+}
+.spd-context-pol-number {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px; font-weight: 600; color: #01696f;
+}
+.spd-context-pol-chip {
+  display: inline-flex; padding: 1px 6px; border-radius: 6px;
+  font-size: 10px; font-weight: 600;
+  background: rgba(1,105,111,0.06); color: #01696f;
+}
+.spd-context-claim {
+  display: flex; align-items: center; gap: 10px;
+  padding: 4px 10px; margin-top: 4px;
+}
+
+/* ══════════ QUICK STATS ══════════ */
+.spd-quick-strip {
+  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.06); overflow: hidden;
+}
+.spd-quick-item { padding: 12px 16px; background: #fff; }
+.spd-quick-item:first-child { border-radius: 12px 0 0 12px; }
+.spd-quick-item:last-child { border-radius: 0 12px 12px 0; }
+.spd-quick-label {
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+}
+.spd-quick-val {
+  margin-top: 2px; font-size: 18px; font-weight: 600;
+  color: var(--text-primary); font-variant-numeric: tabular-nums;
+}
+
+/* ══════════ AI PANEL ══════════ */
+.spd-ai-panel {
+  border-radius: 12px;
+  background: rgba(1,105,111,0.02);
+  border: 1px solid rgba(1,105,111,0.1);
+  border-left: 3px solid #01696f;
+  overflow: hidden;
+}
+.spd-ai-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 12px 16px;
+}
+.spd-ai-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; border-radius: 6px;
+  background: rgba(1,105,111,0.1); color: #01696f;
+  font-size: 10px; font-weight: 800;
+}
+.spd-ai-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
+.spd-ai-row { display: flex; flex-direction: column; gap: 4px; }
+.spd-ai-label {
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+}
+.spd-ai-confidence {
+  font-size: 11px; font-weight: 600; color: #059669;
+  background: rgba(5,150,105,0.08); padding: 1px 6px; border-radius: 6px;
+  display: inline-flex; width: fit-content;
+}
+
+/* ── Routing trace ── */
+.spd-routing-trace { display: flex; flex-direction: column; gap: 8px; padding-left: 4px; }
+.spd-trace-step { display: flex; align-items: flex-start; gap: 10px; }
+.spd-trace-dot {
+  width: 8px; height: 8px; border-radius: 50%; margin-top: 4px;
+  background: #01696f; flex-shrink: 0;
+}
+
+/* ══════════ TABS ══════════ */
+.spd-main-tabs {
+  display: flex; gap: 4px; border-bottom: 1px solid rgba(0,0,0,0.06);
+  padding-bottom: 0;
+}
+.spd-tab {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 10px 16px; font-size: 13px; font-weight: 500;
+  border: none; cursor: pointer;
+  background: transparent; border-bottom: 2px solid transparent;
+  transition: all 150ms ease; color: var(--text-muted);
+}
+.spd-tab-on { color: #01696f; border-bottom-color: #01696f; }
+.spd-tab-off:hover { color: var(--text-primary); }
+
+/* ══════════ THREAD ══════════ */
+.spd-thread {
+  display: flex; flex-direction: column; gap: 12px;
+}
+.spd-msg { display: flex; }
+
+/* System messages */
+.spd-msg-system { justify-content: center; }
+.spd-msg-system-inner {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 12px; border-radius: 8px;
+  background: rgba(0,0,0,0.03);
+  font-size: 11px; color: var(--text-muted);
+}
+
+/* Internal notes */
+.spd-msg-note { justify-content: center; }
+.spd-msg-note-inner {
+  max-width: 80%; padding: 10px 14px; border-radius: 10px;
+  background: rgba(250, 204, 21, 0.08);
+  border: 1px solid rgba(250, 204, 21, 0.2);
+}
+.spd-msg-note-header {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 12px; color: #92400e;
+}
+.spd-msg-note-body { margin-top: 4px; font-size: 13px; color: var(--text-primary); }
+
+/* Inbound messages — left aligned */
+.spd-msg-inbound { justify-content: flex-start; }
+
+/* Outbound messages — right aligned */
+.spd-msg-outbound { justify-content: flex-end; }
+
+/* Message bubbles (WhatsApp/phone) */
+.spd-msg-bubble {
+  max-width: 65%; padding: 8px 12px; border-radius: 12px;
+  position: relative;
+}
+.spd-bubble-inbound {
+  background: rgba(37, 211, 102, 0.08);
+  border: 1px solid rgba(37, 211, 102, 0.15);
+  border-bottom-left-radius: 4px;
+}
+.spd-bubble-outbound {
+  background: rgba(1, 105, 111, 0.06);
+  border: 1px solid rgba(1, 105, 111, 0.12);
+  border-bottom-right-radius: 4px;
+}
+.spd-bubble-from { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 2px; }
+.spd-bubble-body { font-size: 13px; color: var(--text-primary); line-height: 1.5; white-space: pre-wrap; }
+.spd-bubble-footer { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; }
+.spd-bubble-time { font-size: 10px; color: var(--text-muted); }
+.spd-delivery { font-size: 12px; }
+.spd-delivery-default { color: var(--text-muted); }
+.spd-delivery-read { color: #2563eb; }
+
+/* Email messages */
+.spd-msg-email {
+  max-width: 75%; padding: 12px 14px; border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06); background: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+.spd-email-inbound { border-bottom-left-radius: 4px; }
+.spd-email-outbound { border-bottom-right-radius: 4px; }
+.spd-email-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.spd-email-subject { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-top: 6px; }
+.spd-email-body { font-size: 13px; color: var(--text-primary); margin-top: 6px; line-height: 1.5; white-space: pre-wrap; }
+
+.spd-msg-time { font-size: 10px; color: var(--text-muted); }
+
+/* ══════════ COMPOSER ══════════ */
+.spd-composer {
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.08);
+  background: #fff; overflow: hidden;
+  position: sticky; bottom: 0;
+}
+.spd-composer-wa { border-color: rgba(37,211,102,0.3); }
+.spd-composer-note { border-color: rgba(250,204,21,0.3); background: rgba(250,204,21,0.02); }
+
+.spd-composer-channel-row {
+  display: flex; gap: 2px; padding: 8px 12px;
+  border-bottom: 1px solid rgba(0,0,0,0.04);
+}
+.spd-composer-ch-btn {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 4px 10px; border-radius: 6px;
+  font-size: 11px; font-weight: 600; border: none; cursor: pointer;
+  transition: all 150ms ease;
+}
+.spd-ch-active { background: #01696f; color: #fff; }
+.spd-composer-wa .spd-ch-active { background: #25D366; color: #fff; }
+.spd-composer-note .spd-ch-active { background: #d97706; color: #fff; }
+.spd-ch-inactive { background: transparent; color: var(--text-muted); }
+.spd-ch-inactive:hover { color: var(--text-primary); }
+
+.spd-composer-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; }
+.spd-composer-textarea {
+  flex: 1; resize: none; border: none; outline: none;
+  font-size: 13px; color: var(--text-primary);
+  background: transparent; font-family: inherit;
+  line-height: 1.5;
+}
+.spd-composer-textarea::placeholder { color: var(--text-muted); }
+.spd-composer-send {
+  width: 36px; height: 36px; border-radius: 50%;
+  background: #01696f; color: #fff; border: none;
+  display: flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: all 150ms ease; flex-shrink: 0;
+}
+.spd-composer-wa .spd-composer-send { background: #25D366; }
+.spd-composer-note .spd-composer-send { background: #d97706; }
+.spd-composer-send:hover { opacity: 0.85; }
+.spd-composer-send:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ══════════ OVERVIEW TAB ══════════ */
+.spd-overview { display: flex; flex-direction: column; gap: 24px; }
+.spd-overview-section { }
+.spd-section-title {
+  font-size: 14px; font-weight: 600; color: var(--text-primary);
+  margin-bottom: 12px;
+}
+.spd-info-grid {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
+}
+.spd-info-item {
+  padding: 10px 14px; border-radius: 8px;
+  background: rgba(0,0,0,0.015); border: 1px solid rgba(0,0,0,0.04);
+}
+.spd-info-label {
+  font-size: 10px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+}
+.spd-info-value { font-size: 13px; font-weight: 500; color: var(--text-primary); margin-top: 2px; }
+
+/* ══════════ DOCUMENTS TAB ══════════ */
+.spd-documents { }
+.spd-docs-placeholder {
+  text-align: center; padding: 48px 24px;
+  border-radius: 12px; border: 1px dashed rgba(0,0,0,0.1);
+  background: rgba(0,0,0,0.01);
+  display: flex; flex-direction: column; align-items: center;
+}
+
+@media (max-width: 640px) {
+  .spd-quick-strip { grid-template-columns: repeat(2, 1fr); }
+  .spd-info-grid { grid-template-columns: 1fr; }
+  .spd-msg-bubble, .spd-msg-email { max-width: 85%; }
+}
+</style>
diff --git a/app/pages/support/collectivos/[id].vue b/app/pages/support/collectivos/[id].vue
new file mode 100644
index 0000000..a982d64
--- /dev/null
+++ b/app/pages/support/collectivos/[id].vue
@@ -0,0 +1,2321 @@
+<script setup lang="ts">
+import type { DocumentCategory } from '~/composables/useColectivos'
+
+definePageMeta({ ssr: false })
+
+const route = useRoute()
+const id = route.params.id as string
+
+const { getAccount } = useColectivos()
+
+/* ── Resolve account ── */
+const account = computed(() => getAccount(id) ?? null)
+
+usePageTitle(computed(() => account.value ? `${account.value.name} · Collectivo` : 'Account Not Found'))
+
+/* ── Tabs ── */
+const activeTab = ref<'members' | 'inclusions' | 'billing' | 'claims' | 'certificates' | 'amendments' | 'documents' | 'census'>('members')
+
+const tabs = [
+  { key: 'members', label: 'Members' },
+  { key: 'census', label: 'Census' },
+  { key: 'inclusions', label: 'Inclusions & Exclusions' },
+  { key: 'billing', label: 'Billing' },
+  { key: 'claims', label: 'Claims' },
+  { key: 'certificates', label: 'Certificates' },
+  { key: 'amendments', label: 'Amendments' },
+  { key: 'documents', label: 'Documents' },
+] as const
+
+/* ── Members tab ── */
+const memberSearch = ref('')
+const memberStatusFilter = ref<'all' | string>('all')
+
+const filteredMembers = computed(() => {
+  if (!account.value) return []
+  let rows = [...account.value.members]
+  if (memberStatusFilter.value !== 'all') rows = rows.filter(m => m.status === memberStatusFilter.value)
+  const t = memberSearch.value.trim().toLowerCase()
+  if (t) rows = rows.filter(m =>
+    m.name.toLowerCase().includes(t) ||
+    m.documentId.toLowerCase().includes(t) ||
+    m.email.toLowerCase().includes(t) ||
+    m.department.toLowerCase().includes(t)
+  )
+  return rows
+})
+
+const enrollmentProgress = computed(() => {
+  if (!account.value) return { enrolled: 0, total: 0, pct: 0 }
+  const total = account.value.totalMembers
+  const enrolled = account.value.activeMembersCount
+  return { enrolled, total, pct: total > 0 ? Math.round((enrolled / total) * 100) : 0 }
+})
+
+/* ── Census Reconciliation ── */
+interface CensusRow {
+  documentId: string
+  name: string
+  department: string
+  role: string
+  tier: string
+  dependents: number
+}
+
+type ReconciliationStatus = 'matched' | 'new_in_census' | 'missing_from_census' | 'changed'
+
+interface ReconciliationRow {
+  documentId: string
+  name: string
+  status: ReconciliationStatus
+  currentDept?: string
+  censusDept?: string
+  currentRole?: string
+  censusRole?: string
+  currentTier?: string
+  censusTier?: string
+  currentDeps?: number
+  censusDeps?: number
+  changes: string[]
+}
+
+const censusFile = ref<File | null>(null)
+const censusFileName = ref('')
+const censusReconciled = ref<ReconciliationRow[]>([])
+const censusStep = ref<'upload' | 'review' | 'applied'>('upload')
+
+function onCensusFileSelect(e: Event) {
+  const input = e.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+  censusFile.value = file
+  censusFileName.value = file.name
+  simulateCensusParse()
+}
+
+function simulateCensusParse() {
+  if (!account.value) return
+  const members = account.value.members
+  const rows: ReconciliationRow[] = []
+
+  for (const m of members) {
+    if (m.id === members[members.length - 1]?.id) {
+      rows.push({
+        documentId: m.documentId, name: m.name, status: 'missing_from_census',
+        currentDept: m.department, currentRole: m.role,
+        changes: ['Not found in uploaded census — possible termination'],
+      })
+    } else if (m.id === members[2]?.id) {
+      rows.push({
+        documentId: m.documentId, name: m.name, status: 'changed',
+        currentDept: m.department, censusDept: 'Dirección Comercial',
+        currentRole: m.role, censusRole: m.role,
+        currentTier: m.tier, censusTier: m.tier,
+        currentDeps: m.dependents, censusDeps: m.dependents,
+        changes: [`Department: ${m.department} → Dirección Comercial`],
+      })
+    } else {
+      rows.push({ documentId: m.documentId, name: m.name, status: 'matched', changes: [] })
+    }
+  }
+
+  rows.push({
+    documentId: '9.111.222', name: 'Alejandro Núñez', status: 'new_in_census',
+    censusDept: 'Ventas', censusRole: 'Ejecutivo de Cuenta', censusTier: 'Basic', censusDeps: 1,
+    changes: ['New employee — requires enrollment'],
+  })
+  rows.push({
+    documentId: '9.333.444', name: 'Camila Ferreira', status: 'new_in_census',
+    censusDept: 'Tecnología', censusRole: 'QA Analyst', censusTier: 'Basic', censusDeps: 0,
+    changes: ['New employee — requires enrollment'],
+  })
+
+  censusReconciled.value = rows
+  censusStep.value = 'review'
+}
+
+function resetCensus() {
+  censusFile.value = null
+  censusFileName.value = ''
+  censusReconciled.value = []
+  censusStep.value = 'upload'
+}
+
+const censusStats = computed(() => {
+  const rows = censusReconciled.value
+  return {
+    matched: rows.filter(r => r.status === 'matched').length,
+    changed: rows.filter(r => r.status === 'changed').length,
+    newInCensus: rows.filter(r => r.status === 'new_in_census').length,
+    missing: rows.filter(r => r.status === 'missing_from_census').length,
+    total: rows.length,
+  }
+})
+
+/* ── Renewal ring ── */
+const renewalDays = computed(() => account.value ? daysUntil(account.value.renewalDate) : 0)
+const renewalPct = computed(() => {
+  const d = renewalDays.value
+  if (d <= 0) return 100
+  if (d >= 365) return 0
+  return Math.round(((365 - d) / 365) * 100)
+})
+const renewalStroke = computed(() => {
+  const circ = 2 * Math.PI * 38 // radius 38
+  const pct = renewalPct.value
+  return { dasharray: `${circ}`, dashoffset: `${circ - (circ * pct) / 100}` }
+})
+
+function reconciliationBadgeClass(s: ReconciliationStatus) {
+  switch (s) {
+    case 'matched': return 'ga-badge-active'
+    case 'new_in_census': return 'ga-badge-open'
+    case 'missing_from_census': return 'ga-badge-excluded'
+    case 'changed': return 'ga-badge-pending'
+  }
+}
+
+function reconciliationLabel(s: ReconciliationStatus) {
+  switch (s) {
+    case 'matched': return 'Matched'
+    case 'new_in_census': return 'New (Inclusion)'
+    case 'missing_from_census': return 'Missing (Exclusion)'
+    case 'changed': return 'Changed'
+  }
+}
+
+/* ── Inclusions & Exclusions ── */
+const inclusions = computed(() =>
+  (account.value?.serviceRequests ?? []).filter(r => r.type === 'inclusion')
+)
+const exclusions = computed(() =>
+  (account.value?.serviceRequests ?? []).filter(r => r.type === 'exclusion')
+)
+
+/* ── Billing ── */
+const currentBilling = computed(() => (account.value?.billingCycles ?? [])[0] ?? null)
+
+/* ── Claims ── */
+const allClaims = computed(() =>
+  (account.value?.serviceRequests ?? []).filter(r => r.type === 'claim')
+)
+const claimSearch = ref('')
+const claimStatusFilter = ref<'all' | string>('all')
+const claimPriorityFilter = ref<'all' | string>('all')
+const claimSortField = ref<'created' | 'priority' | 'status'>('created')
+const claimSortDir = ref<'asc' | 'desc'>('desc')
+
+function toggleClaimSort(field: 'created' | 'priority' | 'status') {
+  if (claimSortField.value === field) {
+    claimSortDir.value = claimSortDir.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    claimSortField.value = field
+    claimSortDir.value = field === 'created' ? 'desc' : 'asc'
+  }
+}
+
+const claims = computed(() => {
+  let rows = [...allClaims.value]
+  if (claimStatusFilter.value !== 'all') rows = rows.filter(c => c.status === claimStatusFilter.value)
+  if (claimPriorityFilter.value !== 'all') rows = rows.filter(c => c.priority === claimPriorityFilter.value)
+  const t = claimSearch.value.trim().toLowerCase()
+  if (t) rows = rows.filter(c =>
+    c.id.toLowerCase().includes(t) ||
+    c.subject.toLowerCase().includes(t) ||
+    (c.memberName ?? '').toLowerCase().includes(t) ||
+    c.assignee.toLowerCase().includes(t)
+  )
+  const priorityOrder: Record<string, number> = { urgent: 0, high: 1, medium: 2, low: 3 }
+  const statusOrder: Record<string, number> = { open: 0, in_progress: 1, pending_carrier: 2, pending_client: 3, resolved: 4, cancelled: 5 }
+  rows.sort((a, b) => {
+    let cmp = 0
+    if (claimSortField.value === 'created') cmp = new Date(a.created).getTime() - new Date(b.created).getTime()
+    else if (claimSortField.value === 'priority') cmp = (priorityOrder[a.priority] ?? 9) - (priorityOrder[b.priority] ?? 9)
+    else if (claimSortField.value === 'status') cmp = (statusOrder[a.status] ?? 9) - (statusOrder[b.status] ?? 9)
+    return claimSortDir.value === 'asc' ? cmp : -cmp
+  })
+  return rows
+})
+
+/* ── Certificates ── */
+const certificates = computed(() =>
+  (account.value?.serviceRequests ?? []).filter(r => r.type === 'certificate')
+)
+
+/* ── Amendments ── */
+const amendments = computed(() =>
+  (account.value?.serviceRequests ?? []).filter(r => r.type === 'amendment')
+)
+
+/* ── Pending tasks (from open service requests) ── */
+const openServiceRequests = computed(() =>
+  (account.value?.serviceRequests ?? []).filter(r => r.status === 'open' || r.status === 'in_progress' || r.status === 'pending_carrier' || r.status === 'pending_client')
+)
+
+/* ── Documents ── */
+const docCategoryFilter = ref<'all' | DocumentCategory>('all')
+const docCategories: { label: string; value: 'all' | DocumentCategory }[] = [
+  { label: 'All', value: 'all' },
+  { label: 'Policy', value: 'policy' },
+  { label: 'Contract', value: 'contract' },
+  { label: 'Endorsement', value: 'endorsement' },
+  { label: 'Certificate', value: 'certificate' },
+  { label: 'Census', value: 'census' },
+  { label: 'Siniestralidad', value: 'siniestralidad' },
+  { label: 'Amendment', value: 'amendment' },
+  { label: 'Enrollment', value: 'enrollment' },
+  { label: 'Correspondence', value: 'correspondence' },
+  { label: 'Other', value: 'other' },
+]
+
+const filteredDocuments = computed(() => {
+  if (!account.value) return []
+  if (docCategoryFilter.value === 'all') return account.value.documents
+  return account.value.documents.filter(d => d.category === docCategoryFilter.value)
+})
+
+const docCategoryCounts = computed(() => {
+  if (!account.value) return {}
+  const counts: Record<string, number> = {}
+  for (const d of account.value.documents) {
+    counts[d.category] = (counts[d.category] ?? 0) + 1
+  }
+  return counts
+})
+
+/* ── Helpers ── */
+function fmtMoney(v: number) {
+  return v.toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2 })
+}
+
+function fmtDate(d: string) {
+  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+function fmtDateShort(d: string) {
+  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+function daysUntil(d: string) {
+  const diff = new Date(d).getTime() - Date.now()
+  return Math.ceil(diff / (1000 * 60 * 60 * 24))
+}
+
+function renewalColor(days: number) {
+  if (days <= 30) return 'ga-renewal-urgent'
+  if (days <= 90) return 'ga-renewal-warning'
+  return 'ga-renewal-ok'
+}
+
+function statusBadgeClass(s: string) {
+  switch (s) {
+    case 'active': case 'paid': case 'reconciled': return 'ga-badge-active'
+    case 'pending': case 'pending_enrollment': case 'pending_docs': case 'pending_carrier': case 'pending_client': case 'invoiced': case 'upcoming': return 'ga-badge-pending'
+    case 'excluded': case 'suspended': case 'cancelled': case 'overdue': return 'ga-badge-excluded'
+    case 'open': case 'quoting': case 'onboarding': case 'renewal_due': return 'ga-badge-open'
+    case 'in_progress': case 'on_leave': case 'disputed': return 'ga-badge-in-progress'
+    case 'resolved': return 'ga-badge-resolved'
+    default: return 'ga-badge-pending'
+  }
+}
+
+function statusLabel(s: string) {
+  const map: Record<string, string> = {
+    active: 'Active', pending: 'Pending', pending_enrollment: 'Pending Enrollment',
+    pending_docs: 'Pending Docs', excluded: 'Excluded', suspended: 'Suspended',
+    cancelled: 'Cancelled', on_leave: 'On Leave', open: 'Open', in_progress: 'In Progress',
+    pending_carrier: 'Pending Carrier', pending_client: 'Pending Client', resolved: 'Resolved',
+    paid: 'Paid', invoiced: 'Invoiced', overdue: 'Overdue', upcoming: 'Upcoming',
+    disputed: 'Disputed', reconciled: 'Reconciled',
+    quoting: 'Quoting', onboarding: 'Onboarding', renewal_due: 'Renewal Due',
+  }
+  return map[s] ?? s
+}
+
+function priorityDot(p: string) {
+  if (p === 'urgent' || p === 'high') return 'ga-priority-urgent'
+  if (p === 'medium' || p === 'normal') return 'ga-priority-normal'
+  return 'ga-priority-low'
+}
+
+function taskStatusIcon(s: string) {
+  if (s === 'in_progress') return 'i-heroicons-arrow-path'
+  if (s === 'pending_carrier' || s === 'pending_client') return 'i-heroicons-clock'
+  return 'i-heroicons-exclamation-circle'
+}
+
+function taskStatusColor(s: string) {
+  if (s === 'in_progress') return 'color: var(--brand)'
+  if (s === 'pending_carrier' || s === 'pending_client') return 'color: var(--warning)'
+  return 'color: var(--text-muted)'
+}
+
+function activityTypeIcon(t: string) {
+  const map: Record<string, string> = {
+    inclusion: 'i-heroicons-user-plus',
+    exclusion: 'i-heroicons-user-minus',
+    claim: 'i-heroicons-document-text',
+    billing: 'i-heroicons-banknotes',
+    certificate: 'i-heroicons-document-check',
+    amendment: 'i-heroicons-pencil-square',
+    document: 'i-heroicons-folder-open',
+  }
+  return map[t] ?? 'i-heroicons-bell'
+}
+
+function docCategoryBadge(c: DocumentCategory) {
+  const map: Record<string, string> = {
+    policy: 'ga-doc-policy', contract: 'ga-doc-contract', endorsement: 'ga-doc-endorsement',
+    certificate: 'ga-doc-certificate', census: 'ga-doc-census', siniestralidad: 'ga-doc-siniestralidad',
+    amendment: 'ga-doc-endorsement', enrollment: 'ga-doc-enrollment',
+    correspondence: 'ga-doc-contract', other: 'ga-doc-other',
+  }
+  return map[c] ?? 'ga-doc-other'
+}
+
+function docCategoryLabel(c: DocumentCategory) {
+  const map: Record<string, string> = {
+    policy: 'Policy', contract: 'Contract', endorsement: 'Endorsement',
+    certificate: 'Certificate', census: 'Census', siniestralidad: 'Siniestralidad',
+    amendment: 'Amendment', enrollment: 'Enrollment',
+    correspondence: 'Correspondence', other: 'Other',
+  }
+  return map[c] ?? c
+}
+</script>
+
+<template>
+  <!-- Account not found -->
+  <div v-if="!account" class="ga-not-found">
+    <UIcon name="i-heroicons-exclamation-triangle" class="ga-not-found-icon" />
+    <h2 class="ga-not-found-title">Account not found</h2>
+    <p class="ga-not-found-text">No collectivo account matches ID "{{ id }}".</p>
+    <NuxtLink to="/support/collectivos" class="ga-not-found-link">
+      <UIcon name="i-heroicons-arrow-left" class="ga-inline-icon" />
+      Back to Collectivos
+    </NuxtLink>
+  </div>
+
+  <!-- Main content -->
+  <div v-else class="ga-page">
+    <!-- ── 1. Back + Header ── -->
+    <div class="ga-header-section">
+      <NuxtLink to="/support/collectivos" class="ga-back-link">
+        <UIcon name="i-heroicons-arrow-left" class="ga-inline-icon" />
+        Collectivos
+      </NuxtLink>
+
+      <div class="ga-header-row">
+        <div class="ga-header-info">
+          <div class="ga-header-title-row">
+            <h1 class="ga-company-name">{{ account.name }}</h1>
+            <span class="ga-lob-badge">{{ account.lob }}</span>
+            <span class="ga-status-badge" :class="statusBadgeClass(account.status)">{{ statusLabel(account.status) }}</span>
+            <span class="ga-carrier-name">{{ account.carrier }}</span>
+          </div>
+          <p class="ga-subtitle">
+            {{ account.product }}
+            <span class="ga-sep">&middot;</span>
+            RUC {{ account.ruc }}
+            <span class="ga-sep">&middot;</span>
+            Agent: {{ account.agent }}
+          </p>
+        </div>
+        <div class="ga-header-actions">
+          <UButton icon="i-heroicons-pencil-square" color="neutral" variant="soft" size="sm">Edit</UButton>
+          <UButton icon="i-heroicons-arrow-path" color="neutral" variant="soft" size="sm">Renewal</UButton>
+          <UButton icon="i-heroicons-document-arrow-down" color="primary" size="sm">Generate Report</UButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── 2. Account Summary ── -->
+    <div class="ga-summary-card">
+      <div class="ga-summary-accent" />
+      <div class="ga-summary-body">
+        <!-- Left: People cluster -->
+        <div class="ga-sc-section">
+          <div class="ga-sc-hero">
+            <span class="ga-sc-hero-value">{{ account.totalMembers }}</span>
+            <span class="ga-sc-hero-unit">members</span>
+          </div>
+          <div class="ga-sc-sub-row">
+            <div class="ga-sc-chip">
+              <span class="ga-sc-chip-dot ga-sc-chip-dot--active" />
+              <span class="ga-sc-chip-text">{{ account.activeMembersCount }} active</span>
+            </div>
+            <div class="ga-sc-chip">
+              <span class="ga-sc-chip-dot ga-sc-chip-dot--muted" />
+              <span class="ga-sc-chip-text">{{ account.dependentsCount }} dependents</span>
+            </div>
+            <div v-if="account.pendingEnrollment > 0" class="ga-sc-chip ga-sc-chip--warn">
+              <span class="ga-sc-chip-dot ga-sc-chip-dot--warn" />
+              <span class="ga-sc-chip-text">{{ account.pendingEnrollment }} pending</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="ga-sc-divider" />
+
+        <!-- Center: Financials -->
+        <div class="ga-sc-section ga-sc-section--financials">
+          <div class="ga-sc-fin-grid">
+            <div class="ga-sc-fin">
+              <span class="ga-sc-fin-label">Monthly premium</span>
+              <span class="ga-sc-fin-value">{{ fmtMoney(account.monthlyPremium) }}</span>
+            </div>
+            <div class="ga-sc-fin">
+              <span class="ga-sc-fin-label">Annual premium</span>
+              <span class="ga-sc-fin-value">{{ fmtMoney(account.annualPremium) }}</span>
+            </div>
+            <div class="ga-sc-fin">
+              <span class="ga-sc-fin-label">Commission</span>
+              <span class="ga-sc-fin-value">{{ account.commissionPct }}%</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="ga-sc-divider" />
+
+        <!-- Right: Renewal ring -->
+        <div class="ga-sc-section ga-sc-section--renewal">
+          <div class="ga-sc-ring-wrap">
+            <svg class="ga-sc-ring" viewBox="0 0 88 88">
+              <circle cx="44" cy="44" r="38" fill="none" stroke-width="4" class="ga-sc-ring-track" />
+              <circle
+                cx="44" cy="44" r="38" fill="none" stroke-width="4"
+                class="ga-sc-ring-fill"
+                :class="renewalColor(renewalDays)"
+                :stroke-dasharray="renewalStroke.dasharray"
+                :stroke-dashoffset="renewalStroke.dashoffset"
+                stroke-linecap="round"
+                transform="rotate(-90 44 44)"
+              />
+            </svg>
+            <div class="ga-sc-ring-center">
+              <span class="ga-sc-ring-days" :class="renewalColor(renewalDays)">{{ renewalDays }}</span>
+              <span class="ga-sc-ring-unit">days</span>
+            </div>
+          </div>
+          <div class="ga-sc-renewal-meta">
+            <span class="ga-sc-renewal-label">Renewal</span>
+            <span class="ga-sc-renewal-date">{{ fmtDate(account.renewalDate) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Main layout: tabs + sidebar ── -->
+    <div class="ga-main-layout">
+      <!-- ── 3. Tabbed Content ── -->
+      <div class="ga-tabs-area">
+        <!-- Tab toggle -->
+        <div class="ga-tab-bar">
+          <button
+            v-for="tab in tabs"
+            :key="tab.key"
+            type="button"
+            class="ga-tab-btn"
+            :class="{ 'ga-tab-btn-active': activeTab === tab.key }"
+            @click="activeTab = tab.key"
+          >
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <!-- ═══ Members Tab ═══ -->
+        <div v-if="activeTab === 'members'" class="ga-tab-panel">
+          <!-- Enrollment progress -->
+          <div class="ga-enrollment-bar-card">
+            <div class="ga-enrollment-header">
+              <span class="ga-enrollment-text">
+                {{ enrollmentProgress.enrolled }} of {{ enrollmentProgress.total }} members fully enrolled
+                <strong>({{ enrollmentProgress.pct }}%)</strong>
+              </span>
+            </div>
+            <div class="ga-progress-track">
+              <div class="ga-progress-fill" :style="{ width: enrollmentProgress.pct + '%' }" />
+            </div>
+          </div>
+
+          <!-- Search + filters + actions -->
+          <div class="ga-toolbar">
+            <UInput
+              v-model="memberSearch"
+              icon="i-heroicons-magnifying-glass"
+              placeholder="Search members..."
+              class="ga-toolbar-search"
+            />
+            <div class="ga-toolbar-filter-group">
+              <button
+                v-for="opt in ([
+                  { label: 'All', value: 'all' },
+                  { label: 'Active', value: 'active' },
+                  { label: 'Pending Enrollment', value: 'pending_enrollment' },
+                  { label: 'Pending Docs', value: 'pending_docs' },
+                  { label: 'On Leave', value: 'on_leave' },
+                  { label: 'Excluded', value: 'excluded' },
+                ] as const)"
+                :key="opt.value"
+                type="button"
+                class="ga-filter-chip"
+                :class="{ 'ga-filter-chip-active': memberStatusFilter === opt.value }"
+                @click="memberStatusFilter = opt.value"
+              >
+                {{ opt.label }}
+              </button>
+            </div>
+            <div class="ga-toolbar-actions">
+              <UButton icon="i-heroicons-arrow-up-tray" color="neutral" variant="soft" size="sm" @click="activeTab = 'census'">Upload Census</UButton>
+              <UButton icon="i-heroicons-user-plus" color="primary" size="sm">Add Member</UButton>
+            </div>
+          </div>
+
+          <!-- Members table -->
+          <div class="ga-table-wrap">
+            <table class="ga-table">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Document ID</th>
+                  <th>Email</th>
+                  <th>Department</th>
+                  <th>Role</th>
+                  <th>Tier</th>
+                  <th class="ga-th-center">Deps</th>
+                  <th>Enrolled</th>
+                  <th>Status</th>
+                  <th class="ga-th-center">Forms</th>
+                  <th class="ga-th-center">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="m in filteredMembers" :key="m.id">
+                  <td class="ga-td-name">
+                    {{ m.name }}
+                    <span v-if="m.pendingDocs.length > 0" class="ga-pending-docs-dot" title="Pending documents" />
+                  </td>
+                  <td class="ga-td-mono">{{ m.documentId }}</td>
+                  <td class="ga-td-small">{{ m.email }}</td>
+                  <td>{{ m.department }}</td>
+                  <td>{{ m.role }}</td>
+                  <td><span class="ga-tier-badge">{{ m.tier }}</span></td>
+                  <td class="ga-td-center">{{ m.dependents }}</td>
+                  <td class="ga-td-small">{{ fmtDateShort(m.enrollmentDate) }}</td>
+                  <td><span class="ga-status-pill" :class="statusBadgeClass(m.status)">{{ statusLabel(m.status) }}</span></td>
+                  <td class="ga-td-center">
+                    <span :class="m.formsCompleted === m.formsTotal ? 'ga-forms-complete' : 'ga-forms-incomplete'">
+                      {{ m.formsCompleted }}/{{ m.formsTotal }}
+                    </span>
+                  </td>
+                  <td class="ga-td-center">
+                    <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-ellipsis-horizontal" />
+                  </td>
+                </tr>
+                <tr v-if="filteredMembers.length === 0">
+                  <td colspan="11" class="ga-empty-row">No members match your search.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- ═══ Census Reconciliation Tab ═══ -->
+        <div v-if="activeTab === 'census'" class="ga-tab-panel">
+          <!-- Step 1: Upload -->
+          <div v-if="censusStep === 'upload'" class="ga-census-upload">
+            <div class="ga-census-upload-card">
+              <div class="ga-census-upload-icon-area">
+                <UIcon name="i-heroicons-arrow-up-tray" class="ga-census-upload-icon" />
+              </div>
+              <h3 class="ga-census-upload-title">Upload Monthly Census</h3>
+              <p class="ga-census-upload-desc">
+                Upload the employee census (Excel or CSV) provided by the client's HR department.
+                The system will compare it against the current roster and flag new hires, terminations, and changes.
+              </p>
+              <div class="ga-census-upload-formats">
+                <span class="ga-census-format-badge">XLSX</span>
+                <span class="ga-census-format-badge">XLS</span>
+                <span class="ga-census-format-badge">CSV</span>
+              </div>
+              <label class="ga-census-upload-btn">
+                <UIcon name="i-heroicons-folder-open" class="ga-inline-icon" />
+                Choose file
+                <input type="file" accept=".xlsx,.xls,.csv" class="sr-only" @change="onCensusFileSelect" />
+              </label>
+              <p class="ga-census-upload-hint">Expected columns: Document ID, Name, Department, Role, Tier, Dependents</p>
+            </div>
+
+            <!-- Previous census uploads -->
+            <div class="ga-census-history">
+              <h4 class="ga-census-history-title">Previous Census Uploads</h4>
+              <div class="ga-table-wrap">
+                <table class="ga-table">
+                  <thead>
+                    <tr>
+                      <th>File</th>
+                      <th>Period</th>
+                      <th>Uploaded By</th>
+                      <th>Date</th>
+                      <th>Result</th>
+                      <th class="ga-th-center">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td class="ga-td-name">
+                        <UIcon name="i-heroicons-document" class="ga-doc-icon" />
+                        Censo Marzo 2026.xlsx
+                      </td>
+                      <td>March 2026</td>
+                      <td>Silvia Acosta</td>
+                      <td class="ga-td-small">Mar 5</td>
+                      <td>
+                        <span class="ga-status-pill ga-badge-active">3 inclusions, 0 exclusions</span>
+                      </td>
+                      <td class="ga-td-center">
+                        <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-arrow-down-tray" title="Download" />
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="ga-td-name">
+                        <UIcon name="i-heroicons-document" class="ga-doc-icon" />
+                        Censo Febrero 2026.xlsx
+                      </td>
+                      <td>February 2026</td>
+                      <td>Silvia Acosta</td>
+                      <td class="ga-td-small">Feb 3</td>
+                      <td>
+                        <span class="ga-status-pill ga-badge-active">2 inclusions, 1 exclusion</span>
+                      </td>
+                      <td class="ga-td-center">
+                        <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-arrow-down-tray" title="Download" />
+                      </td>
+                    </tr>
+                    <tr>
+                      <td class="ga-td-name">
+                        <UIcon name="i-heroicons-document" class="ga-doc-icon" />
+                        Censo Enero 2026.xlsx
+                      </td>
+                      <td>January 2026</td>
+                      <td>Carlos Villalba</td>
+                      <td class="ga-td-small">Jan 6</td>
+                      <td>
+                        <span class="ga-status-pill ga-badge-active">0 changes</span>
+                      </td>
+                      <td class="ga-td-center">
+                        <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-arrow-down-tray" title="Download" />
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+
+          <!-- Step 2: Review reconciliation -->
+          <div v-else-if="censusStep === 'review'">
+            <!-- File info + reset -->
+            <div class="ga-census-file-bar">
+              <div class="ga-census-file-info">
+                <UIcon name="i-heroicons-document-check" class="ga-census-file-icon" />
+                <div>
+                  <p class="ga-census-file-name">{{ censusFileName }}</p>
+                  <p class="ga-census-file-meta">Parsed {{ censusStats.total }} rows — review differences below</p>
+                </div>
+              </div>
+              <UButton icon="i-heroicons-x-mark" color="neutral" variant="soft" size="sm" @click="resetCensus">Reset</UButton>
+            </div>
+
+            <!-- Reconciliation stats -->
+            <div class="ga-census-stats">
+              <div class="ga-census-stat ga-census-stat-matched">
+                <span class="ga-census-stat-value">{{ censusStats.matched }}</span>
+                <span class="ga-census-stat-label">Matched</span>
+              </div>
+              <div class="ga-census-stat ga-census-stat-changed">
+                <span class="ga-census-stat-value">{{ censusStats.changed }}</span>
+                <span class="ga-census-stat-label">Changed</span>
+              </div>
+              <div class="ga-census-stat ga-census-stat-new">
+                <span class="ga-census-stat-value">{{ censusStats.newInCensus }}</span>
+                <span class="ga-census-stat-label">New (Inclusions)</span>
+              </div>
+              <div class="ga-census-stat ga-census-stat-missing">
+                <span class="ga-census-stat-value">{{ censusStats.missing }}</span>
+                <span class="ga-census-stat-label">Missing (Exclusions)</span>
+              </div>
+            </div>
+
+            <!-- Reconciliation table -->
+            <div class="ga-table-wrap">
+              <table class="ga-table">
+                <thead>
+                  <tr>
+                    <th>Document ID</th>
+                    <th>Name</th>
+                    <th>Status</th>
+                    <th>Details</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="row in censusReconciled" :key="row.documentId" :class="{ 'ga-census-row-action': row.status !== 'matched' }">
+                    <td class="ga-td-mono">{{ row.documentId }}</td>
+                    <td class="ga-td-name">{{ row.name }}</td>
+                    <td>
+                      <span class="ga-status-pill" :class="reconciliationBadgeClass(row.status)">
+                        {{ reconciliationLabel(row.status) }}
+                      </span>
+                    </td>
+                    <td class="ga-td-small">
+                      <template v-if="row.changes.length">
+                        <span v-for="(c, ci) in row.changes" :key="ci" class="ga-census-change-line">{{ c }}</span>
+                      </template>
+                      <span v-else class="ga-census-no-change">No differences</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <!-- Action buttons -->
+            <div class="ga-census-actions">
+              <UButton color="neutral" variant="soft" @click="resetCensus">Cancel</UButton>
+              <UButton color="primary" icon="i-heroicons-check" @click="censusStep = 'applied'">
+                Apply Changes & Generate Requests
+              </UButton>
+            </div>
+          </div>
+
+          <!-- Step 3: Applied -->
+          <div v-else-if="censusStep === 'applied'" class="ga-census-applied">
+            <div class="ga-census-applied-card">
+              <div class="ga-census-applied-icon-area">
+                <UIcon name="i-heroicons-check-circle" class="ga-census-applied-icon" />
+              </div>
+              <h3 class="ga-census-upload-title">Census Reconciled</h3>
+              <p class="ga-census-upload-desc">
+                {{ censusStats.newInCensus }} inclusion request(s) and {{ censusStats.missing }} exclusion request(s) have been created.
+                Changed records have been flagged for review.
+              </p>
+              <div class="ga-census-applied-actions">
+                <UButton color="neutral" variant="soft" @click="resetCensus">Upload Another Census</UButton>
+                <UButton color="primary" variant="soft" @click="activeTab = 'inclusions'">View Inclusions & Exclusions</UButton>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══ Inclusions & Exclusions Tab ═══ -->
+        <div v-if="activeTab === 'inclusions'" class="ga-tab-panel">
+          <!-- Inclusions -->
+          <div class="ga-ie-section">
+            <div class="ga-ie-header">
+              <h3 class="ga-ie-title">
+                Inclusions
+                <span class="ga-ie-count">{{ inclusions.length }}</span>
+              </h3>
+              <UButton icon="i-heroicons-user-plus" color="primary" size="sm">New Inclusion</UButton>
+            </div>
+            <div class="ga-table-wrap">
+              <table class="ga-table">
+                <thead>
+                  <tr>
+                    <th>ID</th>
+                    <th>Member / Subject</th>
+                    <th>Effective Date</th>
+                    <th>Docs Status</th>
+                    <th>Status</th>
+                    <th>Assignee</th>
+                    <th>Created</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="r in inclusions" :key="r.id">
+                    <td class="ga-td-mono">{{ r.id }}</td>
+                    <td>
+                      <div class="ga-td-name">{{ r.subject }}</div>
+                      <div v-if="r.memberName" class="ga-td-sub">{{ r.memberName }}</div>
+                    </td>
+                    <td>{{ r.effectiveDate ? fmtDateShort(r.effectiveDate) : '\u2014' }}</td>
+                    <td>{{ r.docsStatus ?? '\u2014' }}</td>
+                    <td><span class="ga-status-pill" :class="statusBadgeClass(r.status)">{{ statusLabel(r.status) }}</span></td>
+                    <td>{{ r.assignee }}</td>
+                    <td class="ga-td-small">{{ fmtDateShort(r.created) }}</td>
+                  </tr>
+                  <tr v-if="inclusions.length === 0">
+                    <td colspan="7" class="ga-empty-row">No inclusion requests.</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <!-- Exclusions -->
+          <div class="ga-ie-section">
+            <div class="ga-ie-header">
+              <h3 class="ga-ie-title">
+                Exclusions
+                <span class="ga-ie-count">{{ exclusions.length }}</span>
+              </h3>
+              <UButton icon="i-heroicons-user-minus" color="neutral" variant="soft" size="sm">New Exclusion</UButton>
+            </div>
+            <div class="ga-table-wrap">
+              <table class="ga-table">
+                <thead>
+                  <tr>
+                    <th>ID</th>
+                    <th>Member / Subject</th>
+                    <th>Last Day</th>
+                    <th>Reason</th>
+                    <th>Status</th>
+                    <th>Assignee</th>
+                    <th>Created</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="r in exclusions" :key="r.id">
+                    <td class="ga-td-mono">{{ r.id }}</td>
+                    <td>
+                      <div class="ga-td-name">{{ r.subject }}</div>
+                      <div v-if="r.memberName" class="ga-td-sub">{{ r.memberName }}</div>
+                    </td>
+                    <td>{{ r.lastDay ? fmtDateShort(r.lastDay) : '\u2014' }}</td>
+                    <td>{{ r.reason ?? '\u2014' }}</td>
+                    <td><span class="ga-status-pill" :class="statusBadgeClass(r.status)">{{ statusLabel(r.status) }}</span></td>
+                    <td>{{ r.assignee }}</td>
+                    <td class="ga-td-small">{{ fmtDateShort(r.created) }}</td>
+                  </tr>
+                  <tr v-if="exclusions.length === 0">
+                    <td colspan="7" class="ga-empty-row">No exclusion requests.</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══ Billing Tab ═══ -->
+        <div v-if="activeTab === 'billing'" class="ga-tab-panel">
+          <!-- Current month summary -->
+          <div v-if="currentBilling" class="ga-billing-summary-card">
+            <div class="ga-billing-summary-header">
+              <h3 class="ga-billing-summary-title">Current Billing Period: {{ currentBilling.period }}</h3>
+              <span class="ga-status-pill" :class="statusBadgeClass(currentBilling.status)">{{ statusLabel(currentBilling.status) }}</span>
+            </div>
+            <div class="ga-billing-summary-grid">
+              <div>
+                <span class="ga-kpi-label">Invoice Amount</span>
+                <span class="ga-billing-amount">{{ fmtMoney(currentBilling.invoiceAmount) }}</span>
+              </div>
+              <div>
+                <span class="ga-kpi-label">Paid Amount</span>
+                <span class="ga-billing-amount">{{ fmtMoney(currentBilling.paidAmount) }}</span>
+              </div>
+              <div>
+                <span class="ga-kpi-label">Due Date</span>
+                <span class="ga-billing-amount">{{ fmtDate(currentBilling.dueDate) }}</span>
+              </div>
+              <div>
+                <span class="ga-kpi-label">Reconciliation</span>
+                <span class="ga-billing-amount">
+                  {{ currentBilling.membersBilled }} billed, {{ currentBilling.membersExpected }} expected
+                  <span v-if="currentBilling.membersBilled !== currentBilling.membersExpected" class="ga-discrepancy-flag">
+                    ({{ Math.abs(currentBilling.membersExpected - currentBilling.membersBilled) }} discrepancy)
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Billing cycles table -->
+          <div class="ga-table-wrap">
+            <table class="ga-table">
+              <thead>
+                <tr>
+                  <th>Period</th>
+                  <th>Due Date</th>
+                  <th class="ga-th-right">Invoice Amount</th>
+                  <th class="ga-th-right">Paid Amount</th>
+                  <th>Status</th>
+                  <th class="ga-th-center">Billed / Expected</th>
+                  <th>Carrier Ref</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="bc in (account.billingCycles ?? [])"
+                  :key="bc.id"
+                  :class="{ 'ga-row-discrepancy': bc.membersBilled !== bc.membersExpected || bc.status === 'partial' || bc.status === 'overdue' }"
+                >
+                  <td class="ga-td-name">{{ bc.period }}</td>
+                  <td>{{ fmtDateShort(bc.dueDate) }}</td>
+                  <td class="ga-td-right ga-td-mono">{{ fmtMoney(bc.invoiceAmount) }}</td>
+                  <td class="ga-td-right ga-td-mono">{{ fmtMoney(bc.paidAmount) }}</td>
+                  <td><span class="ga-status-pill" :class="statusBadgeClass(bc.status)">{{ statusLabel(bc.status) }}</span></td>
+                  <td class="ga-td-center">
+                    {{ bc.membersBilled }} / {{ bc.membersExpected }}
+                    <UIcon v-if="bc.membersBilled !== bc.membersExpected" name="i-heroicons-exclamation-triangle" class="ga-discrepancy-icon" />
+                  </td>
+                  <td class="ga-td-mono ga-td-small">{{ bc.carrierRef }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- ═══ Claims Tab ═══ -->
+        <div v-if="activeTab === 'claims'" class="ga-tab-panel">
+          <!-- Claims toolbar -->
+          <div class="ga-toolbar" style="margin-bottom: 12px;">
+            <UInput
+              v-model="claimSearch"
+              icon="i-heroicons-magnifying-glass"
+              placeholder="Search claims..."
+              class="ga-toolbar-search"
+              size="sm"
+            />
+            <select v-model="claimStatusFilter" class="ga-toolbar-select">
+              <option value="all">All statuses</option>
+              <option value="open">Open</option>
+              <option value="in_progress">In Progress</option>
+              <option value="pending_carrier">Pending Carrier</option>
+              <option value="pending_client">Pending Client</option>
+              <option value="resolved">Resolved</option>
+              <option value="cancelled">Cancelled</option>
+            </select>
+            <select v-model="claimPriorityFilter" class="ga-toolbar-select">
+              <option value="all">All priorities</option>
+              <option value="urgent">Urgent</option>
+              <option value="high">High</option>
+              <option value="medium">Medium</option>
+              <option value="low">Low</option>
+            </select>
+            <span class="ga-toolbar-count">{{ claims.length }} of {{ allClaims.length }} claims</span>
+          </div>
+          <div class="ga-table-wrap">
+            <table class="ga-table">
+              <thead>
+                <tr>
+                  <th>Claim ID</th>
+                  <th>Member</th>
+                  <th>Subject</th>
+                  <th class="ga-th-sortable" @click="toggleClaimSort('status')">
+                    Status
+                    <UIcon v-if="claimSortField === 'status'" :name="claimSortDir === 'asc' ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'" class="ga-sort-icon" />
+                  </th>
+                  <th class="ga-th-sortable" @click="toggleClaimSort('priority')">
+                    Priority
+                    <UIcon v-if="claimSortField === 'priority'" :name="claimSortDir === 'asc' ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'" class="ga-sort-icon" />
+                  </th>
+                  <th class="ga-th-sortable" @click="toggleClaimSort('created')">
+                    Created
+                    <UIcon v-if="claimSortField === 'created'" :name="claimSortDir === 'asc' ? 'i-heroicons-chevron-up' : 'i-heroicons-chevron-down'" class="ga-sort-icon" />
+                  </th>
+                  <th>Assignee</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="c in claims" :key="c.id">
+                  <td class="ga-td-mono">{{ c.id }}</td>
+                  <td class="ga-td-name">{{ c.memberName ?? '\u2014' }}</td>
+                  <td>{{ c.subject }}</td>
+                  <td><span class="ga-status-pill" :class="statusBadgeClass(c.status)">{{ statusLabel(c.status) }}</span></td>
+                  <td>
+                    <span class="ga-priority-dot" :class="priorityDot(c.priority)" />
+                    {{ c.priority }}
+                  </td>
+                  <td class="ga-td-small">{{ fmtDateShort(c.created) }}</td>
+                  <td>{{ c.assignee }}</td>
+                </tr>
+                <tr v-if="claims.length === 0">
+                  <td colspan="7" class="ga-empty-row">No claims match your filters.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- ═══ Certificates Tab ═══ -->
+        <div v-if="activeTab === 'certificates'" class="ga-tab-panel">
+          <div class="ga-toolbar" style="margin-bottom: 16px;">
+            <div style="flex:1" />
+            <UButton icon="i-heroicons-document-check" color="primary" size="sm">Generate Certificate</UButton>
+          </div>
+          <div class="ga-table-wrap">
+            <table class="ga-table">
+              <thead>
+                <tr>
+                  <th>Request ID</th>
+                  <th>Member</th>
+                  <th>Subject</th>
+                  <th>Status</th>
+                  <th>Created</th>
+                  <th>Notes</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="c in certificates" :key="c.id">
+                  <td class="ga-td-mono">{{ c.id }}</td>
+                  <td class="ga-td-name">{{ c.memberName ?? '\u2014' }}</td>
+                  <td>{{ c.subject }}</td>
+                  <td><span class="ga-status-pill" :class="statusBadgeClass(c.status)">{{ statusLabel(c.status) }}</span></td>
+                  <td class="ga-td-small">{{ fmtDateShort(c.created) }}</td>
+                  <td class="ga-td-small">{{ c.notes ?? '\u2014' }}</td>
+                </tr>
+                <tr v-if="certificates.length === 0">
+                  <td colspan="6" class="ga-empty-row">No certificate requests.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- ═══ Amendments Tab ═══ -->
+        <div v-if="activeTab === 'amendments'" class="ga-tab-panel">
+          <div class="ga-table-wrap">
+            <table class="ga-table">
+              <thead>
+                <tr>
+                  <th>Amendment ID</th>
+                  <th>Subject</th>
+                  <th>Status</th>
+                  <th>Priority</th>
+                  <th>Created</th>
+                  <th>Assignee</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="a in amendments" :key="a.id">
+                  <td class="ga-td-mono">{{ a.id }}</td>
+                  <td class="ga-td-name">{{ a.subject }}</td>
+                  <td><span class="ga-status-pill" :class="statusBadgeClass(a.status)">{{ statusLabel(a.status) }}</span></td>
+                  <td>
+                    <span class="ga-priority-dot" :class="priorityDot(a.priority)" />
+                    {{ a.priority }}
+                  </td>
+                  <td class="ga-td-small">{{ fmtDateShort(a.created) }}</td>
+                  <td>{{ a.assignee }}</td>
+                </tr>
+                <tr v-if="amendments.length === 0">
+                  <td colspan="6" class="ga-empty-row">No amendments.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- ═══ Documents Tab ═══ -->
+        <div v-if="activeTab === 'documents'" class="ga-tab-panel">
+          <!-- Category filter tabs -->
+          <div class="ga-doc-filters">
+            <button
+              v-for="cat in docCategories"
+              :key="cat.value"
+              type="button"
+              class="ga-filter-chip"
+              :class="{ 'ga-filter-chip-active': docCategoryFilter === cat.value }"
+              @click="docCategoryFilter = cat.value"
+            >
+              {{ cat.label }}
+              <span v-if="cat.value !== 'all' && docCategoryCounts[cat.value]" class="ga-filter-count">
+                {{ docCategoryCounts[cat.value] }}
+              </span>
+            </button>
+            <div style="flex:1" />
+            <UButton icon="i-heroicons-arrow-up-tray" color="primary" size="sm">Upload Document</UButton>
+          </div>
+
+          <!-- Document table -->
+          <div class="ga-table-wrap">
+            <table class="ga-table">
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Category</th>
+                  <th>Type</th>
+                  <th>Size</th>
+                  <th>Uploaded By</th>
+                  <th>Date</th>
+                  <th>Version</th>
+                  <th class="ga-th-center">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="doc in filteredDocuments" :key="doc.id">
+                  <td class="ga-td-name">
+                    <UIcon name="i-heroicons-document" class="ga-doc-icon" />
+                    {{ doc.name }}
+                  </td>
+                  <td><span class="ga-doc-category-badge" :class="docCategoryBadge(doc.category)">{{ docCategoryLabel(doc.category) }}</span></td>
+                  <td class="ga-td-mono">{{ doc.fileType }}</td>
+                  <td class="ga-td-small">{{ doc.fileSize }}</td>
+                  <td>{{ doc.uploadedBy }}</td>
+                  <td class="ga-td-small">{{ fmtDateShort(doc.uploadedAt) }}</td>
+                  <td class="ga-td-center">v{{ doc.version }}</td>
+                  <td class="ga-td-center">
+                    <div class="ga-doc-actions">
+                      <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-arrow-down-tray" title="Download" />
+                      <UButton size="xs" color="neutral" variant="ghost" icon="i-heroicons-eye" title="View" />
+                    </div>
+                  </td>
+                </tr>
+                <tr v-if="filteredDocuments.length === 0">
+                  <td colspan="8" class="ga-empty-row">No documents in this category.</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── 4. Right Sidebar ── -->
+      <aside class="ga-sidebar">
+        <!-- Contact Info -->
+        <div class="ga-sidebar-card">
+          <h4 class="ga-sidebar-card-title">Contact Info</h4>
+          <div class="ga-contact-block">
+            <span class="ga-contact-label">Primary Contact</span>
+            <p class="ga-contact-name">{{ account.contactName }}</p>
+            <p class="ga-contact-detail">{{ account.contactEmail }}</p>
+            <p class="ga-contact-detail">{{ account.contactPhone }}</p>
+          </div>
+          <div class="ga-contact-divider" />
+          <div class="ga-contact-block">
+            <span class="ga-contact-label">HR Contact</span>
+            <p class="ga-contact-name">{{ account.hrContactName }}</p>
+            <p class="ga-contact-detail">{{ account.hrContactEmail }}</p>
+          </div>
+        </div>
+
+        <!-- Recent Activity -->
+        <div class="ga-sidebar-card">
+          <h4 class="ga-sidebar-card-title">Recent Activity</h4>
+          <div class="ga-activity-list">
+            <div v-for="(evt, i) in account.recentActivity" :key="i" class="ga-activity-item">
+              <UIcon :name="activityTypeIcon(evt.type)" class="ga-activity-icon" />
+              <div class="ga-activity-content">
+                <p class="ga-activity-text">{{ evt.text }}</p>
+                <p class="ga-activity-date">{{ fmtDateShort(evt.date) }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Pending Tasks -->
+        <div class="ga-sidebar-card">
+          <h4 class="ga-sidebar-card-title">Pending Tasks</h4>
+          <div class="ga-tasks-list">
+            <div v-for="(sr, i) in openServiceRequests" :key="i" class="ga-task-item">
+              <UIcon :name="taskStatusIcon(sr.status)" class="ga-task-icon" :style="taskStatusColor(sr.status)" />
+              <span class="ga-task-text">{{ sr.subject }}</span>
+            </div>
+            <p v-if="openServiceRequests.length === 0" class="ga-td-small" style="color: var(--text-muted); font-style: italic;">No pending tasks.</p>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* ── Page layout ── */
+.ga-page {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-bottom: 48px;
+}
+
+/* ── Not found ── */
+.ga-not-found {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 24px;
+  text-align: center;
+}
+.ga-not-found-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--text-muted);
+  opacity: 0.4;
+}
+.ga-not-found-title {
+  margin-top: 16px;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.ga-not-found-text {
+  margin-top: 8px;
+  font-size: 14px;
+  color: var(--text-muted);
+}
+.ga-not-found-link {
+  margin-top: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--brand);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.ga-not-found-link:hover {
+  text-decoration: underline;
+}
+
+/* ── Header ── */
+.ga-header-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.ga-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--brand);
+}
+.ga-back-link:hover {
+  text-decoration: underline;
+}
+.ga-inline-icon {
+  width: 14px;
+  height: 14px;
+}
+.ga-header-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+.ga-header-info {
+  min-width: 0;
+  flex: 1;
+}
+.ga-header-title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+.ga-company-name {
+  font-size: 26px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+}
+.ga-lob-badge {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 10px;
+  border-radius: 9999px;
+  background: var(--brand-soft);
+  color: var(--brand);
+}
+.ga-carrier-name {
+  font-size: 13px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+.ga-subtitle {
+  margin-top: 4px;
+  font-size: 14px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+.ga-sep {
+  margin: 0 2px;
+  opacity: 0.4;
+}
+.ga-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+/* ── Status badges ── */
+.ga-status-badge,
+.ga-status-pill {
+  display: inline-flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 2px 10px;
+  border-radius: 9999px;
+}
+.ga-badge-active {
+  background: var(--success-soft);
+  color: var(--success);
+}
+.ga-badge-pending {
+  background: var(--warning-soft);
+  color: var(--warning);
+}
+.ga-badge-excluded {
+  background: var(--error-soft);
+  color: var(--error);
+}
+.ga-badge-open {
+  background: var(--brand-soft);
+  color: var(--brand);
+}
+.ga-badge-in-progress {
+  background: var(--info-soft);
+  color: var(--info);
+}
+.ga-badge-resolved {
+  background: var(--success-soft);
+  color: var(--success);
+}
+
+/* ── Account Summary Card ── */
+.ga-summary-card {
+  position: relative;
+  background: var(--surface);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  box-shadow: var(--card-shadow);
+  overflow: hidden;
+}
+.ga-summary-accent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--brand), rgba(1, 105, 111, 0.3));
+}
+.ga-summary-body {
+  display: flex;
+  align-items: center;
+  padding: 20px 28px;
+  gap: 0;
+}
+@media (max-width: 900px) {
+  .ga-summary-body {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+}
+
+.ga-sc-section {
+  flex: 1;
+  min-width: 0;
+}
+.ga-sc-section--financials {
+  flex: 1.2;
+  padding: 0 24px;
+}
+.ga-sc-section--renewal {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-left: 24px;
+}
+
+.ga-sc-divider {
+  width: 1px;
+  align-self: stretch;
+  background: var(--divider);
+  flex-shrink: 0;
+}
+
+/* People hero */
+.ga-sc-hero {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.ga-sc-hero-value {
+  font-size: 32px;
+  font-weight: 800;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1;
+}
+.ga-sc-hero-unit {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+.ga-sc-sub-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 8px;
+}
+.ga-sc-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+.ga-sc-chip--warn {
+  color: var(--warning);
+  font-weight: 600;
+}
+.ga-sc-chip-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.ga-sc-chip-dot--active { background: var(--success); }
+.ga-sc-chip-dot--muted { background: var(--text-muted); opacity: 0.35; }
+.ga-sc-chip-dot--warn { background: var(--warning); }
+.ga-sc-chip-text {
+  white-space: nowrap;
+}
+
+/* Financials grid */
+.ga-sc-fin-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ga-sc-fin {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+.ga-sc-fin-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+.ga-sc-fin-value {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* Renewal ring */
+.ga-sc-ring-wrap {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+}
+.ga-sc-ring {
+  width: 100%;
+  height: 100%;
+}
+.ga-sc-ring-track {
+  stroke: var(--divider);
+}
+.ga-sc-ring-fill {
+  transition: stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.ga-sc-ring-fill.ga-renewal-ok { stroke: var(--success); }
+.ga-sc-ring-fill.ga-renewal-warning { stroke: var(--warning); }
+.ga-sc-ring-fill.ga-renewal-urgent { stroke: var(--error); }
+.ga-sc-ring-center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.ga-sc-ring-days {
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.ga-sc-ring-unit {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  margin-top: 1px;
+}
+.ga-sc-renewal-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ga-sc-renewal-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+}
+.ga-sc-renewal-date {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.ga-renewal-urgent { color: var(--error); }
+.ga-renewal-warning { color: var(--warning); }
+.ga-renewal-ok { color: var(--success); }
+
+/* Keep ga-kpi-label for billing tab reuse */
+.ga-kpi-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+/* ── Main layout ── */
+.ga-main-layout {
+  display: grid;
+  grid-template-columns: 1fr 320px;
+  gap: 24px;
+  align-items: start;
+}
+@media (max-width: 1024px) {
+  .ga-main-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ── Tab bar ── */
+.ga-tabs-area {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.ga-tab-bar {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 10px;
+  padding: 3px;
+}
+.ga-tab-btn {
+  padding: 7px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+.ga-tab-btn:hover {
+  color: var(--text-primary);
+}
+.ga-tab-btn-active {
+  background: var(--surface);
+  color: var(--text-primary);
+  font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+/* ── Tab panel ── */
+.ga-tab-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ── Enrollment progress ── */
+.ga-enrollment-bar-card {
+  background: var(--surface);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: var(--card-shadow);
+}
+.ga-enrollment-header {
+  margin-bottom: 10px;
+}
+.ga-enrollment-text {
+  font-size: 14px;
+  color: var(--text-primary);
+}
+.ga-enrollment-text strong {
+  color: var(--brand);
+}
+.ga-progress-track {
+  height: 8px;
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+.ga-progress-fill {
+  height: 100%;
+  background: var(--brand);
+  border-radius: 9999px;
+  transition: width 300ms ease;
+}
+
+/* ── Toolbar ── */
+.ga-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+.ga-toolbar-search {
+  width: 260px;
+}
+.ga-toolbar-filter-group {
+  display: inline-flex;
+  gap: 2px;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
+  padding: 2px;
+}
+.ga-toolbar-actions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+.ga-toolbar-select {
+  padding: 5px 10px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: #fff;
+  color: var(--text-primary);
+  cursor: pointer;
+}
+.ga-toolbar-select:focus {
+  outline: none;
+  border-color: #01696f;
+}
+.ga-toolbar-count {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+.ga-th-sortable {
+  cursor: pointer;
+  user-select: none;
+}
+.ga-th-sortable:hover {
+  color: var(--text-primary);
+}
+.ga-sort-icon {
+  width: 12px;
+  height: 12px;
+  vertical-align: middle;
+  margin-left: 2px;
+}
+
+/* ── Filter chips ── */
+.ga-filter-chip {
+  padding: 5px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.ga-filter-chip:hover {
+  color: var(--text-primary);
+}
+.ga-filter-chip-active {
+  background: var(--surface);
+  color: var(--text-primary);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+.ga-filter-count {
+  font-size: 10px;
+  font-weight: 700;
+  background: var(--brand-soft);
+  color: var(--brand);
+  padding: 1px 6px;
+  border-radius: 9999px;
+}
+
+/* ── Tables ── */
+.ga-table-wrap {
+  overflow-x: auto;
+  background: var(--surface);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  box-shadow: var(--card-shadow);
+}
+.ga-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.ga-table thead th {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid var(--divider);
+  white-space: nowrap;
+  background: var(--surface);
+  position: sticky;
+  top: 0;
+}
+.ga-th-center {
+  text-align: center !important;
+}
+.ga-th-right {
+  text-align: right !important;
+}
+.ga-table tbody td {
+  padding: 10px 16px;
+  color: var(--text-primary);
+  border-bottom: 1px solid var(--divider);
+  vertical-align: middle;
+}
+.ga-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.ga-table tbody tr:hover {
+  background: var(--brand-faint);
+}
+.ga-td-name {
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ga-td-sub {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+.ga-td-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.ga-td-small {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.ga-td-center {
+  text-align: center;
+}
+.ga-td-right {
+  text-align: right;
+}
+.ga-empty-row {
+  text-align: center !important;
+  padding: 32px 16px !important;
+  color: var(--text-muted) !important;
+  font-style: italic;
+}
+
+/* ── Member specifics ── */
+.ga-pending-docs-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--warning);
+  display: inline-block;
+  flex-shrink: 0;
+}
+.ga-tier-badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--badge-muted-bg);
+  color: var(--badge-muted-fg);
+}
+.ga-forms-complete {
+  color: var(--success);
+  font-weight: 600;
+}
+.ga-forms-incomplete {
+  color: var(--warning);
+  font-weight: 600;
+}
+
+/* ── Inclusions & Exclusions ── */
+.ga-ie-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.ga-ie-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ga-ie-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ga-ie-count {
+  font-size: 12px;
+  font-weight: 700;
+  background: var(--badge-muted-bg);
+  color: var(--badge-muted-fg);
+  padding: 2px 8px;
+  border-radius: 9999px;
+}
+
+/* ── Billing ── */
+.ga-billing-summary-card {
+  background: var(--surface);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  padding: 20px 24px;
+  box-shadow: var(--card-shadow);
+}
+.ga-billing-summary-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.ga-billing-summary-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.ga-billing-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 16px;
+}
+.ga-billing-amount {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+  margin-top: 4px;
+  display: block;
+}
+.ga-discrepancy-flag {
+  color: var(--error);
+  font-weight: 700;
+  font-size: 13px;
+}
+.ga-discrepancy-icon {
+  width: 14px;
+  height: 14px;
+  color: var(--warning);
+  margin-left: 4px;
+  vertical-align: middle;
+}
+.ga-row-discrepancy {
+  background: var(--warning-soft);
+}
+
+/* ── Priority dots ── */
+.ga-priority-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.ga-priority-urgent {
+  background: var(--error);
+}
+.ga-priority-normal {
+  background: var(--brand);
+}
+.ga-priority-low {
+  background: var(--text-muted);
+}
+
+/* ── Documents ── */
+.ga-doc-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.ga-doc-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+.ga-doc-category-badge {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  padding: 2px 8px;
+  border-radius: 4px;
+  text-transform: capitalize;
+}
+.ga-doc-policy { background: rgba(1, 105, 111, 0.08); color: var(--brand); }
+.ga-doc-contract { background: rgba(124, 58, 237, 0.08); color: #7c3aed; }
+.ga-doc-endorsement { background: rgba(245, 158, 11, 0.08); color: #b45309; }
+.ga-doc-certificate { background: rgba(16, 185, 129, 0.08); color: #047857; }
+.ga-doc-census { background: rgba(59, 130, 246, 0.08); color: #2563eb; }
+.ga-doc-siniestralidad { background: rgba(239, 68, 68, 0.08); color: #dc2626; }
+.ga-doc-enrollment { background: rgba(168, 162, 155, 0.08); color: #6b6b68; }
+.ga-doc-other { background: var(--badge-muted-bg); color: var(--badge-muted-fg); }
+.ga-doc-actions {
+  display: flex;
+  gap: 2px;
+  justify-content: center;
+}
+
+/* ── Sidebar ── */
+.ga-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.ga-sidebar-card {
+  background: var(--surface);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: var(--card-shadow);
+}
+.ga-sidebar-card-title {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: 16px;
+}
+
+/* Contact */
+.ga-contact-block {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ga-contact-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+.ga-contact-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.ga-contact-detail {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+.ga-contact-divider {
+  height: 1px;
+  background: var(--divider);
+  margin: 14px 0;
+}
+
+/* Activity timeline */
+.ga-activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.ga-activity-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+.ga-activity-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.ga-activity-content {
+  min-width: 0;
+  flex: 1;
+}
+.ga-activity-text {
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+.ga-activity-date {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+/* Tasks */
+.ga-tasks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.ga-task-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+.ga-task-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+.ga-task-text {
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+/* ── Census Upload ── */
+.ga-census-upload {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.ga-census-upload-card {
+  background: var(--surface);
+  border: 2px dashed var(--card-border);
+  border-radius: 12px;
+  padding: 40px 32px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+.ga-census-upload-icon-area {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  background: var(--brand-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ga-census-upload-icon {
+  width: 28px;
+  height: 28px;
+  color: var(--brand);
+}
+.ga-census-upload-title {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.ga-census-upload-desc {
+  font-size: 13px;
+  color: var(--text-muted);
+  max-width: 500px;
+  line-height: 1.5;
+}
+.ga-census-upload-formats {
+  display: flex;
+  gap: 6px;
+  margin-top: 4px;
+}
+.ga-census-format-badge {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--badge-muted-bg);
+  color: var(--badge-muted-fg);
+}
+.ga-census-upload-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  color: white;
+  background: var(--brand);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 150ms;
+  margin-top: 8px;
+}
+.ga-census-upload-btn:hover {
+  opacity: 0.85;
+}
+.ga-census-upload-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+  opacity: 0.7;
+  margin-top: 4px;
+}
+
+/* Census history */
+.ga-census-history {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.ga-census-history-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Census file bar */
+.ga-census-file-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--surface);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  padding: 14px 20px;
+  box-shadow: var(--card-shadow);
+  margin-bottom: 16px;
+}
+.ga-census-file-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.ga-census-file-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--brand);
+}
+.ga-census-file-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.ga-census-file-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* Census stats */
+.ga-census-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.ga-census-stat {
+  background: var(--surface);
+  border: 1px solid var(--card-border);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  box-shadow: var(--card-shadow);
+}
+.ga-census-stat-value {
+  display: block;
+  font-size: 24px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.ga-census-stat-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+.ga-census-stat-matched .ga-census-stat-value { color: var(--success); }
+.ga-census-stat-changed .ga-census-stat-value { color: var(--warning); }
+.ga-census-stat-new .ga-census-stat-value { color: var(--brand); }
+.ga-census-stat-missing .ga-census-stat-value { color: var(--error); }
+
+/* Census reconciliation rows */
+.ga-census-row-action {
+  background: rgba(245, 158, 11, 0.03);
+}
+.ga-census-change-line {
+  display: block;
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+.ga-census-no-change {
+  font-size: 12px;
+  color: var(--text-muted);
+  opacity: 0.5;
+}
+
+/* Census actions */
+.ga-census-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+/* Census applied */
+.ga-census-applied {
+  display: flex;
+  justify-content: center;
+  padding: 32px 0;
+}
+.ga-census-applied-card {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  max-width: 420px;
+}
+.ga-census-applied-icon-area {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  background: var(--success-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ga-census-applied-icon {
+  width: 28px;
+  height: 28px;
+  color: var(--success);
+}
+.ga-census-applied-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 8px;
+}
+</style>
diff --git a/app/pages/support/collectivos/index.vue b/app/pages/support/collectivos/index.vue
new file mode 100644
index 0000000..3e43a44
--- /dev/null
+++ b/app/pages/support/collectivos/index.vue
@@ -0,0 +1,1211 @@
+<script setup lang="ts">
+definePageMeta({ ssr: false })
+usePageTitle('Colectivos · Operations')
+
+const {
+  accounts,
+  activeAccounts,
+  onboardingAccounts,
+  totalMembers,
+  totalDependents,
+  totalPremium,
+  urgentIssuesCount
+} = useColectivos()
+
+const search = ref('')
+const viewMode = ref<'card' | 'list'>('card')
+const statusFilter = ref<'all' | 'active' | 'onboarding' | 'renewal_due' | 'suspended'>('all')
+const lobFilter = ref<'all' | 'health' | 'life' | 'disability'>('all')
+const expandedGroupId = ref<string | null>(null)
+
+const statusTabs = [
+  { label: 'All', value: 'all' },
+  { label: 'Active', value: 'active' },
+  { label: 'Onboarding', value: 'onboarding' },
+  { label: 'Renewal Due', value: 'renewal_due' },
+  { label: 'Suspended', value: 'suspended' }
+] as const
+
+const lobOptions = [
+  { label: 'All Lines', value: 'all' },
+  { label: 'Health', value: 'health' },
+  { label: 'Life', value: 'life' },
+  { label: 'Disability', value: 'disability' }
+] as const
+
+const filteredAccounts = computed(() => {
+  let rows = accounts.value
+  if (statusFilter.value !== 'all') {
+    rows = rows.filter((a) => a.status === statusFilter.value)
+  }
+  if (lobFilter.value !== 'all') {
+    rows = rows.filter((a) => a.lob?.toLowerCase() === lobFilter.value)
+  }
+  const t = search.value.trim().toLowerCase()
+  if (t) {
+    rows = rows.filter(
+      (a) =>
+        a.name.toLowerCase().includes(t) ||
+        a.carrier?.toLowerCase().includes(t) ||
+        a.id.toLowerCase().includes(t) ||
+        a.ruc?.toLowerCase().includes(t)
+    )
+  }
+  return rows
+})
+
+const pendingEnrollmentTotal = computed(() =>
+  accounts.value.reduce((sum, a) => sum + (a.pendingEnrollment || 0), 0)
+)
+
+function toggleExpand(id: string) {
+  expandedGroupId.value = expandedGroupId.value === id ? null : id
+}
+
+function statusDotClass(status: string) {
+  switch (status) {
+    case 'active': return 'gc-dot--active'
+    case 'onboarding': return 'gc-dot--onboarding'
+    case 'renewal_due': return 'gc-dot--renewal'
+    case 'suspended': case 'cancelled': return 'gc-dot--suspended'
+    default: return 'gc-dot--default'
+  }
+}
+
+function lobBadgeClass(lob: string) {
+  switch (lob?.toLowerCase()) {
+    case 'health': return 'gc-lob--health'
+    case 'life': return 'gc-lob--life'
+    case 'disability': return 'gc-lob--disability'
+    default: return 'gc-lob--default'
+  }
+}
+
+function renewalClass(dateStr: string) {
+  if (!dateStr) return ''
+  const days = Math.floor((new Date(dateStr).getTime() - Date.now()) / 86400000)
+  if (days < 30) return 'gc-renewal--urgent'
+  if (days < 60) return 'gc-renewal--warning'
+  return ''
+}
+
+function fmtCurrency(value: number) {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value)
+}
+
+function fmtDate(d: string) {
+  if (!d) return '--'
+  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+}
+
+function fmtShortDate(d: string) {
+  if (!d) return '--'
+  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
+
+function billingStatusLabel(account: any) {
+  const cycles = account.billingCycles
+  if (!cycles || cycles.length === 0) return 'No billing data'
+  return cycles[cycles.length - 1].status || 'Unknown'
+}
+
+function enrollmentPct(account: any) {
+  if (!account.totalMembers || account.totalMembers === 0) return 100
+  const enrolled = account.totalMembers - (account.pendingEnrollment || 0)
+  return Math.round((enrolled / account.totalMembers) * 100)
+}
+
+const quickActions = [
+  { label: 'New Inclusion', icon: 'i-heroicons-user-plus', route: '#', countKey: 'inclusion' },
+  { label: 'New Exclusion', icon: 'i-heroicons-user-minus', route: '#', countKey: 'exclusion' },
+  { label: 'File Claim', icon: 'i-heroicons-document-text', route: '#', countKey: 'claim' },
+  { label: 'View Billing', icon: 'i-heroicons-banknotes', route: '#', countKey: 'billing' },
+  { label: 'Generate Certificate', icon: 'i-heroicons-document-check', route: '#', countKey: 'certificate' },
+  { label: 'Upload Document', icon: 'i-heroicons-arrow-up-tray', route: '#', countKey: 'document' }
+]
+
+const quickActionCounts = computed(() => {
+  const counts: Record<string, number> = {
+    inclusion: 0,
+    exclusion: 0,
+    claim: 0,
+    billing: 0,
+    certificate: 0,
+    document: 0
+  }
+  for (const a of accounts.value) {
+    if (a.serviceRequests) {
+      for (const sr of a.serviceRequests) {
+        if (sr.status !== 'resolved' && sr.status !== 'closed') {
+          const t = sr.type?.toLowerCase()
+          if (t && t in counts) counts[t]++
+        }
+      }
+    }
+    if (a.outstandingClaims) counts.claim += a.outstandingClaims
+    if (a.pendingEnrollment) counts.inclusion += a.pendingEnrollment
+  }
+  return counts
+})
+</script>
+
+<template>
+  <div class="gc-page">
+    <!-- Header -->
+    <div class="gc-header">
+      <div class="gc-header__text">
+        <h1 class="gc-header__title">Colectivos</h1>
+        <p class="gc-header__subtitle">Group account management &amp; operations</p>
+      </div>
+      <div style="display: flex; align-items: center; gap: 10px;">
+        <span class="gc-count-badge">{{ filteredAccounts.length }} groups</span>
+        <NuxtLink to="/support/collectivos/new">
+          <UButton icon="i-heroicons-plus" color="primary">New Group</UButton>
+        </NuxtLink>
+      </div>
+    </div>
+
+    <!-- Filter Bar -->
+    <div class="gc-filters">
+      <div class="gc-filters__search">
+        <UInput
+          v-model="search"
+          icon="i-heroicons-magnifying-glass"
+          placeholder="Search group name, carrier, or ID..."
+          class="gc-filters__search-input"
+        />
+      </div>
+      <div class="gc-filters__tabs">
+        <button
+          v-for="tab in statusTabs"
+          :key="tab.value"
+          type="button"
+          class="gc-filters__tab"
+          :class="{ 'gc-filters__tab--active': statusFilter === tab.value }"
+          @click="statusFilter = tab.value"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+      <div class="gc-filters__lob">
+        <select v-model="lobFilter" class="gc-filters__lob-select">
+          <option v-for="opt in lobOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+        </select>
+      </div>
+      <div class="gc-view-toggle">
+        <button type="button" :class="['gc-view-toggle-btn', viewMode === 'card' && 'gc-view-toggle-btn--active']" title="Card view" @click="viewMode = 'card'">
+          <UIcon name="i-heroicons-squares-2x2" style="width: 16px; height: 16px;" />
+        </button>
+        <button type="button" :class="['gc-view-toggle-btn', viewMode === 'list' && 'gc-view-toggle-btn--active']" title="List view" @click="viewMode = 'list'">
+          <UIcon name="i-heroicons-bars-3" style="width: 16px; height: 16px;" />
+        </button>
+      </div>
+    </div>
+
+    <!-- ═══ Card View ═══ -->
+    <div v-if="viewMode === 'card'" class="gc-card-grid">
+      <NuxtLink
+        v-for="account in filteredAccounts"
+        :key="account.id"
+        :to="`/support/collectivos/${account.id}`"
+        class="gc-card"
+      >
+        <div class="gc-card__top">
+          <span class="gc-card__dot" :class="statusDotClass(account.status)" />
+          <span class="gc-card__name">{{ account.name }}</span>
+          <span class="gc-card__lob" :class="lobBadgeClass(account.lob)">{{ account.lob }}</span>
+        </div>
+        <div class="gc-card__body">
+          <div class="gc-card__field">
+            <span class="gc-card__field-label">Carrier</span>
+            <span class="gc-card__field-value">{{ account.carrier }}</span>
+          </div>
+          <div class="gc-card__field">
+            <span class="gc-card__field-label">Members</span>
+            <span class="gc-card__field-value">{{ account.activeMembersCount ?? account.totalMembers }}</span>
+          </div>
+          <div class="gc-card__field">
+            <span class="gc-card__field-label">Premium</span>
+            <span class="gc-card__field-value">{{ fmtCurrency(account.monthlyPremium || 0) }}/mo</span>
+          </div>
+          <div class="gc-card__field">
+            <span class="gc-card__field-label">Renewal</span>
+            <span class="gc-card__field-value" :class="renewalClass(account.renewalDate)">{{ fmtShortDate(account.renewalDate) }}</span>
+          </div>
+          <div class="gc-card__field">
+            <span class="gc-card__field-label">Agent</span>
+            <span class="gc-card__field-value">{{ account.agent }}</span>
+          </div>
+        </div>
+        <div v-if="account.hasUrgentIssues" class="gc-card__urgent">
+          <UIcon name="i-heroicons-exclamation-triangle" style="width: 12px; height: 12px;" />
+          Urgent issues
+        </div>
+        <div v-if="account.status === 'renewal_due' || renewalClass(account.renewalDate)" class="gc-card__renewal-cta" @click.prevent>
+          <NuxtLink :to="`/renewals?group=${account.id}`" class="gc-renewal-btn">
+            <UIcon name="i-heroicons-arrow-path" style="width: 13px; height: 13px;" />
+            Start Renewal
+          </NuxtLink>
+        </div>
+      </NuxtLink>
+      <div v-if="filteredAccounts.length === 0" class="gc-empty" style="grid-column: 1 / -1;">
+        <UIcon name="i-heroicons-building-office-2" class="gc-empty__icon" />
+        <p class="gc-empty__text">No group accounts match your filters.</p>
+      </div>
+    </div>
+
+    <!-- ═══ List View ═══ -->
+    <div v-else class="gc-list">
+      <div
+        v-for="account in filteredAccounts"
+        :key="account.id"
+        class="gc-list__item"
+        :class="{ 'gc-list__item--expanded': expandedGroupId === account.id }"
+      >
+        <!-- Collapsed Row -->
+        <div class="gc-row" @click="toggleExpand(account.id)">
+          <span class="gc-row__dot" :class="statusDotClass(account.status)" />
+          <NuxtLink
+            :to="`/support/collectivos/${account.id}`"
+            class="gc-row__name"
+            @click.stop
+          >
+            {{ account.name }}
+          </NuxtLink>
+          <span class="gc-row__lob" :class="lobBadgeClass(account.lob)">{{ account.lob }}</span>
+          <span class="gc-row__carrier">{{ account.carrier }}</span>
+          <span class="gc-row__members">
+            <UIcon name="i-heroicons-users" class="gc-row__members-icon" />
+            {{ account.activeMembersCount ?? account.totalMembers }}
+          </span>
+          <span class="gc-row__premium">{{ fmtCurrency(account.monthlyPremium || 0) }}/mo</span>
+          <span class="gc-row__renewal" :class="renewalClass(account.renewalDate)">
+            {{ fmtShortDate(account.renewalDate) }}
+          </span>
+          <span v-if="account.hasUrgentIssues" class="gc-row__urgent-dot" title="Urgent issues" />
+          <span class="gc-row__agent">{{ account.agent }}</span>
+          <UIcon
+            name="i-heroicons-chevron-down"
+            class="gc-row__chevron"
+            :class="{ 'gc-row__chevron--open': expandedGroupId === account.id }"
+          />
+        </div>
+
+        <!-- Expanded Quick-View -->
+        <Transition name="gc-expand">
+          <div v-if="expandedGroupId === account.id" class="gc-quickview">
+            <div class="gc-quickview__grid">
+              <!-- Column 1: Account Overview -->
+              <div class="gc-quickview__col">
+                <h4 class="gc-quickview__col-title">Account Overview</h4>
+                <div class="gc-quickview__field">
+                  <span class="gc-quickview__field-label">Contact</span>
+                  <span class="gc-quickview__field-value">{{ account.contactName || '--' }}</span>
+                  <span v-if="account.contactEmail" class="gc-quickview__field-sub">{{ account.contactEmail }}</span>
+                  <span v-if="account.contactPhone" class="gc-quickview__field-sub">{{ account.contactPhone }}</span>
+                </div>
+                <div class="gc-quickview__field">
+                  <span class="gc-quickview__field-label">HR Contact</span>
+                  <span class="gc-quickview__field-value">{{ account.hrContactName || '--' }}</span>
+                  <span v-if="account.hrContactEmail" class="gc-quickview__field-sub">{{ account.hrContactEmail }}</span>
+                </div>
+                <div class="gc-quickview__field">
+                  <span class="gc-quickview__field-label">Product</span>
+                  <span class="gc-quickview__field-value">{{ account.product || '--' }}</span>
+                </div>
+                <div class="gc-quickview__field">
+                  <span class="gc-quickview__field-label">Effective Date</span>
+                  <span class="gc-quickview__field-value">{{ fmtDate(account.effectiveDate) }}</span>
+                </div>
+                <div class="gc-quickview__field">
+                  <span class="gc-quickview__field-label">Commission</span>
+                  <span class="gc-quickview__field-value">{{ account.commissionPct != null ? account.commissionPct + '%' : '--' }}</span>
+                </div>
+              </div>
+
+              <!-- Column 2: Current Status -->
+              <div class="gc-quickview__col">
+                <h4 class="gc-quickview__col-title">Current Status</h4>
+                <div class="gc-quickview__field">
+                  <span class="gc-quickview__field-label">Outstanding Claims</span>
+                  <span class="gc-quickview__field-value">{{ account.outstandingClaims ?? 0 }}</span>
+                </div>
+                <div class="gc-quickview__field">
+                  <span class="gc-quickview__field-label">Pending Tasks</span>
+                  <span class="gc-quickview__field-value">{{ account.pendingTasks ?? 0 }}</span>
+                </div>
+                <div class="gc-quickview__field">
+                  <span class="gc-quickview__field-label">Pending Enrollment</span>
+                  <div class="gc-quickview__enrollment">
+                    <span class="gc-quickview__field-value">{{ account.pendingEnrollment ?? 0 }} of {{ account.totalMembers }}</span>
+                    <div class="gc-quickview__progress-bar">
+                      <div class="gc-quickview__progress-fill" :style="{ width: enrollmentPct(account) + '%' }" />
+                    </div>
+                    <span class="gc-quickview__progress-label">{{ enrollmentPct(account) }}% enrolled</span>
+                  </div>
+                </div>
+                <div class="gc-quickview__field">
+                  <span class="gc-quickview__field-label">Billing Status</span>
+                  <span class="gc-quickview__field-value">{{ billingStatusLabel(account) }}</span>
+                </div>
+                <div class="gc-quickview__field">
+                  <span class="gc-quickview__field-label">Documents</span>
+                  <span class="gc-quickview__field-value">{{ account.documents?.length ?? 0 }}</span>
+                </div>
+              </div>
+
+              <!-- Column 3: Recent Activity -->
+              <div class="gc-quickview__col">
+                <h4 class="gc-quickview__col-title">Recent Activity</h4>
+                <div v-if="account.recentActivity && account.recentActivity.length > 0" class="gc-quickview__activity">
+                  <div
+                    v-for="(entry, idx) in account.recentActivity.slice(0, 4)"
+                    :key="idx"
+                    class="gc-quickview__activity-item"
+                  >
+                    <span class="gc-quickview__activity-date">{{ fmtShortDate(entry.date) }}</span>
+                    <span class="gc-quickview__activity-text">{{ entry.text }}</span>
+                    <span v-if="entry.actor" class="gc-quickview__activity-actor">{{ entry.actor }}</span>
+                  </div>
+                </div>
+                <p v-else class="gc-quickview__empty">No recent activity</p>
+
+                <div class="gc-quickview__actions">
+                  <NuxtLink
+                    v-if="account.status === 'renewal_due' || renewalClass(account.renewalDate)"
+                    :to="`/renewals?group=${account.id}`"
+                    class="gc-quickview__action-btn gc-quickview__action-btn--renewal"
+                    @click.stop
+                  >
+                    <UIcon name="i-heroicons-arrow-path" style="width: 12px; height: 12px;" /> Start Renewal
+                  </NuxtLink>
+                  <button type="button" class="gc-quickview__action-btn">Inclusions</button>
+                  <button type="button" class="gc-quickview__action-btn">Exclusions</button>
+                  <button type="button" class="gc-quickview__action-btn">Claims</button>
+                  <button type="button" class="gc-quickview__action-btn">Billing</button>
+                  <button type="button" class="gc-quickview__action-btn">Certificates</button>
+                  <button type="button" class="gc-quickview__action-btn">Documents</button>
+                </div>
+
+                <NuxtLink :to="`/support/collectivos/${account.id}`" class="gc-quickview__open-btn">
+                  Open Full Account
+                  <UIcon name="i-heroicons-arrow-right" class="gc-quickview__open-icon" />
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+
+      <!-- Empty state -->
+      <div v-if="filteredAccounts.length === 0" class="gc-empty">
+        <UIcon name="i-heroicons-building-office-2" class="gc-empty__icon" />
+        <p class="gc-empty__text">No group accounts match your filters.</p>
+      </div>
+    </div>
+
+    <!-- Quick Action Tiles -->
+    <div class="gc-quick-tiles">
+      <h3 class="gc-quick-tiles__title">Quick Actions</h3>
+      <div class="gc-quick-tiles__grid">
+        <button
+          v-for="action in quickActions"
+          :key="action.label"
+          type="button"
+          class="gc-quick-tiles__tile"
+        >
+          <UIcon :name="action.icon" class="gc-quick-tiles__tile-icon" />
+          <span class="gc-quick-tiles__tile-label">{{ action.label }}</span>
+          <span
+            v-if="quickActionCounts[action.countKey] > 0"
+            class="gc-quick-tiles__tile-badge"
+          >
+            {{ quickActionCounts[action.countKey] }}
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* ── Page ── */
+.gc-page {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  padding-bottom: 48px;
+}
+
+/* ── Header ── */
+.gc-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.gc-header__title {
+  font-size: 26px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.gc-header__subtitle {
+  margin-top: 4px;
+  font-size: 15px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+/* ── Count badge ── */
+.gc-count-badge {
+  font-size: 11px;
+  font-weight: 700;
+  color: #01696f;
+  background: rgba(1, 105, 111, 0.08);
+  padding: 2px 9px;
+  border-radius: 10px;
+  letter-spacing: 0.01em;
+}
+
+/* ── View toggle ── */
+.gc-view-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  margin-left: auto;
+}
+.gc-view-toggle-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 28px;
+  border-radius: 7px;
+  border: none;
+  background: transparent;
+  color: #8a8a86;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.gc-view-toggle-btn:hover { color: var(--text-primary); }
+.gc-view-toggle-btn--active {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* ── Card grid ── */
+.gc-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+@media (max-width: 1024px) { .gc-card-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 640px) { .gc-card-grid { grid-template-columns: 1fr; } }
+
+.gc-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  text-decoration: none;
+  transition: all 0.15s ease;
+  cursor: pointer;
+}
+.gc-card:hover {
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
+  border-color: rgba(1, 105, 111, 0.15);
+}
+.gc-card__top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.gc-card__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.gc-card__name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gc-card__lob {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 7px;
+  border-radius: 4px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.gc-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+}
+.gc-card__field {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.gc-card__field-label {
+  font-size: 12px;
+  color: #8a8a86;
+}
+.gc-card__field-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+.gc-card__urgent {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #dc2626;
+  padding: 4px 8px;
+  background: rgba(239, 68, 68, 0.06);
+  border-radius: 6px;
+  margin-top: 2px;
+}
+.gc-card__renewal-cta {
+  margin-top: 6px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(0,0,0,0.05);
+}
+.gc-renewal-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #01696f;
+  padding: 4px 10px;
+  background: rgba(1,105,111,0.06);
+  border-radius: 6px;
+  text-decoration: none;
+  transition: background 150ms ease;
+}
+.gc-renewal-btn:hover {
+  background: rgba(1,105,111,0.12);
+}
+
+/* ── Filter Bar ── */
+.gc-filters {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.gc-filters__search {
+  flex: 1;
+  min-width: 200px;
+}
+
+.gc-filters__search-input {
+  width: 100%;
+}
+
+.gc-filters__tabs {
+  display: inline-flex;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
+  padding: 3px;
+  gap: 2px;
+}
+
+.gc-filters__tab {
+  padding: 6px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.gc-filters__tab:hover {
+  color: var(--text-primary);
+}
+
+.gc-filters__tab--active {
+  background: #fff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.gc-filters__lob-select {
+  padding: 7px 32px 7px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+}
+
+/* ── Group List ── */
+.gc-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.gc-list__item {
+  background: #fff;
+}
+
+.gc-list__item--expanded {
+  background: #fafafa;
+}
+
+/* ── Row ── */
+.gc-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 18px;
+  cursor: pointer;
+  transition: background 0.12s ease;
+  min-height: 48px;
+}
+
+.gc-row:hover {
+  background: rgba(1, 105, 111, 0.02);
+}
+
+.gc-row__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.gc-dot--active {
+  background: #22c55e;
+}
+
+.gc-dot--onboarding,
+.gc-dot--renewal {
+  background: #f59e0b;
+}
+
+.gc-dot--suspended {
+  background: #ef4444;
+}
+
+.gc-dot--default {
+  background: #a3a3a3;
+}
+
+.gc-row__name {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  min-width: 160px;
+  text-decoration: none;
+  transition: color 0.12s ease;
+}
+
+.gc-row__name:hover {
+  color: #01696f;
+  text-decoration: underline;
+}
+
+.gc-row__lob {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+.gc-lob--health {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.gc-lob--life {
+  background: #e0e7ff;
+  color: #4338ca;
+}
+
+.gc-lob--disability {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.gc-lob--default {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+.gc-row__carrier {
+  font-size: 13px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  min-width: 100px;
+}
+
+.gc-row__members {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.gc-row__members-icon {
+  width: 14px;
+  height: 14px;
+  color: var(--text-muted);
+}
+
+.gc-row__premium {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  min-width: 90px;
+}
+
+.gc-row__renewal {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  min-width: 80px;
+}
+
+.gc-renewal--urgent {
+  color: #dc2626;
+  font-weight: 600;
+}
+
+.gc-renewal--warning {
+  color: #d97706;
+  font-weight: 600;
+}
+
+.gc-row__urgent-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #ef4444;
+  flex-shrink: 0;
+  animation: gc-pulse 2s ease-in-out infinite;
+}
+
+@keyframes gc-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.gc-row__agent {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  margin-left: auto;
+  min-width: 70px;
+}
+
+.gc-row__chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.gc-row__chevron--open {
+  transform: rotate(180deg);
+}
+
+/* ── Quick-View Panel ── */
+.gc-expand-enter-active,
+.gc-expand-leave-active {
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.gc-expand-enter-from,
+.gc-expand-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.gc-expand-enter-to,
+.gc-expand-leave-from {
+  opacity: 1;
+  max-height: 600px;
+}
+
+.gc-quickview {
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+  padding: 20px 18px 20px 40px;
+  background: #fafafa;
+}
+
+.gc-quickview__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 28px;
+}
+
+.gc-quickview__col-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  margin-bottom: 14px;
+}
+
+.gc-quickview__field {
+  margin-bottom: 10px;
+}
+
+.gc-quickview__field-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  margin-bottom: 2px;
+}
+
+.gc-quickview__field-value {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.gc-quickview__field-sub {
+  display: block;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.gc-quickview__enrollment {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.gc-quickview__progress-bar {
+  width: 100%;
+  height: 6px;
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.gc-quickview__progress-fill {
+  height: 100%;
+  background: #01696f;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.gc-quickview__progress-label {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* ── Activity ── */
+.gc-quickview__activity {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.gc-quickview__activity-item {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.gc-quickview__activity-item:last-child {
+  border-bottom: none;
+}
+
+.gc-quickview__activity-date {
+  font-size: 11px;
+  color: #8a8a86;
+  font-weight: 500;
+}
+
+.gc-quickview__activity-text {
+  font-size: 13px;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.gc-quickview__activity-actor {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.gc-quickview__empty {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-bottom: 16px;
+}
+
+/* ── Quick Action Buttons ── */
+.gc-quickview__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+
+.gc-quickview__action-btn {
+  padding: 5px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #01696f;
+  background: rgba(1, 105, 111, 0.06);
+  border: 1px solid rgba(1, 105, 111, 0.12);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.12s ease;
+}
+
+.gc-quickview__action-btn:hover {
+  background: rgba(1, 105, 111, 0.1);
+  border-color: rgba(1, 105, 111, 0.2);
+}
+.gc-quickview__action-btn--renewal {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  text-decoration: none;
+  font-weight: 600;
+  background: rgba(1,105,111,0.10);
+  border-color: rgba(1,105,111,0.18);
+}
+
+.gc-quickview__open-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 18px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #fff;
+  background: #01696f;
+  border-radius: 8px;
+  text-decoration: none;
+  transition: background 0.12s ease;
+}
+
+.gc-quickview__open-btn:hover {
+  background: #015258;
+}
+
+.gc-quickview__open-icon {
+  width: 14px;
+  height: 14px;
+}
+
+/* ── Empty State ── */
+.gc-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48px 0;
+  background: #fff;
+}
+
+.gc-empty__icon {
+  width: 32px;
+  height: 32px;
+  color: var(--text-muted);
+  opacity: 0.4;
+}
+
+.gc-empty__text {
+  margin-top: 8px;
+  font-size: 14px;
+  color: var(--text-muted);
+}
+
+/* ── Quick Action Tiles ── */
+.gc-quick-tiles {
+  margin-top: 4px;
+}
+
+.gc-quick-tiles__title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  margin-bottom: 12px;
+}
+
+.gc-quick-tiles__grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 10px;
+}
+
+.gc-quick-tiles__tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 18px 12px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.gc-quick-tiles__tile:hover {
+  border-color: rgba(1, 105, 111, 0.25);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.gc-quick-tiles__tile-icon {
+  width: 22px;
+  height: 22px;
+  color: #01696f;
+}
+
+.gc-quick-tiles__tile-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  text-align: center;
+}
+
+.gc-quick-tiles__tile-badge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #fff;
+  background: #ef4444;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* ── Responsive ── */
+@media (max-width: 1024px) {
+  .gc-quickview__grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+  }
+
+  .gc-quick-tiles__grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .gc-row__carrier,
+  .gc-row__agent {
+    display: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .gc-kpi-strip {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 12px;
+  }
+
+  .gc-kpi-strip__divider {
+    display: none;
+  }
+
+  .gc-kpi-strip__item {
+    min-width: 90px;
+    padding: 8px 12px;
+  }
+
+  .gc-filters {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .gc-filters__tabs {
+    overflow-x: auto;
+  }
+
+  .gc-quickview__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .gc-quick-tiles__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .gc-row__premium,
+  .gc-row__renewal {
+    display: none;
+  }
+}
+</style>
diff --git a/app/pages/support/index.vue b/app/pages/support/index.vue
new file mode 100644
index 0000000..d027798
--- /dev/null
+++ b/app/pages/support/index.vue
@@ -0,0 +1,436 @@
+<script setup lang="ts">
+import {
+  slaColor, CHANNEL_LABELS, CHANNEL_ICONS, STATUS_LABELS,
+  PRIORITY_LABELS, INTENT_LABELS, TIER_LABELS, QUEUE_LABELS,
+  type SupportChannel, type TicketStatus, type TicketPriority,
+  type RoutingTier, type RoutedQueue,
+} from '~/data/mock-support'
+
+usePageTitle('Incoming Support')
+
+const { state, kpis } = useSupportTickets()
+
+// ── View toggle ──
+const viewMode = ref<'my' | 'all'>('all')
+
+type TicketFilter = 'all' | 'active' | 'pending' | 'resolved'
+const activeFilter = ref<TicketFilter>('all')
+
+// ── Filter dropdowns ──
+const statusFilter = ref('')
+const channelFilter = ref('')
+const tierFilter = ref('')
+const queueFilter = ref('')
+const priorityFilter = ref('')
+const handlerFilter = ref('')
+
+const uniqueHandlers = computed(() =>
+  [...new Set(state.value.tickets.map(t => t.assignedTo).filter(Boolean) as string[])].sort()
+)
+
+const filteredTickets = computed(() => {
+  let result = [...state.value.tickets]
+
+  if (activeFilter.value === 'active') result = result.filter(t => t.status === 'open' || t.status === 'in_progress')
+  if (activeFilter.value === 'pending') result = result.filter(t => t.status === 'pending_customer')
+  if (activeFilter.value === 'resolved') result = result.filter(t => t.status === 'resolved')
+
+  if (statusFilter.value) result = result.filter(t => t.status === statusFilter.value)
+  if (channelFilter.value) result = result.filter(t => t.channel === channelFilter.value)
+  if (tierFilter.value) result = result.filter(t => t.routingTier === tierFilter.value)
+  if (queueFilter.value) result = result.filter(t => t.routedQueue === queueFilter.value)
+  if (priorityFilter.value) result = result.filter(t => t.priority === priorityFilter.value)
+  if (handlerFilter.value) result = result.filter(t => t.assignedTo === handlerFilter.value)
+
+  // Sort: breached first → slaPercent desc
+  result.sort((a, b) => {
+    const aBreached = a.slaPercent >= 100 ? 0 : 1
+    const bBreached = b.slaPercent >= 100 ? 0 : 1
+    if (aBreached !== bBreached) return aBreached - bBreached
+    return b.slaPercent - a.slaPercent
+  })
+
+  return result
+})
+
+const filterCounts = computed(() => {
+  const all = state.value.tickets
+  return {
+    all: all.length,
+    active: all.filter(t => t.status === 'open' || t.status === 'in_progress').length,
+    pending: all.filter(t => t.status === 'pending_customer').length,
+    resolved: all.filter(t => t.status === 'resolved').length,
+  }
+})
+
+const statusMeta: Record<TicketStatus, { label: string; class: string }> = {
+  open: { label: 'Abierto', class: 'sp-st-open' },
+  in_progress: { label: 'En Proceso', class: 'sp-st-progress' },
+  pending_customer: { label: 'Esperando', class: 'sp-st-pending' },
+  resolved: { label: 'Resuelto', class: 'sp-st-resolved' },
+}
+
+const priorityMeta: Record<TicketPriority, { label: string; class: string }> = {
+  urgent: { label: 'Urgente', class: 'sp-pri-urgent' },
+  high: { label: 'Alta', class: 'sp-pri-high' },
+  medium: { label: 'Media', class: 'sp-pri-medium' },
+  low: { label: 'Baja', class: 'sp-pri-low' },
+}
+
+const tierClass = (t: RoutingTier) => {
+  const map: Record<string, string> = {
+    tier1_auto: 'sp-tier-1', tier2_rule: 'sp-tier-2', tier3_open: 'sp-tier-3',
+  }
+  return map[t] ?? ''
+}
+
+function clearFilters() {
+  statusFilter.value = ''
+  channelFilter.value = ''
+  tierFilter.value = ''
+  queueFilter.value = ''
+  priorityFilter.value = ''
+  handlerFilter.value = ''
+}
+
+const hasActiveFilters = computed(() =>
+  !!(statusFilter.value || channelFilter.value || tierFilter.value || queueFilter.value || priorityFilter.value || handlerFilter.value)
+)
+
+const toast = useToast()
+function handleNewTicket() {
+  toast.add({ title: 'New ticket flow coming soon', description: 'Quick Capture or manual intake.', color: 'neutral' })
+}
+</script>
+
+<template>
+  <div class="sp-page">
+    <!-- Header -->
+    <div class="flex flex-wrap items-end justify-between gap-3">
+      <div class="max-w-xl">
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Incoming Support</h1>
+        <p class="mt-1 text-[13px] text-[var(--text-muted)]">
+          Tickets, inquiries, and customer requests — 3-tier routing with WhatsApp & email threads.
+        </p>
+      </div>
+      <button type="button" class="sp-action-btn-primary" @click="handleNewTicket">
+        <UIcon name="i-heroicons-plus" style="width: 14px; height: 14px;" />
+        Nuevo Ticket
+      </button>
+    </div>
+
+    <!-- KPI strip -->
+    <div class="sp-kpi-strip">
+      <div class="sp-kpi">
+        <p class="sp-kpi-label">Abiertos</p>
+        <p class="sp-kpi-value">{{ kpis.open }}</p>
+      </div>
+      <div class="sp-kpi">
+        <p class="sp-kpi-label">En proceso</p>
+        <p class="sp-kpi-value" style="color: #c27b1a;">{{ kpis.inProgress }}</p>
+      </div>
+      <div class="sp-kpi">
+        <p class="sp-kpi-label">SLA incumplido</p>
+        <p class="sp-kpi-value" :style="kpis.breached > 0 ? 'color: #c13838;' : ''">{{ kpis.breached }}</p>
+      </div>
+      <div class="sp-kpi">
+        <p class="sp-kpi-label">Promedio días</p>
+        <p class="sp-kpi-value">{{ kpis.avgDaysOpen }}d</p>
+      </div>
+      <div class="sp-kpi">
+        <p class="sp-kpi-label">Sin asignar</p>
+        <p class="sp-kpi-value" :style="kpis.unassigned > 0 ? 'color: #9333ea;' : ''">{{ kpis.unassigned }}</p>
+      </div>
+    </div>
+
+    <!-- View toggle + Filter tabs -->
+    <div class="sp-controls-row">
+      <div class="sp-view-toggle">
+        <button type="button" class="sp-view-btn" :class="viewMode === 'my' ? 'sp-view-on' : 'sp-view-off'" @click="viewMode = 'my'">My Tickets</button>
+        <button type="button" class="sp-view-btn" :class="viewMode === 'all' ? 'sp-view-on' : 'sp-view-off'" @click="viewMode = 'all'">All Tickets</button>
+      </div>
+
+      <div class="sp-filter-tabs">
+        <button
+          v-for="f in ([
+            { id: 'all', label: 'Todos' },
+            { id: 'active', label: 'Activos' },
+            { id: 'pending', label: 'Pendientes' },
+            { id: 'resolved', label: 'Resueltos' },
+          ] as { id: TicketFilter; label: string }[])"
+          :key="f.id"
+          type="button"
+          class="sp-filter-tab"
+          :class="activeFilter === f.id ? 'sp-filter-on' : 'sp-filter-off'"
+          @click="activeFilter = f.id"
+        >
+          {{ f.label }}
+          <span class="sp-filter-count" :class="activeFilter === f.id ? 'sp-filter-count-on' : ''">{{ filterCounts[f.id] }}</span>
+        </button>
+      </div>
+
+      <span class="text-[11px] text-[var(--text-muted)] ml-auto">{{ filteredTickets.length }} resultados</span>
+    </div>
+
+    <!-- Filter dropdowns -->
+    <div class="sp-dropdown-row">
+      <select v-model="statusFilter" class="sp-dropdown">
+        <option value="">Estado</option>
+        <option value="open">Abierto</option>
+        <option value="in_progress">En Proceso</option>
+        <option value="pending_customer">Esperando Cliente</option>
+        <option value="resolved">Resuelto</option>
+      </select>
+      <select v-model="channelFilter" class="sp-dropdown">
+        <option value="">Canal</option>
+        <option value="whatsapp">WhatsApp</option>
+        <option value="email">Email</option>
+        <option value="phone">Teléfono</option>
+        <option value="walk_in">Presencial</option>
+        <option value="web_form">Web Form</option>
+      </select>
+      <select v-model="tierFilter" class="sp-dropdown">
+        <option value="">Tier</option>
+        <option value="tier1_auto">Tier 1 — Auto</option>
+        <option value="tier2_rule">Tier 2 — Regla</option>
+        <option value="tier3_open">Tier 3 — Abierto</option>
+      </select>
+      <select v-model="queueFilter" class="sp-dropdown">
+        <option value="">Cola</option>
+        <option value="collections">Cobros</option>
+        <option value="claims">Siniestros</option>
+        <option value="sales">Ventas</option>
+        <option value="renewals">Renovaciones</option>
+        <option value="operations">Operaciones</option>
+        <option value="open_pool">Pool Abierto</option>
+      </select>
+      <select v-model="priorityFilter" class="sp-dropdown">
+        <option value="">Prioridad</option>
+        <option value="urgent">Urgente</option>
+        <option value="high">Alta</option>
+        <option value="medium">Media</option>
+        <option value="low">Baja</option>
+      </select>
+      <select v-model="handlerFilter" class="sp-dropdown">
+        <option value="">Asignado</option>
+        <option v-for="h in uniqueHandlers" :key="h" :value="h">{{ h }}</option>
+      </select>
+      <button v-if="hasActiveFilters" class="sp-clear-btn" @click="clearFilters">
+        <UIcon name="i-heroicons-x-mark" class="w-3 h-3" />
+        Limpiar
+      </button>
+    </div>
+
+    <!-- Tickets table -->
+    <div class="sp-table-wrap">
+      <table class="sp-table">
+        <thead>
+          <tr>
+            <th style="width: 28px;"></th>
+            <th>Ticket</th>
+            <th>Asunto / Último mensaje</th>
+            <th>Cliente</th>
+            <th style="width: 36px;">Canal</th>
+            <th>Tier</th>
+            <th>Cola</th>
+            <th>Estado</th>
+            <th>Prioridad</th>
+            <th>Asignado</th>
+            <th class="text-right">Días</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="t in filteredTickets"
+            :key="t.id"
+            class="sp-row"
+            :class="{ 'sp-breach-row': t.slaPercent >= 100 && t.status !== 'resolved' }"
+            style="cursor: pointer;"
+            @click="navigateTo(`/support/${t.id}`)"
+          >
+            <td><span class="sp-sla-dot" :class="`sp-sla-${slaColor(t.slaPercent)}`" /></td>
+            <td>
+              <NuxtLink :to="`/support/${t.id}`" class="sp-ticket-link" @click.stop>{{ t.id }}</NuxtLink>
+            </td>
+            <td>
+              <p class="text-[13px] font-medium text-[var(--text-primary)] truncate" style="max-width: 260px;">{{ t.subject }}</p>
+              <p class="text-[11px] text-[var(--text-muted)] truncate" style="max-width: 260px;">{{ t.lastMessagePreview }}</p>
+            </td>
+            <td class="text-[13px] text-[var(--text-primary)]">{{ t.customerName || 'Unknown caller' }}</td>
+            <td class="text-center">
+              <UIcon :name="CHANNEL_ICONS[t.channel]" class="w-4 h-4" :style="t.channel === 'whatsapp' ? 'color: #25D366;' : 'color: #8a8a86;'" :title="CHANNEL_LABELS[t.channel]" />
+            </td>
+            <td>
+              <span class="sp-tier-badge" :class="tierClass(t.routingTier)">{{ TIER_LABELS[t.routingTier] }}</span>
+            </td>
+            <td class="text-[12px] text-[var(--text-muted)]">{{ QUEUE_LABELS[t.routedQueue] }}</td>
+            <td>
+              <span :class="statusMeta[t.status].class">{{ statusMeta[t.status].label }}</span>
+            </td>
+            <td>
+              <span :class="priorityMeta[t.priority].class">{{ priorityMeta[t.priority].label }}</span>
+            </td>
+            <td class="text-[12px] text-[var(--text-muted)]">{{ t.assignedTo ?? '—' }}</td>
+            <td class="text-right">
+              <span class="text-[13px] font-bold" :class="t.daysOpen > 14 ? 'text-rose-600' : t.daysOpen > 7 ? 'text-amber-600' : 'text-[var(--text-primary)]'">{{ t.daysOpen }}d</span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.sp-page {
+  max-width: 76rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding-bottom: 3rem;
+}
+
+.sp-action-btn-primary {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 8px 16px; border-radius: 8px;
+  background: #01696f; color: #fff;
+  font-size: 13px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.sp-action-btn-primary:hover { background: #015458; }
+
+/* ── KPI strip ── */
+.sp-kpi-strip {
+  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: rgba(0,0,0,0.06); box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow: hidden;
+}
+.sp-kpi { padding: 14px 18px; background: #fff; }
+.sp-kpi:first-child { border-radius: 12px 0 0 12px; }
+.sp-kpi:last-child { border-radius: 0 12px 12px 0; }
+.sp-kpi-label {
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+}
+.sp-kpi-value {
+  margin-top: 4px; font-size: 22px; font-weight: 600;
+  color: var(--text-primary); font-variant-numeric: tabular-nums;
+}
+@media (max-width: 640px) { .sp-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
+
+/* ── Controls row ── */
+.sp-controls-row {
+  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+}
+
+/* ── View toggle ── */
+.sp-view-toggle {
+  display: inline-flex; gap: 1px; padding: 2px;
+  border-radius: 8px; background: rgba(0,0,0,0.04);
+}
+.sp-view-btn {
+  padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
+  border: none; cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.sp-view-on { background: #01696f; color: white; }
+.sp-view-off { background: transparent; color: #8a8a86; }
+.sp-view-off:hover { color: var(--text-primary); }
+
+/* ── Filter tabs ── */
+.sp-filter-tabs {
+  display: inline-flex; gap: 2px; padding: 3px;
+  border-radius: 10px; background: rgba(0,0,0,0.04);
+}
+.sp-filter-tab {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 6px 12px; border-radius: 8px;
+  font-size: 12px; font-weight: 500; border: none;
+  cursor: pointer; transition: all 150ms ease; white-space: nowrap;
+}
+.sp-filter-on { background: #fff; color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+.sp-filter-off { background: transparent; color: var(--text-muted); }
+.sp-filter-off:hover { color: var(--text-primary); }
+.sp-filter-count {
+  font-size: 10px; font-weight: 600; padding: 1px 5px;
+  border-radius: 9999px; background: rgba(0,0,0,0.06); color: var(--text-muted);
+}
+.sp-filter-count-on { background: rgba(1,105,111,0.1); color: #01696f; }
+
+/* ── Dropdown filters ── */
+.sp-dropdown-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.sp-dropdown {
+  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 500;
+  border: 1px solid rgba(0,0,0,0.08); background: #fff; color: var(--text-primary);
+  cursor: pointer; min-width: 100px;
+}
+.sp-dropdown:focus { outline: none; border-color: #01696f; }
+.sp-clear-btn {
+  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px;
+  border-radius: 8px; font-size: 11px; font-weight: 600;
+  background: rgba(193, 56, 56, 0.06); color: #c13838;
+  border: 1px solid rgba(193, 56, 56, 0.15); cursor: pointer;
+}
+.sp-clear-btn:hover { background: rgba(193, 56, 56, 0.12); }
+
+/* ── Table ── */
+.sp-table-wrap {
+  border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
+  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  overflow-x: auto;
+}
+.sp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.sp-table thead th {
+  padding: 10px 14px;
+  font-size: 11px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: #8a8a86;
+  border-bottom: 1px solid rgba(0,0,0,0.06);
+  white-space: nowrap; text-align: left;
+}
+.sp-table tbody td {
+  padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.04);
+  vertical-align: top;
+}
+.sp-row { transition: background 100ms ease; }
+.sp-row:hover { background: rgba(0,0,0,0.015); }
+.sp-row:last-child td { border-bottom: none; }
+
+/* ── Breach row ── */
+.sp-breach-row { box-shadow: inset 3px 0 0 #c13838; }
+
+/* ── SLA dot ── */
+.sp-sla-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.sp-sla-green { background: #059669; }
+.sp-sla-amber { background: #c27b1a; }
+.sp-sla-red { background: #c13838; }
+
+/* ── Ticket link ── */
+.sp-ticket-link {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px; font-weight: 600; color: #01696f;
+  text-decoration: none;
+}
+.sp-ticket-link:hover { text-decoration: underline; }
+
+/* ── Tier badges ── */
+.sp-tier-badge {
+  display: inline-flex; padding: 2px 7px; border-radius: 8px;
+  font-size: 10px; font-weight: 600; white-space: nowrap;
+}
+.sp-tier-1 { background: rgba(16, 185, 129, 0.08); color: #059669; }
+.sp-tier-2 { background: rgba(59, 130, 246, 0.08); color: #2563eb; }
+.sp-tier-3 { background: rgba(194, 123, 26, 0.08); color: #c27b1a; }
+
+/* ── Status badges ── */
+.sp-st-open { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(193,56,56,0.08); color: #c13838; white-space: nowrap; }
+.sp-st-progress { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap; }
+.sp-st-pending { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(147,51,234,0.08); color: #9333ea; white-space: nowrap; }
+.sp-st-resolved { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9999px; background: rgba(0,0,0,0.04); color: #8a8a86; white-space: nowrap; }
+
+/* ── Priority badges ── */
+.sp-pri-urgent { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9999px; background: rgba(193,56,56,0.12); color: #c13838; white-space: nowrap; }
+.sp-pri-high { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(194,123,26,0.08); color: #c27b1a; white-space: nowrap; }
+.sp-pri-medium { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(0,0,0,0.05); color: #6b6b68; white-space: nowrap; }
+.sp-pri-low { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9999px; background: rgba(0,0,0,0.03); color: #8a8a86; white-space: nowrap; }
+</style>
diff --git a/app/pages/tasks/[id].vue b/app/pages/tasks/[id].vue
index 429fd43..6f8ccd0 100644
--- a/app/pages/tasks/[id].vue
+++ b/app/pages/tasks/[id].vue
@@ -116,8 +116,8 @@ const formatDate = (d: string) => d
             <UBadge color="blue" variant="outline">{{ task.policy_type?.toUpperCase() }}</UBadge>
             <UBadge color="gray" variant="outline">{{ task.comm_type }}</UBadge>
           </div>
-          <h1 class="text-xl font-bold text-slate-900 font-mono">{{ task.application_id }}</h1>
-          <p class="text-gray-500 text-sm">Received {{ formatDate(task.created_at) }}</p>
+          <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)] font-mono">{{ task.application_id }}</h1>
+          <p class="mt-1 text-[13px] text-[var(--text-muted)]">Received {{ formatDate(task.created_at) }}</p>
         </div>
 
         <!-- Actions -->
@@ -148,7 +148,7 @@ const formatDate = (d: string) => d
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <!-- Task info -->
         <UCard>
-          <template #header><p class="font-semibold text-slate-700">Task Info</p></template>
+          <template #header><p class="font-semibold text-[var(--text-primary)]">Task Info</p></template>
           <div class="space-y-2 text-sm">
             <div class="flex justify-between"><span class="text-gray-500">Task ID</span><span class="font-mono text-xs">{{ task.id }}</span></div>
             <div class="flex justify-between"><span class="text-gray-500">Application ID</span><span class="font-mono text-xs">{{ task.application_id }}</span></div>
@@ -162,7 +162,7 @@ const formatDate = (d: string) => d
 
         <!-- Payload -->
         <UCard>
-          <template #header><p class="font-semibold text-slate-700">Request Payload</p></template>
+          <template #header><p class="font-semibold text-[var(--text-primary)]">Request Payload</p></template>
           <div class="space-y-4 text-sm">
             <div v-if="payload?.applicant_info">
               <p class="text-xs font-semibold text-gray-400 uppercase mb-2">Applicant</p>
@@ -188,7 +188,7 @@ const formatDate = (d: string) => d
       <UCard v-if="isSolicitation">
         <template #header>
           <div class="flex justify-between items-center">
-            <p class="font-semibold text-slate-700 flex items-center gap-2">
+            <p class="font-semibold text-[var(--text-primary)] flex items-center gap-2">
               <UIcon name="i-heroicons-document-text" class="w-4 h-4" /> Solicitation Document
             </p>
             <div class="flex gap-2">
@@ -212,7 +212,7 @@ const formatDate = (d: string) => d
         <div v-else class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
           <UIcon name="i-heroicons-document-text" class="w-8 h-8 text-red-400 flex-shrink-0" />
           <div class="flex-1 min-w-0">
-            <p class="text-sm font-medium text-slate-800">Solicitation v{{ task.version ?? 1 }}</p>
+            <p class="text-sm font-medium text-[var(--text-primary)]">Solicitation v{{ task.version ?? 1 }}</p>
             <p class="text-xs text-gray-400 font-mono truncate">{{ task.s3_key }}</p>
           </div>
           <UBadge :color="statusColor(task.status)" variant="soft" size="sm">{{ task.status }}</UBadge>
@@ -225,7 +225,7 @@ const formatDate = (d: string) => d
       <template #content>
         <div class="flex flex-col h-full">
           <div class="flex justify-between items-center p-6 border-b">
-            <div><h2 class="text-lg font-semibold text-slate-900">Record Quote Response</h2></div>
+            <div><h2 class="text-lg font-semibold text-[var(--text-primary)]">Record Quote Response</h2></div>
             <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="isRespondOpen = false" />
           </div>
           <div class="flex-1 overflow-y-auto p-6 space-y-6">
@@ -239,12 +239,12 @@ const formatDate = (d: string) => d
             </div>
             <div class="space-y-3">
               <div class="flex justify-between items-center">
-                <p class="font-medium text-sm text-slate-700">Plans <UBadge color="gray" variant="soft" size="xs" class="ml-1">{{ plans.length }}</UBadge></p>
+                <p class="font-medium text-sm text-[var(--text-primary)]">Plans <UBadge color="gray" variant="soft" size="xs" class="ml-1">{{ plans.length }}</UBadge></p>
                 <UButton icon="i-heroicons-plus" size="xs" color="gray" variant="soft" @click="addPlan">Add Plan</UButton>
               </div>
               <div v-for="(plan, i) in plans" :key="i" class="border rounded-lg p-4 space-y-3">
                 <div class="flex justify-between items-center">
-                  <p class="text-sm font-semibold text-slate-700">Plan {{ i + 1 }}</p>
+                  <p class="text-sm font-semibold text-[var(--text-primary)]">Plan {{ i + 1 }}</p>
                   <UButton v-if="plans.length > 1" icon="i-heroicons-trash" size="xs" color="red" variant="ghost" @click="removePlan(i)" />
                 </div>
                 <div class="grid grid-cols-2 gap-3">
@@ -275,7 +275,7 @@ const formatDate = (d: string) => d
         <div class="flex flex-col h-full">
           <div class="flex justify-between items-center p-6 border-b">
             <div>
-              <h2 class="text-lg font-semibold text-slate-900">Issue Policy</h2>
+              <h2 class="text-lg font-semibold text-[var(--text-primary)]">Issue Policy</h2>
               <p class="text-sm text-gray-500">Enter the policy details from the provider</p>
             </div>
             <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="isIssueOpen = false" />
diff --git a/app/pages/tasks/index.vue b/app/pages/tasks/index.vue
index dc2f096..72a6384 100644
--- a/app/pages/tasks/index.vue
+++ b/app/pages/tasks/index.vue
@@ -72,8 +72,8 @@ const formatDate = (date: string) => {
     <!-- Header -->
     <div class="flex justify-between items-center">
       <div>
-        <h1 class="text-3xl text-slate-900 font-bold">Tasks</h1>
-        <p class="text-gray-500 text-sm">Carrier Inbox — Quote & Solicitation Requests</p>
+        <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Tasks</h1>
+        <p class="text-[13px] text-[var(--text-muted)]">Carrier Inbox — Quote & Solicitation Requests</p>
       </div>
       <div class="flex items-center gap-3">
         <UBadge color="gray" variant="soft" size="lg">{{ total }} tasks</UBadge>
@@ -131,7 +131,7 @@ const formatDate = (date: string) => {
                 </div>
 
                 <div class="min-w-0">
-                  <p class="font-mono text-sm font-medium text-slate-800 truncate">
+                  <p class="font-mono text-sm font-medium text-[var(--text-primary)] truncate">
                     {{ task.application_id }}
                   </p>
                   <p class="text-xs text-gray-400">
diff --git a/app/pages/workstation/claims.vue b/app/pages/workstation/claims.vue
new file mode 100644
index 0000000..d6e3883
--- /dev/null
+++ b/app/pages/workstation/claims.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+usePageTitle('Claims')
+</script>
+
+<template>
+  <div class="mx-auto max-w-2xl py-16 text-center">
+    <div class="inline-flex flex-col items-center gap-4">
+      <span
+        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
+        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
+      >Coming soon</span>
+      <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Claims</h1>
+      <p class="text-[14px] leading-relaxed text-[var(--text-muted)]">
+        File, track, and manage insurance claims from first notice through resolution.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/workstation/collections.vue b/app/pages/workstation/collections.vue
new file mode 100644
index 0000000..f08c4aa
--- /dev/null
+++ b/app/pages/workstation/collections.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+usePageTitle('Collections')
+</script>
+
+<template>
+  <div class="mx-auto max-w-2xl py-16 text-center">
+    <div class="inline-flex flex-col items-center gap-4">
+      <span
+        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
+        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
+      >Coming soon</span>
+      <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Collections</h1>
+      <p class="text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Track outstanding balances, manage payment follow-ups, and reconcile carrier accounts.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/workstation/collectivos.vue b/app/pages/workstation/collectivos.vue
new file mode 100644
index 0000000..08facb0
--- /dev/null
+++ b/app/pages/workstation/collectivos.vue
@@ -0,0 +1,329 @@
+<script setup lang="ts">
+usePageTitle('Collectivos')
+
+const activeTab = ref<'groups' | 'census' | 'billing'>('groups')
+</script>
+
+<template>
+  <div class="mx-auto max-w-5xl space-y-6 pb-12">
+    <!-- Header -->
+    <div class="max-w-2xl">
+      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Collectivos</h1>
+      <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Manage group policies end to end — from census intake through billing reconciliation.
+      </p>
+    </div>
+
+    <!-- Workspace tabs -->
+    <div class="col-tabs">
+      <button
+        v-for="tab in [
+          { id: 'groups' as const, label: 'Active Groups', count: 12 },
+          { id: 'census' as const, label: 'Census & Members', count: null },
+          { id: 'billing' as const, label: 'Billing Cycles', count: 3 },
+        ]"
+        :key="tab.id"
+        type="button"
+        class="col-tab"
+        :class="activeTab === tab.id ? 'col-tab-active' : 'col-tab-inactive'"
+        @click="activeTab = tab.id"
+      >
+        {{ tab.label }}
+        <span v-if="tab.count" class="col-tab-count" :class="activeTab === tab.id ? 'col-tab-count-active' : ''">{{ tab.count }}</span>
+      </button>
+    </div>
+
+    <!-- ═══ ACTIVE GROUPS ═══ -->
+    <template v-if="activeTab === 'groups'">
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <UInput icon="i-heroicons-magnifying-glass" placeholder="Search groups..." size="sm" class="w-64" />
+        <UButton color="primary" size="sm" icon="i-heroicons-plus">New Group Policy</UButton>
+      </div>
+
+      <div class="col-card">
+        <table class="col-table">
+          <thead>
+            <tr>
+              <th>Group</th>
+              <th>Carrier</th>
+              <th>Line</th>
+              <th>Members</th>
+              <th>Premium</th>
+              <th>Renewal</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="group in [
+              { name: 'Constructora Delta S.A.', carrier: 'ASSA', line: 'Health', members: 84, premium: '$42,600', renewal: '2025-09-01', status: 'Active' },
+              { name: 'Hotel Pacífico Group', carrier: 'INS', line: 'Life', members: 127, premium: '$78,200', renewal: '2025-07-15', status: 'Active' },
+              { name: 'Banco Regional', carrier: 'Mapfre', line: 'Health', members: 312, premium: '$186,400', renewal: '2025-11-01', status: 'Active' },
+              { name: 'Farmacia Salud', carrier: 'ASSA', line: 'Life', members: 23, premium: '$12,800', renewal: '2025-06-01', status: 'Renewal due' },
+              { name: 'Transportes del Sur', carrier: 'Qualitas', line: 'Auto', members: 56, premium: '$34,100', renewal: '2025-08-15', status: 'Active' },
+            ]" :key="group.name" class="col-table-row">
+              <td>
+                <p class="text-[13px] font-medium text-[var(--text-primary)]">{{ group.name }}</p>
+              </td>
+              <td class="text-[13px] text-[var(--text-muted)]">{{ group.carrier }}</td>
+              <td>
+                <span class="col-line-badge">{{ group.line }}</span>
+              </td>
+              <td class="text-[13px] tabular-nums text-[var(--text-primary)]">{{ group.members }}</td>
+              <td class="text-[13px] font-medium tabular-nums text-[var(--text-primary)]">{{ group.premium }}</td>
+              <td class="text-[13px] tabular-nums text-[var(--text-muted)]">{{ group.renewal }}</td>
+              <td>
+                <span
+                  class="col-status"
+                  :class="group.status === 'Active' ? 'col-status-active' : 'col-status-attention'"
+                >{{ group.status }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+
+    <!-- ═══ CENSUS & MEMBERS ═══ -->
+    <template v-if="activeTab === 'census'">
+      <div class="grid gap-4 sm:grid-cols-3">
+        <div class="col-action-card" v-for="action in [
+          { icon: 'i-heroicons-arrow-up-tray', title: 'Upload Census', desc: 'Import a member roster from Excel or CSV. AI validates and flags issues.' },
+          { icon: 'i-heroicons-user-plus', title: 'Add Members', desc: 'Add individual members to an active group, with effective date and tier.' },
+          { icon: 'i-heroicons-arrow-path', title: 'Reconcile Changes', desc: 'Process additions, removals, and tier changes against the carrier file.' },
+        ]" :key="action.title">
+          <div class="col-action-icon">
+            <UIcon :name="action.icon" style="width: 20px; height: 20px;" />
+          </div>
+          <p class="mt-3 text-[14px] font-medium text-[var(--text-primary)]">{{ action.title }}</p>
+          <p class="mt-1 text-[12px] leading-relaxed text-[var(--text-muted)]">{{ action.desc }}</p>
+        </div>
+      </div>
+
+      <div class="col-card">
+        <div class="col-card-header">
+          <p class="text-[14px] font-semibold text-[var(--text-primary)]">Recent census activity</p>
+        </div>
+        <div class="col-activity-list">
+          <div v-for="event in [
+            { group: 'Constructora Delta S.A.', action: 'Census uploaded', detail: '84 members validated, 2 flagged', time: '2 hours ago' },
+            { group: 'Hotel Pacífico Group', action: '3 members added', detail: 'Effective 2025-05-01, Health tier Family', time: 'Yesterday' },
+            { group: 'Banco Regional', action: 'Reconciliation complete', detail: '+5 additions, -2 removals sent to Mapfre', time: '3 days ago' },
+            { group: 'Farmacia Salud', action: 'Census flagged', detail: '1 duplicate ID, 1 missing DOB — pending review', time: '5 days ago' },
+          ]" :key="event.group + event.action" class="col-activity-row">
+            <div class="min-w-0 flex-1">
+              <p class="text-[13px] text-[var(--text-primary)]">
+                <span class="font-medium">{{ event.group }}</span>
+                <span class="text-[var(--text-muted)]"> — {{ event.action }}</span>
+              </p>
+              <p class="mt-0.5 text-[12px] text-[var(--text-muted)]">{{ event.detail }}</p>
+            </div>
+            <span class="shrink-0 text-[11px] text-[var(--text-muted)]">{{ event.time }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- ═══ BILLING CYCLES ═══ -->
+    <template v-if="activeTab === 'billing'">
+      <div class="grid gap-4 sm:grid-cols-3">
+        <div v-for="stat in [
+          { label: 'Due this month', value: '3', sub: '$247,200 premium' },
+          { label: 'Pending carrier confirmation', value: '1', sub: 'Awaiting INS response' },
+          { label: 'Overdue', value: '0', sub: 'All current' },
+        ]" :key="stat.label" class="col-stat-card">
+          <p class="text-[11px] font-semibold uppercase tracking-[0.06em] text-[#8a8a86]">{{ stat.label }}</p>
+          <p class="mt-1.5 text-[22px] font-semibold tabular-nums text-[var(--text-primary)]" style="font-variant-numeric: tabular-nums;">{{ stat.value }}</p>
+          <p class="mt-0.5 text-[12px] text-[var(--text-muted)]">{{ stat.sub }}</p>
+        </div>
+      </div>
+
+      <div class="col-card">
+        <div class="col-card-header">
+          <p class="text-[14px] font-semibold text-[var(--text-primary)]">Upcoming billing</p>
+          <p class="text-[13px] text-[var(--text-muted)]">Next 60 days</p>
+        </div>
+        <div class="col-activity-list">
+          <div v-for="bill in [
+            { group: 'Farmacia Salud', period: 'Jun 2025', amount: '$12,800', due: '2025-06-01', status: 'Due soon' },
+            { group: 'Hotel Pacífico Group', period: 'Jul 2025', amount: '$78,200', due: '2025-07-15', status: 'Scheduled' },
+            { group: 'Transportes del Sur', period: 'Aug 2025', amount: '$34,100', due: '2025-08-15', status: 'Scheduled' },
+          ]" :key="bill.group" class="col-activity-row">
+            <div class="min-w-0 flex-1">
+              <p class="text-[13px] font-medium text-[var(--text-primary)]">{{ bill.group }}</p>
+              <p class="mt-0.5 text-[12px] text-[var(--text-muted)]">{{ bill.period }} · Due {{ bill.due }}</p>
+            </div>
+            <div class="flex items-center gap-3">
+              <span class="text-[13px] font-medium tabular-nums text-[var(--text-primary)]">{{ bill.amount }}</span>
+              <span
+                class="col-status"
+                :class="bill.status === 'Due soon' ? 'col-status-attention' : 'col-status-neutral'"
+              >{{ bill.status }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* ── Tabs ── */
+.col-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  width: fit-content;
+}
+.col-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.col-tab-active {
+  background: #ffffff;
+  color: var(--text-primary);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+.col-tab-inactive {
+  background: transparent;
+  color: var(--text-muted);
+}
+.col-tab-inactive:hover { color: var(--text-primary); }
+.col-tab-count {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--text-muted);
+}
+.col-tab-count-active {
+  background: rgba(1, 105, 111, 0.1);
+  color: #01696f;
+}
+
+/* ── Card ── */
+.col-card {
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+.col-card-header {
+  padding: 20px 20px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+/* ── Table ── */
+.col-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.col-table th {
+  text-align: left;
+  padding: 10px 16px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #8a8a86;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+.col-table-row td {
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+  vertical-align: middle;
+}
+.col-table-row:last-child td { border-bottom: none; }
+.col-table-row:hover { background: rgba(0, 0, 0, 0.015); }
+
+/* ── Badges ── */
+.col-line-badge {
+  display: inline-flex;
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  background: rgba(1, 105, 111, 0.06);
+  color: #01696f;
+}
+.col-status {
+  display: inline-flex;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 600;
+}
+.col-status-active {
+  background: rgba(15, 123, 95, 0.08);
+  color: #0f7b5f;
+}
+.col-status-attention {
+  background: rgba(150, 66, 25, 0.08);
+  color: #964219;
+}
+.col-status-neutral {
+  background: rgba(0, 0, 0, 0.04);
+  color: var(--text-muted);
+}
+
+/* ── Action cards ── */
+.col-action-card {
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+.col-action-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  border-color: rgba(1, 105, 111, 0.2);
+}
+.col-action-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: rgba(1, 105, 111, 0.06);
+  color: #01696f;
+}
+
+/* ── Stat cards ── */
+.col-stat-card {
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+
+/* ── Activity list ── */
+.col-activity-list {
+  display: flex;
+  flex-direction: column;
+}
+.col-activity-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+.col-activity-row:last-child { border-bottom: none; }
+.col-activity-row:hover { background: rgba(0, 0, 0, 0.015); }
+</style>
diff --git a/app/pages/workstation/customer-service.vue b/app/pages/workstation/customer-service.vue
new file mode 100644
index 0000000..0757e58
--- /dev/null
+++ b/app/pages/workstation/customer-service.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+usePageTitle('Customer Service')
+</script>
+
+<template>
+  <div class="mx-auto max-w-2xl py-16 text-center">
+    <div class="inline-flex flex-col items-center gap-4">
+      <span
+        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
+        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
+      >Coming soon</span>
+      <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Customer Service</h1>
+      <p class="text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Handle service requests, endorsements, and policyholder inquiries from a unified inbox.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/pages/workstation/facturacion.vue b/app/pages/workstation/facturacion.vue
new file mode 100644
index 0000000..f80338a
--- /dev/null
+++ b/app/pages/workstation/facturacion.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+usePageTitle('Facturación')
+</script>
+
+<template>
+  <div class="fac-page">
+    <div class="flex flex-wrap items-start justify-between gap-4">
+      <div>
+        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Facturación</h1>
+        <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
+          Invoicing workflow for the brokerage. Generate, track, and manage invoices tied to policies, commissions, and client accounts. Integrates with carrier billing and AR to keep financials in sync.
+        </p>
+      </div>
+      <span
+        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
+        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
+      >Coming soon</span>
+    </div>
+
+    <!-- Feature preview -->
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div class="fac-card">
+        <div class="fac-icon" style="background: rgba(1,105,111,0.08); color: #01696f;">
+          <UIcon name="i-heroicons-document-text" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="fac-card-title">Invoice generation</h3>
+        <p class="fac-card-desc">Create invoices from bound policies, endorsements, or manual entries. Auto-populate client data, premium breakdowns, and tax fields.</p>
+      </div>
+
+      <div class="fac-card">
+        <div class="fac-icon" style="background: rgba(124,58,237,0.08); color: #7c3aed;">
+          <UIcon name="i-heroicons-arrow-path" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="fac-card-title">Recurring billing</h3>
+        <p class="fac-card-desc">Schedule monthly, quarterly, or annual invoices for policies with installment plans. Automatic reminders on upcoming due dates.</p>
+      </div>
+
+      <div class="fac-card">
+        <div class="fac-icon" style="background: rgba(194,123,26,0.08); color: #c27b1a;">
+          <UIcon name="i-heroicons-banknotes" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="fac-card-title">Payment tracking</h3>
+        <p class="fac-card-desc">Record payments against invoices, mark partial payments, and flag overdue balances. Ties into the collections workstation.</p>
+      </div>
+
+      <div class="fac-card">
+        <div class="fac-icon" style="background: rgba(15,123,95,0.08); color: #0f7b5f;">
+          <UIcon name="i-heroicons-building-office-2" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="fac-card-title">Carrier reconciliation</h3>
+        <p class="fac-card-desc">Match brokerage invoices to carrier statements. Surface discrepancies between what was billed and what was remitted.</p>
+      </div>
+
+      <div class="fac-card">
+        <div class="fac-icon" style="background: rgba(193,56,56,0.08); color: #c13838;">
+          <UIcon name="i-heroicons-document-arrow-down" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="fac-card-title">PDF & export</h3>
+        <p class="fac-card-desc">Generate branded PDF invoices, export batches to CSV for accounting software, or integrate via API with ERP systems.</p>
+      </div>
+
+      <div class="fac-card">
+        <div class="fac-icon" style="background: rgba(190,24,93,0.08); color: #be185d;">
+          <UIcon name="i-heroicons-chart-bar" style="width: 20px; height: 20px;" />
+        </div>
+        <h3 class="fac-card-title">Billing analytics</h3>
+        <p class="fac-card-desc">Aging reports, collection rates by client segment, revenue recognition dashboards, and commission payout summaries.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fac-page {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 64rem;
+  margin: 0 auto;
+  padding-bottom: 3rem;
+}
+.fac-card {
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,0.06);
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: all 200ms ease;
+}
+.fac-card:hover {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+  border-color: rgba(1,105,111,0.15);
+}
+.fac-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px; height: 36px;
+  border-radius: 10px;
+}
+.fac-card-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.fac-card-desc {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+</style>
diff --git a/app/pages/workstation/renewals.vue b/app/pages/workstation/renewals.vue
new file mode 100644
index 0000000..d2d817f
--- /dev/null
+++ b/app/pages/workstation/renewals.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+usePageTitle('Renewals')
+</script>
+
+<template>
+  <div class="mx-auto max-w-2xl py-16 text-center">
+    <div class="inline-flex flex-col items-center gap-4">
+      <span
+        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
+        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
+      >Coming soon</span>
+      <h1 class="text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Renewals</h1>
+      <p class="text-[14px] leading-relaxed text-[var(--text-muted)]">
+        Monitor upcoming policy expirations and manage the renewal pipeline end to end.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/plugins/open-fetch-policy-auth.ts b/app/plugins/open-fetch-policy-auth.ts
new file mode 100644
index 0000000..dde1e29
--- /dev/null
+++ b/app/plugins/open-fetch-policy-auth.ts
@@ -0,0 +1,20 @@
+export default defineNuxtPlugin({
+  name: 'open-fetch-policy-auth',
+  setup(nuxtApp) {
+    const { policyApiToken } = useRuntimeConfig().public
+    const token = typeof policyApiToken === 'string' ? policyApiToken : ''
+    if (!token) return
+
+    nuxtApp.hook('openFetch:onRequest:policy', (ctx) => {
+      const headers = ctx.options.headers
+      if (headers instanceof Headers) {
+        if (!headers.has('Authorization')) headers.set('Authorization', `Bearer ${token}`)
+      } else {
+        const h = (headers ?? {}) as Record<string, string>
+        if (!h.Authorization && !h.authorization) {
+          ctx.options.headers = { ...h, Authorization: `Bearer ${token}` }
+        }
+      }
+    })
+  }
+})
diff --git a/app/plugins/theme-hydrate.client.ts b/app/plugins/theme-hydrate.client.ts
new file mode 100644
index 0000000..93d8245
--- /dev/null
+++ b/app/plugins/theme-hydrate.client.ts
@@ -0,0 +1,11 @@
+/** Apply saved theme before paint to reduce flash (pairs with useAppTheme). */
+export default defineNuxtPlugin(() => {
+  try {
+    const t = localStorage.getItem('policy-ui.theme.v1')
+    if (t && ['light', 'purple', 'dark', 'dark-purple'].includes(t)) {
+      document.documentElement.setAttribute('data-theme', t)
+    }
+  } catch {
+    /* ignore */
+  }
+})
diff --git a/app/types/app-theme.ts b/app/types/app-theme.ts
new file mode 100644
index 0000000..f661c56
--- /dev/null
+++ b/app/types/app-theme.ts
@@ -0,0 +1,14 @@
+export type AppThemeId = 'light' | 'purple' | 'dark' | 'dark-purple'
+
+export type AppThemeMeta = {
+  id: AppThemeId
+  label: string
+  description: string
+}
+
+export const APP_THEME_OPTIONS: AppThemeMeta[] = [
+  { id: 'light', label: 'Stone', description: 'Petroleum teal on warm stone — default.' },
+  { id: 'purple', label: 'Aubergine', description: 'Muted plum accent on warm stone.' },
+  { id: 'dark', label: 'Carbon', description: 'Warm dark with teal accent — low fatigue.' },
+  { id: 'dark-purple', label: 'Dusk', description: 'Deep plum with soft violet accent.' }
+]
diff --git a/app/types/auto-quote-intake.ts b/app/types/auto-quote-intake.ts
new file mode 100644
index 0000000..b28ab29
--- /dev/null
+++ b/app/types/auto-quote-intake.ts
@@ -0,0 +1,46 @@
+export type AutoQuoteMode = 'single' | 'comparative_pdf'
+
+export type AutoQuoteSegment = 'individual' | 'corporate' | 'fleet'
+
+export type AutoQuoteClient = {
+  fullName: string
+  email: string
+  phone: string
+  /** Cédula / pasaporte / ID */
+  documentId: string
+  /** Used when segment is corporate or fleet */
+  organizationName: string
+}
+
+export type AutoQuoteVehicle = {
+  subRamo: string
+  clase: string
+  uso: string
+  marca: string
+  modelo: string
+  placa: string
+  year: string | null
+  capacidadPasajeros: string
+  valorVehiculo: string
+}
+
+export type AutoQuoteSolicit = {
+  carrierIds: string[]
+  planIds: string[]
+}
+
+export type AutoQuoteDraft = {
+  quoteMode: AutoQuoteMode | null
+  segment: AutoQuoteSegment | null
+  client: AutoQuoteClient
+  vehicle: AutoQuoteVehicle
+  solicit: AutoQuoteSolicit
+}
+
+export type AutoQuoteIntakePayload = {
+  quoteMode: AutoQuoteMode
+  segment: AutoQuoteSegment
+  client: AutoQuoteClient
+  vehicle: AutoQuoteVehicle
+  solicit: AutoQuoteSolicit
+}
diff --git a/app/types/branding.ts b/app/types/branding.ts
new file mode 100644
index 0000000..ddc7d09
--- /dev/null
+++ b/app/types/branding.ts
@@ -0,0 +1,10 @@
+export type BrokerageBrandingState = {
+  companyName: string
+  logoDataUrl: string | null
+  logoFileName: string
+  reportPageHeader: string
+  reportPageFooter: string
+}
+
+export const BRANDING_STORAGE_KEY = 'policy-ui-brokerage-branding-v1'
+export const MAX_LOGO_FILE_BYTES = 600_000
diff --git a/app/types/brokerage-registration.ts b/app/types/brokerage-registration.ts
new file mode 100644
index 0000000..98c25ef
--- /dev/null
+++ b/app/types/brokerage-registration.ts
@@ -0,0 +1,69 @@
+/** Natural-person client row (NUEVO REGISTRO | CLIENTE) */
+export type ClientRegistrationNatural = {
+  id: string
+  economicGroupId: string
+  conglomerateId: string
+  personType: 'natural' | 'juridica'
+  apellidoPaterno: string
+  apellidoMaterno: string
+  primerNombre: string
+  segundoNombre: string
+  fechaNacimiento: string
+  tipoIdentificacion: string
+  cedulaOPasaporte: string
+  telefonoCelular: string
+  correoElectronicoPersonal: string
+  ocupacion: string
+  procedencia: string
+  detalle: string
+  descripcion: string
+}
+
+export type ClientCaptureMeta = {
+  operadorId: string
+  operadorNombre: string
+  fechaCaptura: string
+  progresoCapturaPct: number
+  estado: string
+}
+
+export type PolicyCommissionRow = {
+  idx: number
+  agenteId: string
+  porcentaje: string
+}
+
+export type PolicyInstallmentRow = {
+  n: number
+  fechaVencimiento: string
+  prima: string
+}
+
+export type PolicyRegistration = {
+  mintPolicyNumber: string
+  contratanteId: string
+  ramo: string
+  subRamo: string
+  aseguradora: string
+  producto: string
+  agencia: string
+  numeroPolizaProveedor: string
+  acreedor: string
+  fechaEmision: string
+  inicioVigencia: string
+  finVigencia: string
+  comisiones: PolicyCommissionRow[]
+  formaPago: string
+  valorAsegurado: string
+  primaBruta: string
+  impuestoPct: string
+  primaNeta: string
+  numCuotas: number
+  cuotas: PolicyInstallmentRow[]
+  cotizacionMintId: string
+  pdfCotizacionNombre: string
+  pdfPolizaNombre: string
+  notas: string
+}
+
+export const POLICY_DRAFT_STORAGE_KEY = 'policy-registration-draft-v1'
diff --git a/app/types/customer-profile.ts b/app/types/customer-profile.ts
new file mode 100644
index 0000000..053ca27
--- /dev/null
+++ b/app/types/customer-profile.ts
@@ -0,0 +1,55 @@
+export type CustomerProfileVault = {
+  version: number
+  full_name: string
+  document_id: string
+  document_expiry: string
+  nationality: string
+  smoking: boolean
+  height_cm: string
+  weight_kg: string
+  medical_conditions: string
+  plate: string
+  vin: string
+  year: string
+  use_type: string
+  declared_value: string
+  network: string
+  deductible_usd: string
+  preexisting_disclosure: string
+  coverage_zone: string
+  usa_cover: string
+  repatriation: string
+  address: string
+  construction_type: string
+  contents_sum: string
+  updatedAt: string
+}
+
+export function emptyCustomerProfile(): CustomerProfileVault {
+  return {
+    version: 1,
+    full_name: '',
+    document_id: '',
+    document_expiry: '',
+    nationality: '',
+    smoking: false,
+    height_cm: '',
+    weight_kg: '',
+    medical_conditions: '',
+    plate: '',
+    vin: '',
+    year: '',
+    use_type: '',
+    declared_value: '',
+    network: '',
+    deductible_usd: '',
+    preexisting_disclosure: '',
+    coverage_zone: '',
+    usa_cover: '',
+    repatriation: '',
+    address: '',
+    construction_type: '',
+    contents_sum: '',
+    updatedAt: new Date().toISOString()
+  }
+}
diff --git a/app/types/form-catalog.ts b/app/types/form-catalog.ts
new file mode 100644
index 0000000..77bbc1d
--- /dev/null
+++ b/app/types/form-catalog.ts
@@ -0,0 +1,40 @@
+export type FormCatalogPersonKind = 'natural' | 'juridica' | 'both'
+
+export type FormCatalogProductLine =
+  | 'life'
+  | 'health_local'
+  | 'health_international'
+  | 'auto_full_coverage'
+  | 'auto_dat_liability'
+  | 'home'
+  | 'general_liability'
+  | 'any'
+
+export type FormCatalogEntryKind = 'carrier_pdf' | 'identity' | 'other'
+
+export type FormCatalogRow = {
+  id: number
+  description: string
+  insurerSlugs: string[]
+  subRamoKey: string
+  subRamoLabel: string
+  personKinds: FormCatalogPersonKind
+  productLine: FormCatalogProductLine | null
+  fileUrl: string
+  fileLabel: string
+  badge?: string | number
+  kind?: FormCatalogEntryKind
+  fieldGroupIds?: string[]
+}
+
+export type FormCatalogFile = {
+  version: number
+  rows: FormCatalogRow[]
+}
+
+export type FormCatalogSelection = {
+  insurerSlug: string | null
+  subRamoKey: string | null
+  personKind: 'natural' | 'juridica'
+  productLine: FormCatalogProductLine | 'any' | null
+}
diff --git a/app/types/form-field-groups.ts b/app/types/form-field-groups.ts
new file mode 100644
index 0000000..83ac287
--- /dev/null
+++ b/app/types/form-field-groups.ts
@@ -0,0 +1,11 @@
+export type FormFieldGroupDef = {
+  id: string
+  title: string
+  description: string
+  fieldKeys: string[]
+}
+
+export type FormFieldGroupsFile = {
+  version: number
+  groups: FormFieldGroupDef[]
+}
diff --git a/app/types/health-quote-intake.ts b/app/types/health-quote-intake.ts
new file mode 100644
index 0000000..788e5af
--- /dev/null
+++ b/app/types/health-quote-intake.ts
@@ -0,0 +1,40 @@
+import type { AutoQuoteClient } from '~/types/auto-quote-intake'
+
+export type HealthQuoteMode = 'single' | 'comparative_pdf'
+
+export type HealthQuoteSegment = 'individual' | 'corporate' | 'group'
+
+export type HealthQuoteDraft = {
+  quoteMode: HealthQuoteMode | null
+  segment: HealthQuoteSegment | null
+  client: AutoQuoteClient
+  /** Coverage / product context */
+  health: {
+    coverageArea: '' | 'local' | 'international'
+    networkTier: string
+    deductible: string
+    /** Subscriber screening */
+    dateOfBirth: string
+    age: string
+    preexistingConditions: boolean
+    preexistingDetails: string
+  }
+  /** Mock: forms marked complete to proceed */
+  forms: {
+    medicalQuestionnaire: boolean
+    beneficiaryDesignation: boolean
+    groupCensus: boolean
+  }
+  solicit: {
+    carrierIds: string[]
+    planIds: string[]
+  }
+}
+
+export type HealthQuoteIntakePayload = {
+  quoteMode: HealthQuoteMode
+  segment: HealthQuoteSegment
+  client: AutoQuoteClient
+  health: HealthQuoteDraft['health']
+  solicit: HealthQuoteDraft['solicit']
+}
diff --git a/app/types/life-quote-intake.ts b/app/types/life-quote-intake.ts
new file mode 100644
index 0000000..5cc7b20
--- /dev/null
+++ b/app/types/life-quote-intake.ts
@@ -0,0 +1,42 @@
+import type { AutoQuoteClient } from '~/types/auto-quote-intake'
+
+export type LifeQuoteMode = 'single' | 'comparative_pdf'
+
+export type LifeQuoteSegment = 'individual' | 'corporate_keyman' | 'group'
+
+export type LifeQuoteDraft = {
+  quoteMode: LifeQuoteMode | null
+  segment: LifeQuoteSegment | null
+  client: AutoQuoteClient
+  /** Life-specific subscriber details */
+  life: {
+    dateOfBirth: string
+    age: string
+    gender: string
+    smoker: boolean
+    preexistingConditions: boolean
+    preexistingDetails: string
+    coverageAmount: string
+    coverageTerm: string
+    beneficiaryName: string
+    beneficiaryRelationship: string
+  }
+  /** Mock: forms marked complete to proceed */
+  forms: {
+    medicalQuestionnaire: boolean
+    beneficiaryDesignation: boolean
+    groupCensus: boolean
+  }
+  solicit: {
+    carrierIds: string[]
+    planIds: string[]
+  }
+}
+
+export type LifeQuoteIntakePayload = {
+  quoteMode: LifeQuoteMode
+  segment: LifeQuoteSegment
+  client: AutoQuoteClient
+  life: LifeQuoteDraft['life']
+  solicit: LifeQuoteDraft['solicit']
+}
diff --git a/app/types/pdf-field-mapping.ts b/app/types/pdf-field-mapping.ts
new file mode 100644
index 0000000..57d4b7c
--- /dev/null
+++ b/app/types/pdf-field-mapping.ts
@@ -0,0 +1,9 @@
+export type PdfFieldMappingRow = {
+  catalogFormId: number
+  fields: Record<string, string>
+}
+
+export type PdfFieldMappingFile = {
+  version: number
+  mappings: PdfFieldMappingRow[]
+}
diff --git a/app/types/provider-contacts.ts b/app/types/provider-contacts.ts
new file mode 100644
index 0000000..9cfb2d5
--- /dev/null
+++ b/app/types/provider-contacts.ts
@@ -0,0 +1,58 @@
+export type ProviderEmailRole =
+  | 'general'
+  | 'claims'
+  | 'renewals'
+  | 'management'
+  | 'general_risk_quotes'
+  | 'auto_full_coverage_quotes'
+  | 'auto_dat_quotes'
+  | 'health_local_quotes'
+  | 'health_international_quotes'
+  | 'other_quotes'
+  | 'other'
+
+export type ProviderContactEmails = Record<ProviderEmailRole, string>
+
+export const PROVIDER_EMAIL_ROLE_ORDER: ProviderEmailRole[] = [
+  'general',
+  'claims',
+  'renewals',
+  'management',
+  'general_risk_quotes',
+  'auto_full_coverage_quotes',
+  'auto_dat_quotes',
+  'health_local_quotes',
+  'health_international_quotes',
+  'other_quotes',
+  'other'
+]
+
+export const PROVIDER_EMAIL_ROLE_LABEL: Record<ProviderEmailRole, string> = {
+  general: 'General',
+  claims: 'Claims',
+  renewals: 'Renewals',
+  management: 'Management',
+  general_risk_quotes: 'General risk quotes',
+  auto_full_coverage_quotes: 'Auto · full coverage quotes',
+  auto_dat_quotes: 'Auto · DAT (liability) quotes',
+  health_local_quotes: 'Health · local quotes',
+  health_international_quotes: 'Health · international quotes',
+  other_quotes: 'Other quotes',
+  other: 'Other'
+}
+
+export function emptyProviderContacts(): ProviderContactEmails {
+  return {
+    general: '',
+    claims: '',
+    renewals: '',
+    management: '',
+    general_risk_quotes: '',
+    auto_full_coverage_quotes: '',
+    auto_dat_quotes: '',
+    health_local_quotes: '',
+    health_international_quotes: '',
+    other_quotes: '',
+    other: ''
+  }
+}
diff --git a/app/types/quote-view-model.ts b/app/types/quote-view-model.ts
new file mode 100644
index 0000000..7e89b06
--- /dev/null
+++ b/app/types/quote-view-model.ts
@@ -0,0 +1,48 @@
+export type QuoteClientSnapshot = {
+  name: string
+  ageYears: number
+  gender: 'Femenino' | 'Masculino' | 'Otro'
+  smoker: boolean
+  riskClass: string
+  occupation: string
+}
+
+export type QuoteRequestSnapshot = {
+  sumAssuredUsd: number
+  monthlyPremiumUsd: number
+  annualPremiumUsd: number
+  benefitTypeLabel: string
+  additionalCoverageLabel: string
+  initialDepositLabel: string
+}
+
+export type QuoteSavingsCell = {
+  yearLabel: string
+  ageLabel: string
+  guaranteed: number
+  projected: number
+}
+
+export type QuoteCarrierProductRow = {
+  carrierName: string
+  productName: string
+  ratesLine: string
+  sumAssuredUsd: number
+  cells: QuoteSavingsCell[]
+  highlightProjectedUsd?: number
+  highlightNote?: string
+  footnote?: string
+}
+
+export type QuoteComparativeView = {
+  title: string
+  subtitle: string
+  tagline: string
+  quoteDateIso: string
+  validDays: number
+  client: QuoteClientSnapshot
+  request: QuoteRequestSnapshot
+  carriers: QuoteCarrierProductRow[]
+  accumulatedPremiumsUsd: number[]
+  advisorColumns: [string, string, string]
+}
diff --git a/app/types/roles.ts b/app/types/roles.ts
new file mode 100644
index 0000000..17d272a
--- /dev/null
+++ b/app/types/roles.ts
@@ -0,0 +1,15 @@
+export type SegurosPermissionKey =
+  | 'profile'
+  | 'portfolio'
+  | 'layers'
+  | 'tasks'
+  | 'billing'
+  | 'analytics'
+  | 'support'
+
+export type RoleRow = {
+  id: number
+  description: string
+  active: boolean
+  seguros: Record<SegurosPermissionKey, boolean>
+}
diff --git a/app/types/welcome-dashboard.ts b/app/types/welcome-dashboard.ts
new file mode 100644
index 0000000..33af733
--- /dev/null
+++ b/app/types/welcome-dashboard.ts
@@ -0,0 +1,38 @@
+export type WelcomeDashboardKpi = {
+  id: string
+  label: string
+  value: string
+  hint?: string
+  change?: string
+  changeTone?: 'positive' | 'negative' | 'neutral'
+}
+
+export type WelcomeDashboardTask = {
+  id: string
+  title: string
+  emphasis?: boolean
+}
+
+export type WelcomeDashboardAlert = {
+  id: string
+  message: string
+  tone: 'info' | 'warning' | 'error' | 'success' | string
+}
+
+export type WelcomeDashboardQuickLink = {
+  label: string
+  to: string
+  icon: string
+  description: string
+}
+
+export type WelcomeDashboardConfig = {
+  greetingName: string
+  productName: string
+  subtitle: string
+  dailyTasks: WelcomeDashboardTask[]
+  alerts: WelcomeDashboardAlert[]
+  performanceKpis: WelcomeDashboardKpi[]
+  ceoKpis: WelcomeDashboardKpi[]
+  quickLinks: WelcomeDashboardQuickLink[]
+}
diff --git a/app/utils/refDebounced.ts b/app/utils/refDebounced.ts
new file mode 100644
index 0000000..ad67f7d
--- /dev/null
+++ b/app/utils/refDebounced.ts
@@ -0,0 +1,18 @@
+import { ref, watch, type Ref } from 'vue'
+
+/** Debounced mirror of a ref (no @vueuse dependency). */
+export function refDebounced<T>(source: Ref<T>, ms: number): Ref<T> {
+  const debounced = ref(source.value) as Ref<T>
+  let timer: ReturnType<typeof setTimeout> | undefined
+  watch(
+    source,
+    (v) => {
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => {
+        debounced.value = v
+      }, ms)
+    },
+    { flush: 'sync' }
+  )
+  return debounced
+}
diff --git a/app/utils/useLocalStorageRef.ts b/app/utils/useLocalStorageRef.ts
new file mode 100644
index 0000000..cfca44e
--- /dev/null
+++ b/app/utils/useLocalStorageRef.ts
@@ -0,0 +1,40 @@
+import { ref, watch, type Ref } from 'vue'
+
+/**
+ * JSON persisted ref for client-only state (replaces @vueuse/useStorage for shallow objects).
+ */
+export function useLocalStorageRef<T extends object>(key: string, defaults: () => T): Ref<T> {
+  const data = ref(defaults()) as Ref<T>
+  if (import.meta.server) return data
+
+  try {
+    const raw = localStorage.getItem(key)
+    if (raw) {
+      const parsed = JSON.parse(raw)
+      const def = defaults()
+      if (Array.isArray(def) && Array.isArray(parsed)) {
+        data.value = parsed as T
+      } else if (def !== null && typeof def === 'object' && !Array.isArray(def)) {
+        data.value = { ...(def as object), ...(parsed as object) } as T
+      } else {
+        data.value = parsed as T
+      }
+    }
+  } catch {
+    /* ignore */
+  }
+
+  watch(
+    data,
+    (v) => {
+      try {
+        localStorage.setItem(key, JSON.stringify(v))
+      } catch {
+        /* ignore */
+      }
+    },
+    { deep: true }
+  )
+
+  return data
+}
diff --git a/docs/CODEBASE_BUNDLE.md b/docs/CODEBASE_BUNDLE.md
new file mode 100644
index 0000000..ad977c5
--- /dev/null
+++ b/docs/CODEBASE_BUNDLE.md
@@ -0,0 +1,155 @@
+# policy-ui — codebase bundle (for LLMs / handoff)
+
+Single-document summary of the **policy-ui** Nuxt app: stack, API wiring, layout, main routes, composables, and data. Paste this into Perplexity, ChatGPT, or another tool when you need context without the full repo.
+
+---
+
+## Product intent (short)
+
+Brokerage / agency management **workstation UI** (Central America / Colombia–oriented domain): quotes, sales pipeline, onboarding (solicitud, emissions), cartera (customers, policies, book), customer service (support, claims, collections, renewals), workstations, AI tools, settings. **Admin-first** structure; many areas use **mock data** until backends are connected.
+
+---
+
+## Stack
+
+| Piece | Notes |
+|--------|--------|
+| **Nuxt** | `^4.3.1` (`compatibilityDate: 2026-02-25`) |
+| **Vue** | `^3.5.28` |
+| **@nuxt/ui** | `^4.5.0` (Nuxt UI 4) |
+| **Tailwind** | `^4.2.1` (`app/assets/css/main.css`) |
+| **nuxt-open-fetch** | `^0.13.8` — typed API clients from OpenAPI |
+| **jspdf** | PDF generation |
+| **zod** | validation |
+
+**Scripts:** `dev`, `build`, `generate`, `preview`, `postinstall` → `nuxt prepare`.
+
+**Dev server:** port **3737**, host `localhost` ([`nuxt.config.ts`](../nuxt.config.ts)).
+
+---
+
+## API clients (`nuxt-open-fetch`)
+
+| Client | Base URL | Schema URL |
+|--------|-----------|------------|
+| `customer` | `http://localhost:4000/api/v1` | `http://localhost:4000/api/openapi` |
+| `policy` | `http://localhost:4001/api/v1` | `http://localhost:4001/api/openapi` |
+| `providers` | `http://localhost:4002/api/v1` | `http://localhost:4002/api/openapi` |
+| `tasks` | `http://localhost:8080/api/v1` | `http://localhost:8080/openapi3.json` |
+
+Usage: `useNuxtApp().$customer`, `$policy`, `$providers`, `$tasks` (generated from schemas when services run).
+
+---
+
+## Entry & layout
+
+- [`app/app.vue`](../app/app.vue): wraps app in **`UApp`** → `NuxtLayout` → `NuxtPage`.
+- Default layout [`app/layouts/default.vue`](../app/layouts/default.vue): **top bar** (`LayoutAppTopBar`), **collapsible sidebar** (Sales, Operations, optional Workstations/AI), main content area. Sidebar groups/feature flags via [`useSidebarFeatures`](../app/composables/useSidebarFeatures.ts) (localStorage: workstations, AI tools, leads hub).
+
+---
+
+## Directory map (`app/`)
+
+| Path | Role |
+|------|------|
+| `pages/` | File-based routes (~73 Vue pages) |
+| `components/` | UI including `layout/`, `quotes/`, etc. |
+| `composables/` | Shared logic (~30 composables) |
+| `layouts/` | `default.vue` shell |
+| `assets/css/` | Global styles / Tailwind |
+| `types/` | TS types (form catalog, quotes, branding, roles, …) |
+| `data/` | JSON catalogs, mocks, seed data |
+| `utils/` | Helpers (e.g. `useLocalStorageRef`) |
+| `middleware/` | Route middleware if present |
+| `plugins/` | Client/server plugins |
+
+**Public:** `public/` including `public/forms/` for static PDF assets referenced by the forms catalog.
+
+---
+
+## Routes (by area)
+
+Paths are under `app/pages/` unless noted.
+
+- **Home / shell:** `/` (`index.vue` — large role-configurable dashboard), `home2.vue`, `calendar.vue`, `account.vue`
+- **Quotes:** `/quotes` (mission-control style hub), `/quotes/mission-control`, `/quotes/new`, `/quotes/compare`, line flows: `/quotes/life`, `/quotes/health`, `/quotes/auto`, `/quotes/general-risk`, `/quotes/custom`
+- **Sales / onboarding:** `/onboarding` (pipeline), `/sales/quick-lead`, `/sales/leads`, `/registration/client`, `/registration/policy`, `/onboarding/solicitud`, `/onboarding/emissions`, `/onboarding/policy-upload/new`, potential/active leads under `onboarding/`
+- **Cartera:** `/customers`, `/customers/new`, `/customers/[id]`, `/policies`, `/policies/new`, `/policies/[id]`, `/policies/groups`, `/policies/book`, `/policies/app/[application_id]`
+- **Customer service:** `/support`, `/support/[id]`, `/support/collectivos`, `/claims`, `/claims/[id]`, `/claims/intake/[token]` (standalone layout), `/claims/settings`, `/collections`, `/renewals`, `/renewals/[id]`
+- **Workstation:** `/workstation/*` (collectivos, collections, claims, renewals, customer-service, facturacion)
+- **AI tools:** `/ai-tools/*` (sales-factory, policy-comparator, email-writer, case-assistant)
+- **Providers:** `/providers`, `/providers/new`, `/providers/[provider_id]`
+- **Tasks:** `/tasks`, `/tasks/[id]`
+- **Analysis:** `/analysis`
+- **Settings:** `/settings` and children (organization, agents, providers, permissions, forms library, quote-requests, support-routing, customer-attention, profile-layouts, alerts, appearance, personalization, referral-channels)
+
+Many pages set `definePageMeta({ ssr: false })` where client-only state or APIs are assumed.
+
+---
+
+## Composables (inventory)
+
+| Composable | Purpose (brief) |
+|------------|-----------------|
+| `useAppShellLayout` | Sidebar collapse / layout |
+| `useAppTheme` | Theme switching |
+| `useBrokerageBranding` | Tenant branding in chrome |
+| `useSidebarFeatures` | Toggle sidebar sections (workstations, AI, leads) |
+| `useSuperAdmin` | Superadmin gate for org settings |
+| `usePageTitle` | Document title |
+| `useFormsCatalog` | Filter form catalog JSON, field groups, indexes |
+| `useEmissionsQueue` | Local queue for emissions review |
+| `useQuoteSession` | Comparative quote view model / session |
+| `useSalesPipeline` | Deal pipeline stages for quote/onboarding flows |
+| `useCustomerProfileVault` | Local profile / KYC-oriented draft |
+| `usePdfFieldMappings` | PDF field mapping JSON |
+| `useProviderContactEmails` | Carrier outbound email roles |
+| `useClientRegistrationModel` / `usePolicyRegistrationModel` | Registration payloads |
+| `useLifeQuoteDraft` / `useHealthQuoteDraft` / `useAutoQuoteDraft` | Line-specific quote drafts |
+| `useDashboardHomeWidgets` | Home dashboard widgets + role presets |
+| `useWelcomeDashboard` | Welcome KPIs / home content |
+| `useSupportTickets` | Support ticket mock/state |
+| `useCustomerAttention` | Customer attention tiers |
+| `useProfileLayouts` | Profile section layouts |
+| `useReferralChannels` | Referral sources |
+| `useQuickLeads` | Quick lead capture |
+| `useClientFavorites` | Starred clients |
+| `useColectivos` | Collectivos data/helpers |
+| `useAnalytics` | Analytics helpers |
+| `useAlertConfig` | Alert configuration |
+| `useQuoteRequestEmailEnabled` | Quote-request email toggle |
+
+---
+
+## Data & catalogs
+
+- **`forms-catalog.json`** — PDF/form rows (insurer, sub-ramo, persona, paths).
+- **`form-field-groups.json`** — Field groups linked to catalog matching.
+- **`pdf-field-mappings.json`** — PDF field name mappings.
+- **`taxonomy.ts`** — Slugs / taxonomy for routing.
+- **`roles-seguros.ts`** — Seed roles for permissions UI.
+- **Mocks:** `mock-customers`, `mock-claims`, `mock-support`, `mock-renewals`, `quotes-overview.mock`, `mock-analytics`, etc.
+
+---
+
+## Scripts (repo)
+
+- [`scripts/import-forms.mjs`](../scripts/import-forms.mjs) — pipeline to generate/refresh form catalog from sources (when used).
+
+---
+
+## Conventions worth knowing
+
+- **i18n:** UI copy is largely **English** in chrome; **Spanish** appears in some flows and labels; full translation is planned.
+- **Mock vs API:** Several list views try API then fall back to mocks (e.g. policies); others are mock-only.
+- **OpenAPI:** Clients expect **local** services on the ports above; without them, calls fail unless mocked.
+
+---
+
+## Files this bundle was generated from
+
+- [`package.json`](../package.json)
+- [`nuxt.config.ts`](../nuxt.config.ts)
+- Glob: `app/pages`, `app/composables`, `app/types`, `app/data`
+
+Regenerate or extend this file when architecture changes significantly.
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2a02836..b46dd8b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,28 +1,50 @@
+const devApiOrigin = 'https://dev.api.corredorconect.com'
+
 export default defineNuxtConfig({
   compatibilityDate: '2026-02-25',
+  /** Dev server URL — open the same port in the browser (see terminal if the port was busy). */
+  devServer: {
+    port: 3737,
+    host: 'localhost'
+  },
   modules: ['nuxt-open-fetch', '@nuxt/ui'],
   css: ['~/assets/css/main.css'],
   ui: {
     colorMode: false
   },
+  runtimeConfig: {
+    public: {
+      /**
+       * Sent as `Authorization: Bearer …` on Policy API requests (required for protected routes per OpenAPI).
+       * Set in `.env` as `NUXT_PUBLIC_POLICY_API_TOKEN`.
+       */
+      policyApiToken: process.env.NUXT_PUBLIC_POLICY_API_TOKEN ?? ''
+    }
+  },
   openFetch: {
     clients: {
       customer: {
-        baseURL: 'http://localhost:4000/api/v1',
-        schema: 'http://localhost:4000/api/openapi'
+        baseURL:
+          process.env.NUXT_PUBLIC_CUSTOMER_API_BASE ?? `${devApiOrigin}/customer/api/v1`,
+        schema:
+          process.env.NUXT_PUBLIC_CUSTOMER_OPENAPI ?? `${devApiOrigin}/customer/api/openapi`
       },
       policy: {
-        baseURL: 'http://localhost:4001/api/v1',
-        schema: 'http://localhost:4001/api/openapi'
+        baseURL:
+          process.env.NUXT_PUBLIC_POLICY_API_BASE ?? `${devApiOrigin}/policy/api/v1`,
+        schema:
+          process.env.NUXT_PUBLIC_POLICY_OPENAPI ?? `${devApiOrigin}/policy/api/openapi`
       },
       providers: {
-        baseURL: 'http://localhost:4002/api/v1',
-        schema: 'http://localhost:4002/api/openapi'
+        baseURL:
+          process.env.NUXT_PUBLIC_PROVIDERS_API_BASE ?? `${devApiOrigin}/provider/api/v1`,
+        schema:
+          process.env.NUXT_PUBLIC_PROVIDERS_OPENAPI ?? `${devApiOrigin}/provider/api/openapi`
       },
       tasks: {
         baseURL: 'http://localhost:8080/api/v1',
         schema: 'http://localhost:8080/openapi3.json'
-      },
+      }
     }
   }
 })
diff --git a/openapi/stub.json b/openapi/stub.json
new file mode 100644
index 0000000..7f767ba
--- /dev/null
+++ b/openapi/stub.json
@@ -0,0 +1,47 @@
+{
+  "openapi": "3.0.3",
+  "info": { "title": "Local stub (replace when API is available)", "version": "0.0.0" },
+  "paths": {
+    "/forms/catalog": {
+      "get": {
+        "summary": "Forms master catalog (insurer × sub-ramo × persona × product line)",
+        "responses": {
+          "200": {
+            "description": "JSON body matches app/data/forms-catalog.json schema"
+          }
+        }
+      }
+    },
+    "/forms/field-groups": {
+      "get": {
+        "summary": "Field group definitions for intake wizards",
+        "responses": {
+          "200": {
+            "description": "Matches app/data/form-field-groups.json"
+          }
+        }
+      }
+    },
+    "/emissions": {
+      "get": {
+        "summary": "Pending emissions review queue",
+        "responses": {
+          "200": {
+            "description": "List of packets awaiting brokerage QA"
+          }
+        }
+      },
+      "post": {
+        "summary": "Submit completed intake for emissions review"
+      }
+    },
+    "/providers/{providerId}/contacts": {
+      "get": {
+        "summary": "Per-carrier outbound email roles"
+      },
+      "put": {
+        "summary": "Update provider contact emails"
+      }
+    }
+  }
+}
diff --git a/public/forms/README.txt b/public/forms/README.txt
new file mode 100644
index 0000000..faf3fde
--- /dev/null
+++ b/public/forms/README.txt
@@ -0,0 +1 @@
+Placeholder for carrier PDF templates. Add real .pdf files here and update app/data/forms-catalog.json fileUrl paths.
diff --git a/scripts/import-forms.mjs b/scripts/import-forms.mjs
new file mode 100644
index 0000000..4121268
--- /dev/null
+++ b/scripts/import-forms.mjs
@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+/**
+ * Optional: convert a CSV export into app/data/forms-catalog.json
+ * Usage: node scripts/import-forms.mjs path/to/forms.csv
+ *
+ * Expected CSV headers (example):
+ * id,description,insurerSlugs,subRamoKey,subRamoLabel,personKinds,productLine,fileUrl,fileLabel,badge,kind,fieldGroupIds
+ * insurerSlugs: semicolon-separated e.g. optima;mapfre
+ * fieldGroupIds: semicolon-separated optional
+ */
+import { readFileSync, writeFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const root = join(__dirname, '..')
+const csvPath = process.argv[2]
+
+if (!csvPath) {
+  console.error('Usage: node scripts/import-forms.mjs <file.csv>')
+  process.exit(1)
+}
+
+const raw = readFileSync(csvPath, 'utf8')
+const lines = raw.trim().split(/\r?\n/)
+const header = lines[0].split(',').map((h) => h.trim())
+const rows = []
+
+for (let i = 1; i < lines.length; i++) {
+  const cols = lines[i].split(',')
+  if (cols.length < header.length) continue
+  const row = {}
+  header.forEach((h, idx) => {
+    row[h] = (cols[idx] ?? '').trim()
+  })
+  rows.push({
+    id: Number(row.id),
+    description: row.description,
+    insurerSlugs: row.insurerSlugs.split(';').map((s) => s.trim()).filter(Boolean),
+    subRamoKey: row.subRamoKey,
+    subRamoLabel: row.subRamoLabel,
+    personKinds: row.personKinds,
+    productLine: row.productLine === '' ? null : row.productLine,
+    fileUrl: row.fileUrl,
+    fileLabel: row.fileLabel,
+    badge: row.badge ? Number(row.badge) : undefined,
+    kind: row.kind || 'carrier_pdf',
+    fieldGroupIds: row.fieldGroupIds
+      ? row.fieldGroupIds.split(';').map((s) => s.trim()).filter(Boolean)
+      : undefined
+  })
+}
+
+const out = {
+  version: 1,
+  rows
+}
+
+const outPath = join(root, 'app/data/forms-catalog.json')
+writeFileSync(outPath, `${JSON.stringify(out, null, 2)}\n`, 'utf8')
+console.log(`Wrote ${rows.length} rows to ${outPath}`)