Solucionado la ocultacion del menu en dispositivos mobiles

src/app.css

@@ -78,4 +78,9 @@
 
     /* Width: Custom como --spacing-* para generar w-image-fit */
     --spacing-image-fit: calc(100% - 2rem);
+}
+
+/* Smooth scroll para navegación */
+html {
+    scroll-behavior: smooth;
 }

src/lib/components/Navegacion.svelte

@@ -5,6 +5,7 @@
     import { navegationState, type PageId } from "../stores/navegation.svelte.js";
     import PdfBoton from "./PdfBoton.svelte";
     import { fade, slide } from 'svelte/transition';
+    import { cubicOut } from 'svelte/easing';
 
     let mobileMenuOpen = $state(false);
 
@@ -28,7 +29,7 @@
 
 </script>
 
-<nav class="bg-white shadow-md border-b border-gray-200 sticky top-0 z-50">
+<nav class="bg-white shadow-md border-b border-gray-200 sticky top-0 z-400">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between items-center h-16">
             <!-- Logo y branding - Más compacto en mobile -->
@@ -89,7 +90,7 @@
                 <button
                         type="button"
                         class="inline-flex items-center justify-center p-2 rounded-md text-gray-400
-                           hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 z-400
+                           hover:text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-1 z-400
                            focus:ring-inset focus:ring-blue-500 transition-colors duration-200
                            {mobileMenuOpen ? 'bg-gray-100 text-gray-600' : ''}"
                         onclick={toggleMobileMenu}
@@ -97,12 +98,12 @@
                         aria-label={mobileMenuOpen ? "Cerrar menú" : "Abrir menú"}>
                     {#if !mobileMenuOpen}
                         <!-- Icono hamburguesa -->
-                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <svg class="h-6 w-6"  viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                         </svg>
                     {:else}
                         <!-- Icono X -->
-                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <svg class="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                         </svg>
                     {/if}
@@ -115,19 +116,21 @@
     <!-- Menú móvil con slide funcionando -->
     {#if mobileMenuOpen}
         <div
-                class="fixed inset-0 bg-white bg-opacity-90 z-40 md:hidden"
+                class="fixed inset-0 z-2 md:hidden bg-white bg-opacity-1"
+                style="z-index: -1 !important;"
                 transition:fade={{ duration: 150 }}
-                onclick={() => mobileMenuOpen = false} >
+                role="button"
+                tabindex="0"
+                aria-label="Cerrar menú"
+                onclick={() => mobileMenuOpen = false}
+                onkeydown={(e) => (e.key === 'Enter' || e.key === ' ' ? mobileMenuOpen = false : null)}>
 
             <!-- Menú que desliza desde arriba -->
-            <div class="absolute top-16 left-0 right-0 bg-white shadow-xl border-t border-gray-200 z-200
+            <div class="absolute top-16 left-0 right-0 bg-white shadow-xl border-t border-gray-200
                     max-h-[calc(100vh-4rem)] overflow-y-auto"
-                    transition:slide={{
-                duration: 300,
-                axis: 'y',
-                easing: 'cubic-out'
-            }}>
-                <div class="px-2 pt-2 pb-4 space-y-1 sm:px-3" >
+                    transition:slide={{ duration: 300, axis: 'y', easing: cubicOut }}
+            >
+                <div class="px-2 pt-2 pb-4 space-y-1 sm:px-3">
 
                     {#each navegationState.sectionsInfo as section}
                         {#if section.menu }
@@ -143,7 +146,7 @@
                                 <div class="flex items-center justify-between">
                                     <span>{section.mome ?? section.label}</span>
                                     {#if navegationState.activePage === section.id}
-                                        <svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
+                                        <svg class="w-5 h-5 text-blue-500" stroke="currentColor" viewBox="0 0 20 20">
                                             <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                         </svg>
                                     {/if}
@@ -155,7 +158,7 @@
                     <div class="px-4 py-3 border-t border-gray-200 mt-2">
                         <PdfBoton />
                     </div>
-                    
+
                 </div>
             </div>
         </div>
@@ -167,9 +170,4 @@
         pointer-events: none;
         opacity: 0.5;
     }
-
-    /* Smooth scroll para navegación */
-    html {
-        scroll-behavior: smooth;
-    }
 </style>