fix(frontend): ajustes finais na secao Lattes

frontend/src/components/ConsultorCard.css

@@ -1559,3 +1559,51 @@
   color: var(--muted);
   font-size: 0.75rem;
 }
+
+.tipo-modal-voltar {
+  background: rgba(99, 102, 241, 0.15);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+  border-radius: 6px;
+  color: #a5b4fc;
+  font-size: 0.8rem;
+  font-weight: 500;
+  padding: 0.35rem 0.65rem;
+  cursor: pointer;
+  transition: all 200ms ease;
+  margin-right: 0.75rem;
+}
+
+.tipo-modal-voltar:hover {
+  background: rgba(99, 102, 241, 0.25);
+  border-color: rgba(99, 102, 241, 0.5);
+  color: #c7d2fe;
+}
+
+.modal-item-clicavel {
+  cursor: pointer;
+  position: relative;
+  transition: all 150ms ease;
+  padding-right: 2rem;
+}
+
+.modal-item-clicavel:hover {
+  background: rgba(79, 70, 229, 0.12);
+  border-color: rgba(79, 70, 229, 0.4);
+  transform: translateX(3px);
+}
+
+.modal-item-arrow {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--accent);
+  font-size: 0.9rem;
+  opacity: 0.5;
+  transition: all 150ms ease;
+}
+
+.modal-item-clicavel:hover .modal-item-arrow {
+  opacity: 1;
+  transform: translateY(-50%) translateX(3px);
+}

frontend/src/components/ConsultorCard.jsx

