From d8245c5021c3553944f26a1aae9cdbb7629ded30 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 22 Feb 2026 14:07:47 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20Implementaci=C3=B3n=20de=20Sticky=20Head?=
 =?UTF-8?q?er=20y=20optimizaci=C3=B3n=20de=20=C3=A1rea=20segura=20(Notch)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/AppHeader.vue          |  7 +++----
 frontend/src/components/layouts/MainLayout.vue | 10 ++++------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index abe8c6b..89e418a 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -164,16 +164,15 @@ const handleLogout = () => {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  padding: 0 20px;
-  height: 64px;
+  padding: var(--safe-area-top) 20px 0; /* Añadir espacio para el Notch */
+  height: calc(64px + var(--safe-area-top));
   border-bottom: 1px solid var(--border-color);
-  position: fixed;
+  position: sticky; /* Cambiado de fixed a sticky para mejor integración */
   top: 0;
   left: 0;
   right: 0;
   z-index: 2000;
   width: 100%;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .header-left {
diff --git a/frontend/src/components/layouts/MainLayout.vue b/frontend/src/components/layouts/MainLayout.vue
index f7c5e57..64b5a5d 100644
--- a/frontend/src/components/layouts/MainLayout.vue
+++ b/frontend/src/components/layouts/MainLayout.vue
@@ -20,20 +20,18 @@ const authStore = useAuthStore();
 .main-layout {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  min-height: 100vh;
   width: 100%;
-  overflow: hidden;
-  background: transparent; /* Permitir ver fondos de páginas */
+  background: var(--bg-primary);
 }
 
 .main-content {
   flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
+  width: 100%;
   background: transparent;
   display: flex;
   flex-direction: column;
-  padding-top: 64px; /* Compensar AppHeader fijo */
+  /* El padding-top ya no es necesario porque el header es sticky */
 }
 
 .has-bottom-nav {