Fix file input clear and improve upload handling

The change adds image clearing functionality and improves input
validation by adding null checks and clearable state to the file input
component.

app/components/NavBar.vue

@@ -1,15 +1,21 @@
 <template>
     <!-- Toolbar at the top of the screen -->
     <v-app-bar
-        color="rgba(27, 94, 32, 0.8)"
+        app
+        color="primary-darken-1"
+        class="text-white"
         height="48"
         v-if="status !== 'unauthenticated'"
     >
         <!-- Title of the application with adjusted margin and font size -->
         <v-app-bar-title class="text-h6 ms-3 text-white">
-            <v-icon icon="mdi-apps" @click="drawer = !drawer"></v-icon>
+            <v-icon
+                color="info"
+                icon="mdi-apps"
+                @click="drawer = !drawer"
+            ></v-icon>
 
-            <span class="ms-1 text-white"
+            <span class="ms-1 text-warning"
                 >Listas de Front - {{ capitalize($route.name) }}</span
             >
         </v-app-bar-title>
@@ -20,13 +26,11 @@
         <!-- Menu icons on the right side of the toolbar -->
         <template v-slot:append>
             <v-btn
-                class="text-orange"
+                color="info"
                 @click="theme.toggle()"
                 text="Light / Dark"
             ></v-btn>
-            <small class="text-white"> Logout </small>
-            <v-btn icon="mdi-account" class="text-white" @click="logout">
-            </v-btn>
+            <v-btn icon="mdi-logout" color="warning" @click="logout"> </v-btn>
         </template>
     </v-app-bar>
 

app/pages/profile.vue

@@ -14,14 +14,17 @@
                 ></v-img>
             </v-avatar>
 
+            //No funciona $clear
             <v-file-input
                 accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp"
                 label="Subir imagen"
                 @input="handleFileInput"
                 type="file"
                 v-model="imagen"
+                click:clear="$clear"
+                clearable
             /><v-btn
-                color="primary"
+                color="secundary"
                 :disabled="files.length <= 0 || !validateFileType()"
                 @click="uploadImage"
             >
@@ -81,7 +84,9 @@ const uploadImage = async () => {
     if (response) {
         //imagenVista.value = response.image;
         files.value.pop();
-        imagen.value = null;
+        if (imagen.value != null) {
+            imagen.value = null;
+        }
         await getSession();
     } else {
         console.error(response);

app/plugins/vuetify.js

@@ -48,6 +48,75 @@ const darkTheme = {
   },
 };
 
+const minimalLightTheme = {
+  dark: false,
+  colors: {
+    background: "#FFFFFF",
+    surface: "#F5F5F5",
+    primary: "#7C90DB", // Azul suave
+    "primary-darken-1": "#6A7EC9",
+    secondary: "#E0E0E0", // Gris neutro
+    "secondary-darken-1": "#C7C7C7",
+    accent: "#A5C4D4", // Azul pastel
+    error: "#FF6B6B", // Rojo coral suave
+    info: "#88C9F2",
+    success: "#77DD77", // Verde menta
+    warning: "#FFD166", // Amarillo pastel
+    "on-primary": "#2D3748", // Gris oscuro
+    "on-surface": "#2D3748",
+  },
+  variables: {
+    "border-color": "#E2E8F0",
+    "border-opacity": 0.16,
+  },
+};
+
+const minimalDarkTheme = {
+  dark: true,
+  colors: {
+    background: "#1E2B3A",
+    surface: "#2C3E50",
+    primary: "#8A9EFF", // Azul lavanda (inalterado)
+    "primary-darken-1": "#778CEB",
+    secondary: "#4A5568", // Gris azulado (reemplaza grises neutros)
+    "secondary-darken-1": "#3C4758",
+    accent: "#A7BED3", // Azul polvo (inalterado)
+    error: "#FF8A8A",
+    info: "#90CAF9",
+    success: "#81C784",
+    warning: "#FFD54F",
+    "on-primary": "#F7FAFC", // Blanco casi puro (mejor contraste)
+    "on-surface": "#E2E8F0", // Gris claro azulado
+  },
+  variables: {
+    "border-color": "#4A5568", // Coordinado con secondary
+    "border-opacity": 0.3,
+  },
+};
+
+const softDarkTheme = {
+  dark: true,
+  colors: {
+    background: "#2C3E50", // Gris-azul medio (como cielo nocturno)
+    surface: "#34495E", // 15% más claro que el fondo
+    primary: "#7F9CF5", // Azul lavanda más claro
+    "primary-darken-1": "#6B8BEA",
+    secondary: "#4B5563", // Gris neutro cálido
+    "secondary-darken-1": "#3E4A5A",
+    accent: "#94A3B8", // Gris-azul claro (para detalles)
+    error: "#FCA5A5", // Rojo suave
+    info: "#93C5FD", // Azul cielo
+    success: "#86EFAC", // Verde menta claro
+    warning: "#FCD34D", // Amarillo miel
+    "on-primary": "#F8FAFC", // Blanco niebla
+    "on-surface": "#E5E7EB", // Gris muy claro
+  },
+  variables: {
+    "border-color": "#475569", // Borde sutil
+    "border-opacity": 0.25,
+  },
+};
+
 export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
     components,
@@ -55,8 +124,8 @@ export default defineNuxtPlugin((nuxtApp) => {
     theme: {
       defaultTheme: "light",
       themes: {
-        light: lightTheme,
-        dark: darkTheme,
+        light: minimalLightTheme,
+        dark: softDarkTheme,
       },
       variations: {
         colors: ["primary", "secondary"],