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

@@ -1,64 +1,31 @@
-import * as React from "react"
-import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
-import { cn } from "../core/cn"
+import { Switch } from "@mantine/core"
 
-interface SwitchToggleProps extends SwitchPrimitive.Root.Props {
+interface SwitchToggleProps {
   label?: string
   labelPosition?: "left" | "right"
   className?: string
+  checked?: boolean
+  defaultChecked?: boolean
+  disabled?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  id?: string
 }
 
-function SwitchToggle({ className, label, labelPosition = "right", id, ...props }: SwitchToggleProps) {
-  const internalId = React.useId()
-  const switchId = id ?? internalId
-
-  const switchEl = (
-    <SwitchPrimitive.Root
-      id={switchId}
-      data-slot="switch"
-      className={cn(
-        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors outline-none",
-        "bg-input focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-        "data-checked:bg-primary",
-        "disabled:pointer-events-none disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          "pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform",
-          "translate-x-0 data-checked:translate-x-4"
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
-
-  if (!label) return switchEl
-
+function SwitchToggle({ className, label, labelPosition = "right", id, checked, defaultChecked, disabled, onCheckedChange, ...props }: SwitchToggleProps) {
   return (
-    <div className="flex items-center gap-2">
-      {labelPosition === "left" && (
-        <label
-          htmlFor={switchId}
-          data-slot="switch-label"
-          className="text-sm font-medium leading-none cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-        >
-          {label}
-        </label>
-      )}
-      {switchEl}
-      {labelPosition === "right" && (
-        <label
-          htmlFor={switchId}
-          data-slot="switch-label"
-          className="text-sm font-medium leading-none cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-        >
-          {label}
-        </label>
-      )}
-    </div>
+    <Switch
+      id={id}
+      data-slot="switch"
+      label={label}
+      labelPosition={labelPosition}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      onChange={(event) => onCheckedChange?.(event.currentTarget.checked)}
+      className={className}
+      size="sm"
+      {...props}
+    />
   )
 }