From c0a9ebe8d072dcc386e6cb5f3a83d4251fde2e68 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 16 Oct 2025 23:26:51 -0600
Subject: [PATCH] =?UTF-8?q?Mejorar=20dise=C3=B1o=20de=20barra=20de=20t?=
 =?UTF-8?q?=C3=ADtulo=20PWA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Barra completamente transparente con patrón sutil de cuadrícula
- Título en chip cuadrado con bordes mínimamente redondeados
- Glassmorphism en el chip para contraste y legibilidad
- Patrón discreto (3% opacidad día, 2% noche)
- Configurar pointer-events para bloquear interacción debajo
---
 nuxt4/app/components/WindowTitleBar.vue | 70 +++++++++++++++++++++----
 1 file changed, 59 insertions(+), 11 deletions(-)

diff --git a/nuxt4/app/components/WindowTitleBar.vue b/nuxt4/app/components/WindowTitleBar.vue
index 43de07c..8b75abf 100644
--- a/nuxt4/app/components/WindowTitleBar.vue
+++ b/nuxt4/app/components/WindowTitleBar.vue
@@ -44,9 +44,24 @@ onMounted(() => {
   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);
+  /* Completamente transparente con patrón sutil */
+  background: transparent;
+  /* Patrón de puntos muy sutil para indicar área arrastrable */
+  background-image:
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 8px,
+      rgba(128, 128, 128, 0.03) 8px,
+      rgba(128, 128, 128, 0.03) 9px
+    ),
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 8px,
+      rgba(128, 128, 128, 0.03) 8px,
+      rgba(128, 128, 128, 0.03) 9px
+    );
   /* Esta propiedad permite arrastrar la ventana */
   -webkit-app-region: drag;
   app-region: drag;
@@ -55,6 +70,8 @@ onMounted(() => {
   padding: 0 1rem;
   user-select: none;
   transition: all 0.3s ease;
+  /* Bloquear interacción con elementos debajo */
+  pointer-events: auto;
 }
 
 .titlebar-content {
@@ -65,20 +82,32 @@ onMounted(() => {
 }
 
 .app-title {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 600;
-  color: var(--color-gray-700);
+  color: var(--color-gray-800);
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  padding: 0.25rem 0.75rem;
+  /* Chip cuadrado con bordes mínimamente redondeados */
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(10px) saturate(150%);
+  border-radius: 0.25rem;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  /* Permitir click en el chip */
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+  pointer-events: auto;
 }
 
-/* Permitir que los botones dentro de la barra sean clickeables */
+/* Permitir que los elementos interactivos dentro de la barra sean clickeables */
 .window-titlebar button,
 .window-titlebar a,
 .window-titlebar input {
   -webkit-app-region: no-drag;
   app-region: no-drag;
+  pointer-events: auto;
 }
 
 /* Modo oscuro */
@@ -86,12 +115,31 @@ onMounted(() => {
 
 <style>
 .dark .window-titlebar {
-  background: rgba(0, 0, 0, 0.8) !important;
-  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
+  /* Patrón más sutil en modo oscuro */
+  background-image:
+    repeating-linear-gradient(
+      90deg,
+      transparent,
+      transparent 8px,
+      rgba(255, 255, 255, 0.02) 8px,
+      rgba(255, 255, 255, 0.02) 9px
+    ),
+    repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent 8px,
+      rgba(255, 255, 255, 0.02) 8px,
+      rgba(255, 255, 255, 0.02) 9px
+    );
 }
 
 .dark .app-title {
-  color: var(--color-gray-200) !important;
+  color: var(--color-gray-100) !important;
+  background: rgba(0, 0, 0, 0.7) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.3),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
 }
 
 /* Ajustar el padding del contenido principal cuando la barra está visible */