Adiciona recurso de comparacao de consultores

- Permite selecionar ate 2 consultores na lista via checkbox
- Exibe barra flutuante com consultores selecionados
- Modal de comparacao lado a lado com todos os componentes (A, B, C, D)
- Destaque visual para valores maiores/menores entre os consultores
- Layout responsivo para mobile

frontend/src/App.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import Header from './components/Header';
 import ConsultorCard from './components/ConsultorCard';
+import CompararModal from './components/CompararModal';
 import { rankingService } from './services/api';
 import './App.css';
 
@@ -15,6 +16,26 @@ function App() {
   const [highlightId, setHighlightId] = useState(null);
   const [busca, setBusca] = useState('');
   const [buscando, setBuscando] = useState(false);
+  const [selecionados, setSelecionados] = useState([]);
+  const [modalAberto, setModalAberto] = useState(false);
+
+  const toggleSelecionado = (consultor) => {
+    setSelecionados((prev) => {
+      const existe = prev.find((c) => c.id_pessoa === consultor.id_pessoa);
+      if (existe) {
+        return prev.filter((c) => c.id_pessoa !== consultor.id_pessoa);
+      }
+      if (prev.length >= 2) {
+        return [prev[1], consultor];
+      }
+      return [...prev, consultor];
+    });
+  };
+
+  const limparSelecao = () => {
+    setSelecionados([]);
+    setModalAberto(false);
+  };
 
   useEffect(() => {
     loadRanking();
@@ -123,10 +144,41 @@ function App() {
             key={consultor.id_pessoa}
             consultor={consultor}
             highlight={consultor.id_pessoa === highlightId}
+            selecionado={selecionados.some((c) => c.id_pessoa === consultor.id_pessoa)}
+            onToggleSelecionado={toggleSelecionado}
           />
         ))}
       </div>
 
+      {selecionados.length > 0 && (
+        <div className="selecao-flutuante">
+          <div className="selecao-info">
+            <span>{selecionados.length}/2 selecionados</span>
+            {selecionados.map((c) => (
+              <span key={c.id_pessoa} className="selecao-nome">{c.nome.split(' ')[0]}</span>
+            ))}
+          </div>
+          <div className="selecao-acoes">
+            <button className="btn-limpar" onClick={limparSelecao}>Limpar</button>
+            <button
+              className="btn-comparar"
+              disabled={selecionados.length < 2}
+              onClick={() => setModalAberto(true)}
+            >
+              Comparar
+            </button>
+          </div>
+        </div>
+      )}
+
+      {modalAberto && (
+        <CompararModal
+          consultor1={selecionados[0]}
+          consultor2={selecionados[1]}
+          onClose={() => setModalAberto(false)}
+        />
+      )}
+
       <footer>
         <p>Dados: ATUACAPES (Elasticsearch) + SUCUPIRA_PAINEL (Oracle)</p>
         <p>Critérios: Minuta Técnica - Ranking AtuaCAPES | Clique em qualquer consultor para ver detalhes</p>