refactor: migrate frontend from shadcn/Tailwind to Mantine v9

Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind.
Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind.
Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.)
y MantineProvider como wrapper estándar del sistema de temas.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/functions/ui/detail_page.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { cn } from '../core/cn'
+import { Stack, Group, Title, Text, ActionIcon, Box, Tabs, Badge, Timeline, SimpleGrid } from '@mantine/core'
+import { IconChevronLeft } from '@tabler/icons-react'
 
 interface DetailField {
   label: string
@@ -38,96 +39,98 @@ interface DetailPageProps {
   className?: string
 }
 
-const variantDotColors = {
-  default: 'bg-primary',
-  success: 'bg-green-500',
-  warning: 'bg-amber-500',
-  error: 'bg-red-500',
+const variantColors: Record<string, string> = {
+  default: 'blue',
+  success: 'green',
+  warning: 'yellow',
+  error: 'red',
 }
 
 export function detailPage({
   title, subtitle, badge, avatar, actions, onBack,
-  fields, tabs, activeTab, onTabChange, timeline, className,
+  fields, tabs, activeTab, onTabChange, timeline,
 }: DetailPageProps): React.ReactElement {
   return (
-    <div className={cn('space-y-6', className)}>
+    <Stack gap="lg">
       {/* Header */}
-      <div className="flex items-start justify-between border-b pb-4">
-        <div className="flex items-start gap-4">
+      <Group justify="space-between" align="flex-start" pb="md" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
+        <Group align="flex-start" gap="md">
           {onBack && (
-            <button onClick={onBack} className="mt-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md hover:bg-muted">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="m15 18-6-6 6-6"/></svg>
-            </button>
+            <ActionIcon variant="subtle" size="sm" onClick={onBack} mt={4}>
+              <IconChevronLeft size={16} />
+            </ActionIcon>
           )}
-          {avatar && <div className="size-12 shrink-0 overflow-hidden rounded-full bg-muted">{avatar}</div>}
-          <div className="space-y-1">
-            <div className="flex items-center gap-3">
-              <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+          {avatar && (
+            <Box
+              w={48}
+              h={48}
+              style={{ flexShrink: 0, overflow: 'hidden', borderRadius: '50%', backgroundColor: 'var(--mantine-color-default)' }}
+            >
+              {avatar}
+            </Box>
+          )}
+          <Stack gap={4}>
+            <Group gap="sm" align="center">
+              <Title order={2}>{title}</Title>
               {badge}
-            </div>
-            {subtitle && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-          </div>
-        </div>
-        {actions && <div className="flex items-center gap-2">{actions}</div>}
-      </div>
+            </Group>
+            {subtitle && <Text size="sm" c="dimmed">{subtitle}</Text>}
+          </Stack>
+        </Group>
+        {actions && <Group gap="xs">{actions}</Group>}
+      </Group>
 
       {/* Fields grid */}
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
         {fields.map((field, i) => (
-          <div key={i} className={cn('space-y-1', field.span === 2 && 'md:col-span-2')}>
-            <p className="text-sm text-muted-foreground">{field.label}</p>
-            <div className="text-sm font-medium">{field.value}</div>
-          </div>
+          <Box key={i} style={field.span === 2 ? { gridColumn: 'span 2' } : undefined}>
+            <Stack gap={4}>
+              <Text size="sm" c="dimmed">{field.label}</Text>
+              <Text size="sm" fw={500}>{field.value}</Text>
+            </Stack>
+          </Box>
         ))}
-      </div>
+      </SimpleGrid>
 
       {/* Tabs */}
       {tabs && tabs.length > 0 && (
-        <div className="space-y-4">
-          <nav className="flex gap-4 border-b">
-            {tabs.map((tab) => (
-              <button
-                key={tab.value}
-                type="button"
-                onClick={() => onTabChange?.(tab.value)}
-                className={cn(
-                  'inline-flex items-center gap-2 border-b-2 px-1 pb-3 text-sm font-medium transition-colors',
-                  activeTab === tab.value ? 'border-primary text-foreground' : 'border-transparent text-muted-foreground hover:text-foreground'
-                )}
-              >
-                {tab.label}
-                {tab.count !== undefined && (
-                  <span className="inline-flex h-5 items-center rounded-full bg-muted px-2 text-xs font-medium">{tab.count}</span>
-                )}
-              </button>
-            ))}
-          </nav>
+        <Stack gap="md">
+          <Tabs value={activeTab} onChange={(v) => v && onTabChange?.(v)}>
+            <Tabs.List>
+              {tabs.map((tab) => (
+                <Tabs.Tab
+                  key={tab.value}
+                  value={tab.value}
+                  rightSection={tab.count !== undefined ? <Badge size="xs" variant="filled" circle>{tab.count}</Badge> : undefined}
+                >
+                  {tab.label}
+                </Tabs.Tab>
+              ))}
+            </Tabs.List>
+          </Tabs>
           {tabs.find(t => t.value === activeTab)?.content}
-        </div>
+        </Stack>
       )}
 
       {/* Timeline */}
       {timeline && timeline.length > 0 && (
-        <div className="space-y-3">
-          <h3 className="text-sm font-medium text-muted-foreground">Activity</h3>
-          <div className="space-y-0">
-            {timeline.map((event, i) => (
-              <div key={event.id} className="flex gap-3 pb-4">
-                <div className="flex flex-col items-center">
-                  <div className={cn('mt-1 size-2.5 rounded-full', variantDotColors[event.variant || 'default'])} />
-                  {i < timeline.length - 1 && <div className="flex-1 w-px bg-border" />}
-                </div>
-                <div className="flex-1 space-y-0.5 pb-2">
-                  <p className="text-sm font-medium">{event.title}</p>
-                  {event.description && <p className="text-xs text-muted-foreground">{event.description}</p>}
-                  <p className="text-xs text-muted-foreground/70">{event.timestamp}</p>
-                </div>
-              </div>
+        <Stack gap="sm">
+          <Text size="sm" fw={500} c="dimmed">Activity</Text>
+          <Timeline active={timeline.length - 1} bulletSize={12} lineWidth={2}>
+            {timeline.map((event) => (
+              <Timeline.Item
+                key={event.id}
+                color={variantColors[event.variant || 'default']}
+                title={<Text size="sm" fw={500}>{event.title}</Text>}
+              >
+                {event.description && <Text size="xs" c="dimmed">{event.description}</Text>}
+                <Text size="xs" c="dimmed" opacity={0.7}>{event.timestamp}</Text>
+              </Timeline.Item>
             ))}
-          </div>
-        </div>
+          </Timeline>
+        </Stack>
       )}
-    </div>
+    </Stack>
   )
 }