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/line_chart.tsx

@@ -1,8 +1,6 @@
-import {
-  LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid,
-  Tooltip, Legend, Brush, ReferenceLine,
-} from 'recharts'
-import { ChartContainer, ChartTooltipContent, type Series, getSeriesColor } from './chart_container'
+import { LineChart as MantineLineChart } from '@mantine/charts'
+import { Paper } from '@mantine/core'
+import { type Series, getSeriesColor } from './chart_container'
 
 type CurveType = 'linear' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter'
 
@@ -15,9 +13,7 @@ interface LineChartProps {
   showGrid?: boolean
   showLegend?: boolean
   showDots?: boolean
-  zoomable?: boolean
-  height?: number | string
-  className?: string
+  height?: number
   xAxisFormatter?: (value: unknown) => string
   yAxisFormatter?: (value: unknown) => string
   valueFormatter?: (value: number) => string
@@ -26,30 +22,37 @@ interface LineChartProps {
 
 function LineChartComponent({
   data, xKey, yKey, series, curveType = 'monotone', showGrid = true, showLegend = false,
-  showDots = true, zoomable = false, height = 300, className, xAxisFormatter, yAxisFormatter,
+  showDots = true, height = 300, xAxisFormatter, yAxisFormatter,
   valueFormatter = (v) => v.toLocaleString(), referenceLines = [],
 }: LineChartProps) {
-  const lines = series
-    ? series.map((s, i) => ({ dataKey: s.key, name: s.name, stroke: getSeriesColor(i, s.color) }))
-    : yKey ? [{ dataKey: yKey, name: yKey, stroke: getSeriesColor(0) }] : []
+  const chartSeries = series
+    ? series.map((s, i) => ({ name: s.key, label: s.name, color: getSeriesColor(i, s.color) }))
+    : yKey ? [{ name: yKey, label: yKey, color: getSeriesColor(0) }] : []
+
+  const refLines = referenceLines.map((ref) => ({
+    y: ref.y,
+    label: ref.label || '',
+    color: ref.color || 'gray.6',
+  }))
 
   return (
-    <ChartContainer className={className} height={height}>
-      <RechartsLineChart data={data} margin={{ top: 10, right: 10, left: 10, bottom: zoomable ? 30 : 10 }}>
-        {showGrid && <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />}
-        <XAxis dataKey={xKey} tickFormatter={xAxisFormatter} className="text-xs fill-muted-foreground" />
-        <YAxis tickFormatter={yAxisFormatter} className="text-xs fill-muted-foreground" />
-        <Tooltip content={<ChartTooltipContent valueFormatter={valueFormatter} />} cursor={{ stroke: 'hsl(var(--muted-foreground))', strokeDasharray: '3 3' }} />
-        {showLegend && <Legend />}
-        {referenceLines.map((ref, i) => (
-          <ReferenceLine key={i} y={ref.y} stroke={ref.color || 'hsl(var(--muted-foreground))'} strokeDasharray="3 3" label={ref.label ? { value: ref.label, position: 'right' } : undefined} />
-        ))}
-        {lines.map((line) => (
-          <Line key={line.dataKey} type={curveType} dataKey={line.dataKey} name={line.name} stroke={line.stroke} strokeWidth={2} dot={showDots ? { r: 3, fill: line.stroke } : false} activeDot={{ r: 5, fill: line.stroke }} />
-        ))}
-        {zoomable && <Brush dataKey={xKey} height={20} stroke="hsl(var(--primary))" fill="hsl(var(--muted))" tickFormatter={xAxisFormatter} />}
-      </RechartsLineChart>
-    </ChartContainer>
+    <Paper p="md">
+      <MantineLineChart
+        h={height}
+        data={data}
+        dataKey={xKey}
+        series={chartSeries}
+        curveType={curveType}
+        gridAxis={showGrid ? 'xy' : 'none'}
+        withLegend={showLegend}
+        withTooltip
+        withDots={showDots}
+        valueFormatter={valueFormatter}
+        referenceLines={refLines}
+        xAxisProps={xAxisFormatter ? { tickFormatter: xAxisFormatter } : undefined}
+        yAxisProps={yAxisFormatter ? { tickFormatter: yAxisFormatter } : undefined}
+      />
+    </Paper>
   )
 }