@@ -688,30 +688,43 @@ const SeloModal = ({ selo, consultor, onClose }) => {
 };
 
 const ItemDetalheModal = ({ item, tipo, onClose }) => {
+  const [subDetalhe, setSubDetalhe] = useState(null);
+
   if (!item || !tipo) return null;
 
   const formatDate = (dateStr) => {
     if (!dateStr) return 'N/A';
+    if (dateStr.includes('/')) {
+      const parts = dateStr.split(' ')[0].split('/');
+      if (parts.length === 3) {
+        return `${parts[0]}/${parts[1]}/${parts[2]}`;
+      }
+    }
     return new Date(dateStr).toLocaleDateString('pt-BR');
   };
 
+  const currentItem = subDetalhe?.item || item;
+  const currentTipo = subDetalhe?.tipo || tipo;
+
   const getTitulo = () => {
-    switch (tipo) {
+    switch (currentTipo) {
       case 'titulacao': return 'Titulação';
-      case 'producoes_lattes': return 'Produções Lattes';
+      case 'producoes_lattes': return 'Currículo Lattes';
       case 'vinculo': return 'Vínculo de Consultoria';
       case 'coordenacao': return 'Coordenação CAPES';
       case 'premiacao': return 'Premiação';
       case 'avaliacao': return 'Avaliação de Comissão';
       case 'inscricao': return 'Inscrição em Prêmio';
-      case 'participacao': return item.codigo === 'PROJ' ? 'Projeto' : 'Evento';
+      case 'participacao': return currentItem.codigo === 'PROJ' ? 'Projeto' : 'Evento';
       case 'orientacao': return 'Orientação';
+      case 'orientacao_lattes': return 'Orientação Concluída';
+      case 'idioma': return 'Idioma';
       default: return 'Detalhes';
     }
   };
 
   const getIcone = () => {
-    switch (tipo) {
+    switch (currentTipo) {
       case 'titulacao': return '🎓';
       case 'producoes_lattes': return '📚';
       case 'vinculo': return '💼';
@@ -719,45 +732,168 @@ const ItemDetalheModal = ({ item, tipo, onClose }) => {
       case 'premiacao': return '🏆';
       case 'avaliacao': return '📋';
       case 'inscricao': return '📝';
-      case 'participacao': return item.codigo === 'PROJ' ? '📊' : '📅';
+      case 'participacao': return currentItem.codigo === 'PROJ' ? '📊' : '📅';
       case 'orientacao': return '🎓';
+      case 'orientacao_lattes': return '👨‍🏫';
+      case 'idioma': return '🌐';
       default: return '📄';
     }
   };
 
+  const handleVoltar = () => {
+    setSubDetalhe(null);
+  };
+
   const renderContent = () => {
-    switch (tipo) {
+    switch (currentTipo) {
       case 'titulacao': {
+        const it = currentItem;
         return (
           <div className="modal-detalhe-content">
             <div className="modal-detalhe-row">
-              <span className="modal-detalhe-label">Grau</span>
+              <span className="modal-detalhe-label">Grau Acadêmico</span>
-              <span className="modal-detalhe-value">{item.grau || 'N/A'}</span>
+              <span className="modal-detalhe-value">{it.grau || 'N/A'}</span>
             </div>
-            {item.area && (
+            {it.area && (
               <div className="modal-detalhe-row">
-                <span className="modal-detalhe-label">Área</span>
+                <span className="modal-detalhe-label">Área de Conhecimento</span>
-                <span className="modal-detalhe-value">{item.area}</span>
+                <span className="modal-detalhe-value">{it.area}</span>
               </div>
             )}
-            {(item.ies_sigla || item.ies_nome) && (
+            {it.area_avaliacao && it.area_avaliacao !== it.area && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Área de Avaliação</span>
+                <span className="modal-detalhe-value">{it.area_avaliacao}</span>
+              </div>
+            )}
+            {(it.ies_sigla || it.ies_nome) && (
               <div className="modal-detalhe-row">
                 <span className="modal-detalhe-label">Instituição</span>
                 <span className="modal-detalhe-value">
-                  {item.ies_sigla && item.ies_nome ? `${item.ies_sigla} - ${item.ies_nome}` : (item.ies_sigla || item.ies_nome)}
+                  {it.ies_sigla && it.ies_nome ? `${it.ies_sigla} - ${it.ies_nome}` : (it.ies_sigla || it.ies_nome)}
                 </span>
               </div>
             )}
-            {item.pais && (
+            {it.ies_status && (
               <div className="modal-detalhe-row">
-                <span className="modal-detalhe-label">País</span>
+                <span className="modal-detalhe-label">Natureza Jurídica</span>
-                <span className="modal-detalhe-value">{item.pais}</span>
+                <span className="modal-detalhe-value">{it.ies_status}</span>
               </div>
             )}
-            {item.ano && (
+            {it.programa && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Programa</span>
+                <span className="modal-detalhe-value">{it.programa}</span>
+              </div>
+            )}
+            {it.codigo_programa && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Código do Programa</span>
+                <span className="modal-detalhe-value">{it.codigo_programa}</span>
+              </div>
+            )}
+            {it.pais && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">País</span>
+                <span className="modal-detalhe-value">{it.pais}</span>
+              </div>
+            )}
+            {it.ano && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Ano de Conclusão</span>
+                <span className="modal-detalhe-value">{it.ano}</span>
+              </div>
+            )}
+            {it.inicio && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Início</span>
+                <span className="modal-detalhe-value">{formatDate(it.inicio)}</span>
+              </div>
+            )}
+            {it.fim && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Término</span>
+                <span className="modal-detalhe-value">{formatDate(it.fim)}</span>
+              </div>
+            )}
+          </div>
+        );
+      }
+
+      case 'orientacao_lattes': {
+        const o = currentItem;
+        return (
+          <div className="modal-detalhe-content">
+            {o.orientando && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Orientando</span>
+                <span className="modal-detalhe-value">{o.orientando}</span>
+              </div>
+            )}
+            {o.tipo && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Tipo</span>
+                <span className="modal-detalhe-value">{o.tipo}</span>
+              </div>
+            )}
+            {o.titulo && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Título</span>
+                <span className="modal-detalhe-value" style={{ fontSize: '0.85rem' }}>{o.titulo}</span>
+              </div>
+            )}
+            {o.ano && (
               <div className="modal-detalhe-row">
                 <span className="modal-detalhe-label">Ano</span>
-                <span className="modal-detalhe-value">{item.ano}</span>
+                <span className="modal-detalhe-value">{o.ano}</span>
+              </div>
+            )}
+            {o.programa && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Programa</span>
+                <span className="modal-detalhe-value">{o.programa}</span>
+              </div>
+            )}
+            {o.ies && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Instituição</span>
+                <span className="modal-detalhe-value">{o.ies}</span>
+              </div>
+            )}
+          </div>
+        );
+      }
+
+      case 'idioma': {
+        const i = currentItem;
+        return (
+          <div className="modal-detalhe-content">
+            <div className="modal-detalhe-row">
+              <span className="modal-detalhe-label">Idioma</span>
+              <span className="modal-detalhe-value">{i.idioma || 'N/A'}</span>
+            </div>
+            {i.proficiencia_leitura && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Leitura</span>
+                <span className="modal-detalhe-value">{i.proficiencia_leitura}</span>
+              </div>
+            )}
+            {i.proficiencia_escrita && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Escrita</span>
+                <span className="modal-detalhe-value">{i.proficiencia_escrita}</span>
+              </div>
+            )}
+            {i.proficiencia_fala && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Fala</span>
+                <span className="modal-detalhe-value">{i.proficiencia_fala}</span>
+              </div>
+            )}
+            {i.proficiencia_compreensao && (
+              <div className="modal-detalhe-row">
+                <span className="modal-detalhe-label">Compreensão</span>
+                <span className="modal-detalhe-value">{i.proficiencia_compreensao}</span>
               </div>
             )}
           </div>
@@ -791,10 +927,14 @@ const ItemDetalheModal = ({ item, tipo, onClose }) => {
 
             {titulacoes.length > 0 && (
               <>
-                <h5 className="modal-section-title">Formação Acadêmica</h5>
+                <h5 className="modal-section-title">Formação Acadêmica ({titulacoes.length})</h5>
                 <ul className="modal-list">
                   {titulacoes.map((t, idx) => (
-                    <li key={idx} className="modal-item">
+                    <li
+                      key={idx}
+                      className="modal-item modal-item-clicavel"
+                      onClick={() => setSubDetalhe({ item: t, tipo: 'titulacao' })}
+                    >
                       <span className="modal-item-main">
                         <strong>{t.grau}</strong>
                         {t.area && ` em ${t.area}`}
@@ -806,6 +946,7 @@ const ItemDetalheModal = ({ item, tipo, onClose }) => {
                       {t.programa && (
                         <span className="modal-item-sub muted">Programa: {t.programa}</span>
                       )}
+                      <span className="modal-item-arrow">→</span>
                     </li>
                   ))}
                 </ul>
@@ -814,10 +955,14 @@ const ItemDetalheModal = ({ item, tipo, onClose }) => {
 
             {idiomas.length > 0 && (
               <>
-                <h5 className="modal-section-title">Idiomas</h5>
+                <h5 className="modal-section-title">Idiomas ({idiomas.length})</h5>
                 <ul className="modal-list">
                   {idiomas.map((i, idx) => (
-                    <li key={idx} className="modal-item">
+                    <li
+                      key={idx}
+                      className="modal-item modal-item-clicavel"
+                      onClick={() => setSubDetalhe({ item: i, tipo: 'idioma' })}
+                    >
                       <span className="modal-item-main">{i.idioma}</span>
                       <span className="modal-item-detail muted">
                         {[
@@ -826,6 +971,7 @@ const ItemDetalheModal = ({ item, tipo, onClose }) => {
                           i.proficiencia_fala && `Fala: ${i.proficiencia_fala}`,
                         ].filter(Boolean).join(' | ')}
                       </span>
+                      <span className="modal-item-arrow">→</span>
                     </li>
                   ))}
                 </ul>
@@ -838,8 +984,12 @@ const ItemDetalheModal = ({ item, tipo, onClose }) => {
                   Orientações Concluídas ({item.total_orientacoes})
                 </h5>
                 <ul className="modal-list">
-                  {orientacoes.slice(0, 10).map((o, idx) => (
+                  {orientacoes.slice(0, 15).map((o, idx) => (
-                    <li key={idx} className="modal-item">
+                    <li
+                      key={idx}
+                      className="modal-item modal-item-clicavel"
+                      onClick={() => setSubDetalhe({ item: o, tipo: 'orientacao_lattes' })}
+                    >
                       <span className="modal-item-main">{o.orientando || 'Orientando não informado'}</span>
                       <span className="modal-item-detail">
                         {o.tipo?.replace('Orientação ', '').replace(' Concluída', '')}
@@ -848,14 +998,15 @@ const ItemDetalheModal = ({ item, tipo, onClose }) => {
                       </span>
                       {o.titulo && (
                         <span className="modal-item-sub muted" style={{ fontSize: '0.75rem' }}>
-                          {o.titulo.length > 80 ? o.titulo.substring(0, 80) + '...' : o.titulo}
+                          {o.titulo.length > 60 ? o.titulo.substring(0, 60) + '...' : o.titulo}
                         </span>
                       )}
+                      <span className="modal-item-arrow">→</span>
                     </li>
                   ))}
-                  {item.total_orientacoes > 10 && (
+                  {item.total_orientacoes > 15 && (
                     <li className="modal-item muted">
-                      ... e mais {item.total_orientacoes - 10} orientações
+                      ... e mais {item.total_orientacoes - 15} orientações
                     </li>
                   )}
                 </ul>
@@ -1138,6 +1289,11 @@ const ItemDetalheModal = ({ item, tipo, onClose }) => {
     <div className="tipo-modal-overlay" onClick={onClose}>
       <div className="tipo-modal" onClick={(e) => e.stopPropagation()}>
         <div className="tipo-modal-header">
+          {subDetalhe && (
+            <button className="tipo-modal-voltar" onClick={handleVoltar}>
+              ← Voltar
+            </button>
+          )}
           <span className="modal-titulo-item">
             <span className="modal-titulo-icone">{getIcone()}</span>
             <span>{getTitulo()}</span>