feat(ui): make dashboard responsive for iPhone and mobile devices

- Add Sheet primitive component for mobile drawers
- Add MobileNav with hamburger menu for dashboard layout
- Hide desktop sidebars on mobile; show mobile header
- Make dashboard header responsive with stacked layout on small screens
- Hide selector text on mobile, show icons only
- Convert fixed-width filters to responsive widths (CFDI, Clientes, Admin, Documentos, Alertas)
- Cap dialog widths to 95vw on mobile (CFDI viewer, Documentos, Reportes, Contribuyentes, Facturación)
- Make calendar grid smaller and use single-letter weekdays on mobile
- Update viewport to include viewport-fit=cover for Samsung safe areas

apps/web/components/layouts/header.tsx

@@ -32,24 +32,30 @@ export function Header({ title, children }: HeaderProps) {
   };
 
   return (
-    <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-background/95 backdrop-blur px-6">
-      <div className="flex items-center gap-4 min-w-0">
-        <h1 className="text-xl font-semibold whitespace-nowrap">{title}</h1>
-        {children}
-      </div>
+    <header className="sticky top-0 z-30 border-b bg-background/95 backdrop-blur">
+      <div className="flex h-auto min-h-16 flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between md:px-6 md:py-0">
+        {/* Title section */}
+        <div className="flex items-center gap-4 min-w-0">
+          <h1 className="text-lg font-semibold truncate md:text-xl">{title}</h1>
+          {children}
+        </div>
 
-      <div className="flex items-center gap-3">
-        <ContribuyenteSelector />
-        <MembershipSwitcher />
-        <TenantSelector />
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={cycleTheme}
-          title={`Tema: ${themes[theme].name}`}
-        >
-          {themeIcons[theme]}
-        </Button>
+        {/* Actions section */}
+        <div className="flex flex-wrap items-center gap-2 md:gap-3">
+          <div className="flex flex-1 items-center gap-2 min-w-0 md:flex-initial md:gap-3">
+            <ContribuyenteSelector />
+            <MembershipSwitcher />
+            <TenantSelector />
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={cycleTheme}
+            title={`Tema: ${themes[theme].name}`}
+          >
+            {themeIcons[theme]}
+          </Button>
+        </div>
       </div>
     </header>
   );