refactor: migrar Select y SimpleSelect a native HTML select

Select reescrito de @base-ui/react primitives a <select> nativo con wrapper
para mantener la misma API visual (ChevronDown, estilos tema). SimpleSelect
actualizado para usar <select>/<optgroup> directamente sin intermediarios.
Checkbox corregido: import CheckboxIndicator separado reemplazado por
CheckboxPrimitive.Indicator para consistencia.

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

frontend/functions/ui/simple_select.tsx

@@ -2,15 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../core/cn"
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-  SelectGroup,
-  SelectGroupLabel,
-} from "./select"
+import { ChevronDown } from "lucide-react"
 
 export interface SimpleSelectOption {
   value: string
@@ -31,12 +23,14 @@ interface SimpleSelectProps {
   options: SimpleSelectOptions
   placeholder?: string
   disabled?: boolean
-  size?: 'sm' | 'default'
+  size?: "sm" | "default"
   className?: string
 }
 
-function isGrouped(options: SimpleSelectOptions): options is SimpleSelectGroup[] {
-  return options.length > 0 && 'group' in options[0]
+function isGrouped(
+  options: SimpleSelectOptions,
+): options is SimpleSelectGroup[] {
+  return options.length > 0 && "group" in options[0]
 }
 
 function SimpleSelect({
@@ -45,39 +39,53 @@ function SimpleSelect({
   options,
   placeholder = "Select...",
   disabled = false,
-  size = 'default',
+  size = "default",
   className,
 }: SimpleSelectProps) {
   return (
-    <Select value={value} onValueChange={onValueChange} disabled={disabled}>
-      <SelectTrigger
+    <div className={cn("relative", className)}>
+      <select
+        value={value}
+        onChange={(e) => onValueChange(e.target.value)}
+        disabled={disabled}
         className={cn(
-          size === 'sm' && 'h-7 text-xs px-2',
-          className
+          "flex w-full appearance-none items-center rounded-lg border border-input bg-transparent px-2.5 pr-8 text-sm transition-colors outline-none",
+          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          size === "sm" ? "h-7 text-xs px-2" : "h-8 py-1",
         )}
       >
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent>
+        {placeholder && !value && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
         {isGrouped(options)
-          ? options.map(g => (
-              <SelectGroup key={g.group}>
-                <SelectGroupLabel>{g.group}</SelectGroupLabel>
-                {g.items.map(item => (
-                  <SelectItem key={item.value} value={item.value} disabled={item.disabled}>
+          ? options.map((g) => (
+              <optgroup key={g.group} label={g.group}>
+                {g.items.map((item) => (
+                  <option
+                    key={item.value}
+                    value={item.value}
+                    disabled={item.disabled}
+                  >
                     {item.label}
-                  </SelectItem>
+                  </option>
                 ))}
-              </SelectGroup>
+              </optgroup>
             ))
-          : (options as SimpleSelectOption[]).map(item => (
-              <SelectItem key={item.value} value={item.value} disabled={item.disabled}>
+          : (options as SimpleSelectOption[]).map((item) => (
+              <option
+                key={item.value}
+                value={item.value}
+                disabled={item.disabled}
+              >
                 {item.label}
-              </SelectItem>
-            ))
-        }
-      </SelectContent>
-    </Select>
+              </option>
+            ))}
+      </select>
+      <ChevronDown className="pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+    </div>
   )
 }