fix: add click-outside functionality to AgenticMethodologyIntro modal

Added useEffect hook with event listener to close the methodology panel
when user clicks outside of it. This provides better UX by allowing users
to close the panel by clicking anywhere outside, not just the header.

Changes:
- Added componentRef using useRef to track the component DOM element
- Added useEffect with mousedown event listener
- Wrapped Card component in div with ref
- Event listener automatically cleans up when panel closes or component unmounts

https://claude.ai/code/session_01GNbnkFoESkRcnPr3bLCYDg

frontend/components/tabs/AgenticReadinessTab.tsx

@@ -228,6 +228,21 @@ function AgenticMethodologyIntro({
   totalQueues: number;
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const componentRef = React.useRef<HTMLDivElement>(null);
+
+  // Close when clicking outside
+  React.useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isExpanded && componentRef.current && !componentRef.current.contains(event.target as Node)) {
+        setIsExpanded(false);
+      }
+    };
+
+    if (isExpanded) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isExpanded]);
 
   // Calcular estadísticas para el roadmap
   const automatizableQueues = tierData.AUTOMATE.count + tierData.ASSIST.count;
@@ -239,6 +254,7 @@ function AgenticMethodologyIntro({
     : 0;
 
   return (
+    <div ref={componentRef}>
       <Card padding="none">
         {/* Header con toggle */}
         <div
@@ -454,6 +470,7 @@ function AgenticMethodologyIntro({
         </div>
       )}
       </Card>
+    </div>
   );
 }