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,12 +254,13 @@ function AgenticMethodologyIntro({
     : 0;
 
   return (
-    <Card padding="none">
+    <div ref={componentRef}>
-      {/* Header con toggle */}
+      <Card padding="none">
-      <div
+        {/* Header con toggle */}
-        className="px-5 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 cursor-pointer"
+        <div
-        onClick={() => setIsExpanded(!isExpanded)}
+          className="px-5 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200 cursor-pointer"
-      >
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <div className="p-2 rounded-lg bg-blue-100">
@@ -453,7 +469,8 @@ function AgenticMethodologyIntro({
           <span className="ml-auto text-blue-600 font-medium">Click para expandir metodología</span>
         </div>
       )}
-    </Card>
+      </Card>
+    </div>
   );
 }