Traducción completa al español y barra de título PWA

- Traducir mensajes de API a español
- Configurar idioma español en HTML y manifest (lang="es")
- Actualizar nombres de app: "Perfil Nucleo"
- Crear WindowTitleBar para Window Controls Overlay
- Ajustar padding para acomodar barra de título
- Traducir campos restantes en componentes legacy

nuxt4/app/components/WindowTitleBar.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    v-if="isWindowControlsOverlay"
+    class="window-titlebar"
+    :style="{ height: titlebarHeight }"
+  >
+    <div class="titlebar-content">
+      <span class="app-title">Perfil Nucleo</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const isWindowControlsOverlay = ref(false)
+const titlebarHeight = ref('40px')
+
+onMounted(() => {
+  // Detectar si Window Controls Overlay está activo
+  if ('windowControlsOverlay' in navigator) {
+    const wco = (navigator as any).windowControlsOverlay
+    isWindowControlsOverlay.value = wco.visible
+
+    // Obtener la geometría del overlay si está disponible
+    if (wco.getTitlebarAreaRect) {
+      const rect = wco.getTitlebarAreaRect()
+      titlebarHeight.value = `${rect.height}px`
+    }
+
+    // Escuchar cambios en el overlay
+    wco.addEventListener('geometrychange', (event: any) => {
+      isWindowControlsOverlay.value = event.visible
+      if (event.titlebarAreaRect) {
+        titlebarHeight.value = `${event.titlebarAreaRect.height}px`
+      }
+    })
+  }
+})
+</script>
+
+<style scoped>
+.window-titlebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(20px) saturate(180%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /* Esta propiedad permite arrastrar la ventana */
+  -webkit-app-region: drag;
+  app-region: drag;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  user-select: none;
+  transition: all 0.3s ease;
+}
+
+.titlebar-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.app-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-gray-700);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Permitir que los botones dentro de la barra sean clickeables */
+.window-titlebar button,
+.window-titlebar a,
+.window-titlebar input {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+/* Modo oscuro */
+</style>
+
+<style>
+.dark .window-titlebar {
+  background: rgba(0, 0, 0, 0.8) !important;
+  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.dark .app-title {
+  color: var(--color-gray-200) !important;
+}
+
+/* Ajustar el padding del contenido principal cuando la barra está visible */
+.window-titlebar ~ * {
+  padding-top: env(titlebar-area-height, 0px);
+}
+</style>

nuxt4/app/components/auth/EditProfileButton.vue

@@ -21,7 +21,7 @@
             />
           </UFormGroup>
 
-          <UFormGroup label="Email" name="email">
+          <UFormGroup label="Correo electrónico" name="email">
             <UInput
               v-model="formData.email"
               type="email"
@@ -30,7 +30,7 @@
             />
           </UFormGroup>
 
-          <UFormGroup label="Username" name="username">
+          <UFormGroup label="Nombre de usuario" name="username">
             <UInput
               v-model="formData.username"
               disabled