From c7e5173be6284bb8ecefa907116ff6198d066c87 Mon Sep 17 00:00:00 2001
From: Gustavo Bueno da Silva <91470965+Darkghostly@users.noreply.github.com>
Date: Wed, 13 May 2026 12:17:17 -0300
Subject: [PATCH] feat: s3-T4: Responsividade

---
 frontend/src/components/RootLayout.tsx      | 31 ++++++++++++++++++---
 frontend/src/pages/AIAssistant.tsx          |  2 +-
 frontend/src/pages/Dashboard.tsx            |  8 +++---
 frontend/src/pages/MonteCarloSimulation.tsx |  2 +-
 4 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/RootLayout.tsx b/frontend/src/components/RootLayout.tsx
index dc37fa6..15a8ca2 100644
--- a/frontend/src/components/RootLayout.tsx
+++ b/frontend/src/components/RootLayout.tsx
@@ -1,9 +1,11 @@
+import { useState } from "react";
 import { Outlet, Link, useLocation } from "react-router";
-import { BarChart3, Activity, Brain, MapPin } from "lucide-react";
+import { BarChart3, Activity, Brain, MapPin, Menu, X } from "lucide-react";
 import { cn } from "./ui/utils";
 
 export function RootLayout() {
   const location = useLocation();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   const navigation = [
     { name: "Dashboard", href: "/", icon: BarChart3 },
@@ -18,6 +20,12 @@ export function RootLayout() {
         <div className="px-6 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
+              <button
+                className="md:hidden p-1.5 -ml-1.5 text-white hover:bg-white/10 rounded-lg transition-colors"
+                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              >
+                {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+              </button>
               <div className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 bg-vocedm-teal">
                 <MapPin className="w-5 h-5 text-vocedm-blue" />
               </div>
@@ -34,9 +42,23 @@ export function RootLayout() {
         </div>
       </header>
 
-      <div className="flex">
+      <div className="flex relative">
+        {/* Mobile Menu Backdrop */}
+        {isMobileMenuOpen && (
+          <div
+            className="fixed inset-0 bg-vocedm-navy/40 z-40 md:hidden backdrop-blur-sm transition-opacity"
+            onClick={() => setIsMobileMenuOpen(false)}
+          />
+        )}
+
         {/* Sidebar */}
-        <aside className="w-56 flex-shrink-0 min-h-[calc(100vh-65px)] sticky top-[65px] border-r border-border flex flex-col py-3 bg-[#F1EFFF]">
+        <aside
+          className={cn(
+            "w-56 flex-shrink-0 border-r border-border flex flex-col py-3 bg-[#F1EFFF]",
+            "fixed top-[73px] bottom-0 left-0 z-40 transition-transform duration-300",
+            isMobileMenuOpen ? "translate-x-0 shadow-2xl" : "-translate-x-full md:translate-x-0"
+          )}
+        >
           <nav className="px-4 space-y-2">
             {navigation.map((item) => {
               const Icon = item.icon;
@@ -45,6 +67,7 @@ export function RootLayout() {
                 <Link
                   key={item.name}
                   to={item.href}
+                  onClick={() => setIsMobileMenuOpen(false)}
                   className={cn(
                     "flex items-center gap-2.5 px-3 py-3 rounded-xl transition-all text-sm font-bold",
                     isActive
@@ -69,7 +92,7 @@ export function RootLayout() {
         </aside>
 
         {/* Main Content */}
-        <main className="flex-1 p-6 bg-white overflow-hidden">
+        <main className="flex-1 p-6 bg-white overflow-hidden md:ml-56 min-h-[calc(100vh-73px)]">
           <Outlet />
         </main>
       </div>
diff --git a/frontend/src/pages/AIAssistant.tsx b/frontend/src/pages/AIAssistant.tsx
index ae9ddc7..5f7c90b 100644
--- a/frontend/src/pages/AIAssistant.tsx
+++ b/frontend/src/pages/AIAssistant.tsx
@@ -230,7 +230,7 @@ Como posso ajudar com mais detalhes?`;
 
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
         {/* Chat Interface */}
-        <Card className="lg:col-span-3 flex flex-col h-[calc(100vh-280px)]">
+        <Card className="lg:col-span-3 flex flex-col min-h-[500px] lg:h-[calc(100vh-280px)]">
           <CardHeader className="border-b">
             <div className="flex items-center gap-3">
               <div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-blue-600 rounded-full flex items-center justify-center">
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 0aee6b6..fbf4947 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -242,9 +242,9 @@ export function Dashboard() {
             <CardDescription>Score de oportunidade por estado (0–10)</CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="flex gap-0" style={{ minHeight: 340 }}>
+            <div className="flex flex-col md:flex-row gap-4 md:gap-0" style={{ minHeight: 340 }}>
               {/* Lista */}
-              <div className="w-1/2 space-y-1 overflow-y-auto pr-2" style={{ maxHeight: 340 }}>
+              <div className="w-full md:w-1/2 space-y-1 overflow-y-auto md:pr-2" style={{ maxHeight: 340 }}>
                 {grf08.loading ? (
                   <div className="flex items-center justify-center h-40 text-sm text-muted-foreground gap-2">
                     <RefreshCw className="w-4 h-4 animate-spin" /> Carregando...
@@ -281,9 +281,9 @@ export function Dashboard() {
                   })
                 )}
               </div>
-              <div className="w-px bg-border mx-3" />
+              <div className="hidden md:block w-px bg-border mx-3" />
               {/* Detalhe */}
-              <div className="w-1/2 pl-1">
+              <div className="w-full md:w-1/2 md:pl-1">
                 {selectedRankingItem ? (
                   <>
                     <div className="flex items-center justify-between mb-2">
diff --git a/frontend/src/pages/MonteCarloSimulation.tsx b/frontend/src/pages/MonteCarloSimulation.tsx
index 52945d5..298b45b 100644
--- a/frontend/src/pages/MonteCarloSimulation.tsx
+++ b/frontend/src/pages/MonteCarloSimulation.tsx
@@ -174,7 +174,7 @@ export function MonteCarloSimulation() {
             <CardDescription>Configure os parâmetros para análise de cenários</CardDescription>
           </CardHeader>
           <CardContent className="space-y-6">
-            <div className="grid grid-cols-2 gap-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               <div className="space-y-2">
                 <Label htmlFor="investment">Valor do Investimento (R$)</Label>
                 <Input