Fix: Agregar variables de tema a UCard en página de configuración

- Configurar prop :ui en todos los UCard para usar variables CSS del tema
- Reemplazar colores hardcoded (amber, green) por variables de tema
- Los UCard ahora responden correctamente a cambios de tema
- Corrige problema donde los cards no cambiaban de color al seleccionar presets

Archivos modificados:
- app/pages/settings.vue: Agregar :ui prop con bg-[var(--brand-surface)] y border

nuxt4-app/app/pages/settings.vue

@@ -155,7 +155,14 @@ watch(() => theme.value, (newTheme) => {
       <UDashboardPanelContent>
         <div class="max-w-4xl mx-auto space-y-8">
           <!-- Configuración de Tema -->
-          <UCard>
+          <UCard
+            :ui="{
+              base: 'bg-[var(--brand-surface)]',
+              ring: 'ring-1 ring-[var(--brand-border)]',
+              body: { base: '', padding: 'px-4 py-5 sm:p-6' },
+              header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
+            }"
+          >
             <template #header>
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-3">
@@ -463,7 +470,14 @@ watch(() => theme.value, (newTheme) => {
           </UModal>
 
           <!-- Vista previa de colores -->
-          <UCard>
+          <UCard
+            :ui="{
+              base: 'bg-[var(--brand-surface)]',
+              ring: 'ring-1 ring-[var(--brand-border)]',
+              body: { base: '', padding: 'px-4 py-5 sm:p-6' },
+              header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
+            }"
+          >
             <template #header>
               <div class="flex items-center gap-3">
                 <UIcon name="i-lucide-eye" class="size-5 text-[var(--brand-primary)]" />
@@ -495,11 +509,18 @@ watch(() => theme.value, (newTheme) => {
 
           <!-- Otras configuraciones (placeholder) -->
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <UCard>
+            <UCard
+              :ui="{
+                base: 'bg-[var(--brand-surface)]',
+                ring: 'ring-1 ring-[var(--brand-border)]',
+                body: { base: '', padding: 'px-4 py-5 sm:p-6' },
+                header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
+              }"
+            >
               <template #header>
                 <div class="flex items-center gap-3">
-                  <div class="w-10 h-10 rounded-lg bg-amber-50 dark:bg-amber-950/30 flex items-center justify-center">
+                  <div class="w-10 h-10 rounded-lg bg-[var(--brand-primary)]/20 flex items-center justify-center">
-                    <UIcon name="i-lucide-bell" class="size-5 text-amber-600 dark:text-amber-400" />
+                    <UIcon name="i-lucide-bell" class="size-5 text-[var(--brand-accent)]" />
                   </div>
                   <h3 class="font-semibold text-[var(--brand-text)]">
                     Notificaciones
@@ -511,11 +532,18 @@ watch(() => theme.value, (newTheme) => {
               </p>
             </UCard>
 
-            <UCard>
+            <UCard
+              :ui="{
+                base: 'bg-[var(--brand-surface)]',
+                ring: 'ring-1 ring-[var(--brand-border)]',
+                body: { base: '', padding: 'px-4 py-5 sm:p-6' },
+                header: { base: 'border-b border-[var(--brand-border)]', padding: 'px-4 py-5 sm:px-6' }
+              }"
+            >
               <template #header>
                 <div class="flex items-center gap-3">
-                  <div class="w-10 h-10 rounded-lg bg-green-50 dark:bg-green-950/30 flex items-center justify-center">
+                  <div class="w-10 h-10 rounded-lg bg-[var(--brand-primary)]/20 flex items-center justify-center">
-                    <UIcon name="i-lucide-shield" class="size-5 text-green-600 dark:text-green-400" />
+                    <UIcon name="i-lucide-shield" class="size-5 text-[var(--brand-accent)]" />
                   </div>
                   <h3 class="font-semibold text-[var(--brand-text)]">
                     Privacidad