correcao de mapas, linkagem da pesquisa e avaliacao

backend/app/core/elaboracao/charts.py

@@ -17,7 +17,12 @@ import branca.colormap as cm
 from branca.element import Element
 from html import escape
 from typing import Any
-from app.core.map_layers import add_bairros_layer, add_indice_marker, add_zoom_responsive_circle_markers
+from app.core.map_layers import (
+    add_bairros_layer,
+    add_indice_marker,
+    add_popup_pagination_handlers,
+    add_zoom_responsive_circle_markers,
+)
 
 # ============================================================
 # CONSTANTES DE ESTILO
@@ -634,12 +639,15 @@ def _aplicar_jitter_sobrepostos(
     max_raio_metros = 22.0
     metros_por_grau_lat = 111_320.0
 
+    lat_plot_pos = int(df_plot.columns.get_loc(lat_plot_col))
+    lon_plot_pos = int(df_plot.columns.get_loc(lon_plot_col))
+
     for _, idx_labels in grupos.indices.items():
-        if len(idx_labels) <= 1:
+        posicoes = np.asarray(idx_labels, dtype=int)
+        if posicoes.size <= 1:
             continue
-        idx_list = list(idx_labels)
-        base_lat = float(df_plot.at[idx_list[0], lat_plot_col])
-        base_lon = float(df_plot.at[idx_list[0], lon_plot_col])
+        base_lat = float(df_plot.iat[int(posicoes[0]), lat_plot_pos])
+        base_lon = float(df_plot.iat[int(posicoes[0]), lon_plot_pos])
         if not np.isfinite(base_lat) or not np.isfinite(base_lon):
             continue
 
@@ -648,7 +656,7 @@ def _aplicar_jitter_sobrepostos(
         cos_lat = max(abs(math.cos(math.radians(base_lat))), 1e-6)
         metros_por_grau_lon = metros_por_grau_lat * cos_lat
 
-        for pos, idx_label in enumerate(idx_list):
+        for pos, pos_idx in enumerate(posicoes):
             if pos == 0:
                 continue
 
@@ -665,8 +673,8 @@ def _aplicar_jitter_sobrepostos(
             delta_lat = (raio_m * math.sin(angulo)) / metros_por_grau_lat
             delta_lon = (raio_m * math.cos(angulo)) / metros_por_grau_lon
 
-            df_plot.at[idx_label, lat_plot_col] = base_lat + delta_lat
-            df_plot.at[idx_label, lon_plot_col] = base_lon + delta_lon
+            df_plot.iat[int(pos_idx), lat_plot_pos] = base_lat + delta_lat
+            df_plot.iat[int(pos_idx), lon_plot_pos] = base_lon + delta_lon
 
     return df_plot
 
@@ -678,6 +686,14 @@ def _montar_popup_registro_em_colunas(
     max_itens_coluna: int = 8,
     popup_uid: str | None = None,
 ) -> tuple[str, int]:
+    def _limitar_texto(valor: str, limite: int) -> str:
+        txt = str(valor)
+        if limite <= 0 or len(txt) <= limite:
+            return txt
+        if limite <= 3:
+            return txt[:limite]
+        return txt[: limite - 3] + "..."
+
     itens: list[tuple[str, str]] = []
     for col in allowed_cols:
         if col not in row.index:
@@ -698,67 +714,78 @@ def _montar_popup_registro_em_colunas(
     if not itens:
         return f"<b>Índice: {escape(str(idx))}</b>", 320
 
-    paginas = [itens[i:i + max_itens_coluna] for i in range(0, len(itens), max_itens_coluna)]
+    max_colunas_por_pagina = 2
+    max_chars_chave = 20
+    max_chars_valor = 20
+    char_px = 7.2
+    gap_cols_px = 12
+    popup_padding_horizontal_px = 30
+    coluna_largura_px = int(round((max_chars_chave + max_chars_valor) * char_px + 28))
+    itens_por_pagina = max_itens_coluna * max_colunas_por_pagina
+    paginas = [itens[i:i + itens_por_pagina] for i in range(0, len(itens), itens_por_pagina)]
     popup_uid = popup_uid or f"mesa-pop-{abs(hash(str(idx))) % 10_000_000}"
+    itens_primeira_pagina = len(paginas[0]) if paginas else 0
+    colunas_visiveis = max(1, min(max_colunas_por_pagina, int(math.ceil(itens_primeira_pagina / max_itens_coluna)) if itens_primeira_pagina else 1))
+    popup_largura_px = popup_padding_horizontal_px + (coluna_largura_px * colunas_visiveis) + (gap_cols_px * (colunas_visiveis - 1))
 
     pages_html = []
-    botoes_html = []
     for pagina_idx, pagina_itens in enumerate(paginas):
-        trs = "".join([
-            "<tr style='border-bottom:1px solid #e9ecef;'>"
-            f"<td style='padding:4px 8px 4px 0; color:#6c757d; font-weight:500;'>{escape(c)}</td>"
-            f"<td style='padding:4px 0; text-align:right; color:#495057;'>{escape(v)}</td>"
-            "</tr>"
-            for c, v in pagina_itens
-        ])
+        colunas = [pagina_itens[i:i + max_itens_coluna] for i in range(0, len(pagina_itens), max_itens_coluna)]
+        colunas_html = []
+        for col_itens in colunas:
+            trs_parts: list[str] = []
+            for c, v in col_itens:
+                c_full = str(c)
+                v_full = str(v)
+                c_txt = escape(_limitar_texto(c_full, max_chars_chave))
+                v_txt = escape(_limitar_texto(v_full, max_chars_valor))
+                c_title = escape(c_full)
+                v_title = escape(v_full)
+                trs_parts.append(
+                    "<tr style='border-bottom:1px solid #e9ecef;'>"
+                    "<td style='padding:4px 8px 4px 0; color:#6c757d; font-weight:500; width:50%; max-width:50%; overflow:hidden; white-space:nowrap;'>"
+                    f"<span title='{c_title}'>{c_txt}</span>"
+                    "</td>"
+                    "<td style='padding:4px 0; text-align:right; color:#495057; width:50%; max-width:50%; overflow:hidden; white-space:nowrap;'>"
+                    f"<span title='{v_title}'>{v_txt}</span>"
+                    "</td>"
+                    "</tr>"
+                )
+            trs = "".join(trs_parts)
+            colunas_html.append(
+                f"<div style='flex:0 0 {coluna_largura_px}px; width:{coluna_largura_px}px; min-width:{coluna_largura_px}px; overflow:hidden;'>"
+                f"<table style='border-collapse:collapse; table-layout:fixed; font-size:12px; width:{coluna_largura_px}px;'>{trs}</table>"
+                "</div>"
+            )
         display = "block" if pagina_idx == 0 else "none"
         pages_html.append(
-            f"<div class='mesa-popup-page' data-page='{pagina_idx}' style='display:{display};'>"
-            f"<table style='border-collapse:collapse; font-size:12px; width:100%;'>{trs}</table>"
+            f"<div class='mesa-popup-page' data-page='{pagina_idx + 1}' style='display:{display};'>"
+            f"<div style='display:flex; gap:12px; align-items:flex-start; flex-wrap:nowrap;'>{''.join(colunas_html)}</div>"
             "</div>"
         )
-        botao_style = (
-            "border:1px solid #9fb4c8; background:#eaf1f7; border-radius:6px; "
-            "padding:2px 7px; font-size:11px; cursor:pointer; color:#2f4b66;"
-            if pagina_idx == 0
-            else
-            "border:1px solid #ced8e2; background:#fff; border-radius:6px; "
-            "padding:2px 7px; font-size:11px; cursor:pointer; color:#4e6479;"
-        )
-        onclick = (
-            f"var root=document.getElementById('{popup_uid}');"
-            "if(!root){return false;}"
-            "var pages=root.querySelectorAll('.mesa-popup-page');"
-            "for(var i=0;i<pages.length;i++){pages[i].style.display=(i==="
-            f"{pagina_idx}"
-            ")?'block':'none';}"
-            "var btns=root.querySelectorAll('[data-page-btn]');"
-            "for(var j=0;j<btns.length;j++){btns[j].style.background='#fff';btns[j].style.borderColor='#ced8e2';btns[j].style.color='#4e6479';}"
-            "this.style.background='#eaf1f7';this.style.borderColor='#9fb4c8';this.style.color='#2f4b66';"
-            "return false;"
-        )
-        botoes_html.append(
-            f"<button type='button' data-page-btn='1' style=\"{botao_style}\" onclick=\"{onclick}\">"
-            f"{pagina_idx + 1}</button>"
-        )
 
     controls_html = ""
     if len(paginas) > 1:
         controls_html = (
-            "<div class='mesa-popup-controls' style='display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center;'>"
-            f"<span style='font-size:11px; color:#5d7388; margin-right:2px;'>Páginas:</span>{''.join(botoes_html)}"
+            "<div class='mesa-popup-controls' style='display:flex; gap:5px; flex-wrap:nowrap; margin-top:8px; align-items:center; justify-content:center; white-space:nowrap; width:100%;'>"
+            f"<button type='button' data-page-nav='first' data-a='first' style=\"border:1px solid #ced8e2; background:#fff; border-radius:6px; padding:2px 7px; font-size:11px; cursor:pointer; color:#4e6479;\">&laquo;</button>"
+            f"<button type='button' data-page-nav='prev' data-a='prev' style=\"border:1px solid #ced8e2; background:#fff; border-radius:6px; padding:2px 7px; font-size:11px; cursor:pointer; color:#4e6479;\">&lsaquo;</button>"
+            "<div data-page-number-wrap='1' style='display:flex; gap:5px; align-items:center; justify-content:center; flex-wrap:nowrap;'></div>"
+            f"<button type='button' data-page-nav='next' data-a='next' style=\"border:1px solid #ced8e2; background:#fff; border-radius:6px; padding:2px 7px; font-size:11px; cursor:pointer; color:#4e6479;\">&rsaquo;</button>"
+            f"<button type='button' data-page-nav='last' data-a='last' style=\"border:1px solid #ced8e2; background:#fff; border-radius:6px; padding:2px 7px; font-size:11px; cursor:pointer; color:#4e6479;\">&raquo;</button>"
             "</div>"
         )
 
     popup_html = (
-        f"<div id='{popup_uid}' style=\"font-family:'Segoe UI'; border-radius:8px; overflow:hidden;\">"
+        f"<div id='{popup_uid}' data-pager='1' data-current-page='1' data-page-start='1' data-page-window='1' "
+        f"style=\"font-family:'Segoe UI'; border-radius:8px; overflow:hidden; width:{popup_largura_px}px; max-width:{popup_largura_px}px;\">"
         "<div style=\"background:#6c757d; color:white; padding:10px 15px; font-weight:600;\">Dados do Registro</div>"
         "<div style=\"padding:12px 15px; background:#f8f9fa;\">"
-        f"<div class='mesa-popup-pages'>{''.join(pages_html)}</div>"
+        f"<div class='mesa-popup-pages' style='width:100%;'>{''.join(pages_html)}</div>"
         f"{controls_html}"
         "</div></div>"
     )
-    return popup_html, 430
+    return popup_html, popup_largura_px
 
 
 def _normalizar_stops_cor(
@@ -1344,6 +1371,7 @@ def criar_mapa(
         secondary_area_unit='hectares'
     ).add_to(m)
     add_zoom_responsive_circle_markers(m)
+    add_popup_pagination_handlers(m)
 
     # Ajusta bounds robustos para evitar "salto" para longe por pontos geocodificados distantes.
     df_bounds = df_mapa

backend/app/core/map_layers.py

@@ -237,3 +237,254 @@ def add_zoom_responsive_circle_markers(
     """
     mapa.get_root().html.add_child(Element(script))
     setattr(mapa, "_mesa_zoom_radius_script", True)
+
+
+def add_popup_pagination_handlers(mapa: folium.Map) -> None:
+    if getattr(mapa, "_mesa_popup_pager_script", False):
+        return
+
+    map_name = mapa.get_name()
+    script = f"""
+    <script>
+      (function() {{
+        const MAP_NAME = "{map_name}";
+
+        function getCssGapPx(el, fallback) {{
+          if (!el || !window.getComputedStyle) return fallback;
+          const style = window.getComputedStyle(el);
+          const raw = style.columnGap || style.gap || '';
+          const value = parseFloat(raw);
+          return Number.isFinite(value) ? value : fallback;
+        }}
+
+        function buildNumberButton() {{
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.dataset.pageNumber = '1';
+          btn.style.border = '1px solid #ced8e2';
+          btn.style.background = '#fff';
+          btn.style.borderRadius = '6px';
+          btn.style.padding = '2px 7px';
+          btn.style.fontSize = '11px';
+          btn.style.cursor = 'pointer';
+          btn.style.color = '#4e6479';
+          btn.style.display = 'inline-flex';
+          btn.style.alignItems = 'center';
+          btn.style.justifyContent = 'center';
+          btn.textContent = '1';
+          return btn;
+        }}
+
+        function ensureNumberSlots(numberWrap, count) {{
+          if (!numberWrap) return;
+          let target = Number.isFinite(count) ? count : 1;
+          if (target < 1) target = 1;
+          while (numberWrap.children.length < target) {{
+            numberWrap.appendChild(buildNumberButton());
+          }}
+          while (numberWrap.children.length > target) {{
+            numberWrap.removeChild(numberWrap.lastElementChild);
+          }}
+        }}
+
+        function measureNumberButtonWidth(numberWrap) {{
+          if (!numberWrap) return 30;
+          const probe = buildNumberButton();
+          probe.style.visibility = 'hidden';
+          probe.style.position = 'absolute';
+          probe.style.pointerEvents = 'none';
+          numberWrap.appendChild(probe);
+          const width = probe.getBoundingClientRect().width || 30;
+          numberWrap.removeChild(probe);
+          return Math.max(24, width);
+        }}
+
+        function resolveWindowSize(root, total) {{
+          if (!(total > 0)) return 1;
+          const controls = root.querySelector('.mesa-popup-controls');
+          const numberWrap = root.querySelector('[data-page-number-wrap]');
+          if (!controls || !numberWrap) return Math.max(1, total);
+
+          const controlsWidth = controls.getBoundingClientRect().width || root.getBoundingClientRect().width || 0;
+          if (!(controlsWidth > 0)) return Math.max(1, total);
+
+          const controlsGap = getCssGapPx(controls, 5);
+          const numberGap = getCssGapPx(numberWrap, 5);
+          let navWidth = 0;
+          controls.querySelectorAll('[data-page-nav]').forEach(function(btn) {{
+            navWidth += btn.getBoundingClientRect().width || 28;
+          }});
+
+          const numberButtonWidth = measureNumberButtonWidth(numberWrap);
+          const navCount = controls.querySelectorAll('[data-page-nav]').length;
+          const estimatedGaps = Math.max(0, navCount + 2) * controlsGap;
+          let available = controlsWidth - navWidth - estimatedGaps;
+          if (!(available > 0)) {{
+            available = controlsWidth - navWidth;
+          }}
+
+          let fit = Math.floor((available + numberGap) / (numberButtonWidth + numberGap));
+          if (!Number.isFinite(fit) || fit < 1) fit = 1;
+          if (fit > total) fit = total;
+          ensureNumberSlots(numberWrap, fit);
+          return fit;
+        }}
+
+        function updatePager(root, targetPage) {{
+          if (!root) return;
+          const pages = root.querySelectorAll('.mesa-popup-page');
+          const total = pages.length;
+          if (!total) return;
+
+          let windowSize = resolveWindowSize(root, total);
+          if (!Number.isFinite(windowSize) || windowSize < 1) windowSize = 1;
+          if (windowSize > total) windowSize = total;
+          root.dataset.pageWindow = String(windowSize);
+
+          const currentRaw = parseInt(root.dataset.currentPage || '1', 10);
+          let current = Number.isFinite(currentRaw) && currentRaw > 0 ? currentRaw : 1;
+          let next = Number.isFinite(targetPage) ? targetPage : current;
+          if (next < 1) next = 1;
+          if (next > total) next = total;
+          current = next;
+
+          let start = parseInt(root.dataset.pageStart || '1', 10);
+          if (!Number.isFinite(start) || start < 1) start = 1;
+          if (total <= windowSize) {{
+            start = 1;
+          }} else {{
+            if (current < start) start = current;
+            if (current > start + windowSize - 1) start = current - windowSize + 1;
+            const maxStart = total - windowSize + 1;
+            if (start > maxStart) start = maxStart;
+            if (start < 1) start = 1;
+          }}
+
+          root.dataset.currentPage = String(current);
+          root.dataset.pageStart = String(start);
+
+          pages.forEach(function(pageEl, idx) {{
+            pageEl.style.display = idx + 1 === current ? 'block' : 'none';
+          }});
+
+          const numberWrap = root.querySelector('[data-page-number-wrap]');
+          const numberButtons = numberWrap ? numberWrap.querySelectorAll('[data-page-number]') : [];
+          numberButtons.forEach(function(buttonEl, idx) {{
+            const value = start + idx;
+            if (value <= total) {{
+              buttonEl.style.display = 'inline-flex';
+              buttonEl.dataset.pageValue = String(value);
+              buttonEl.textContent = String(value);
+              buttonEl.style.background = value === current ? '#eaf1f7' : '#fff';
+              buttonEl.style.borderColor = value === current ? '#9fb4c8' : '#ced8e2';
+              buttonEl.style.color = value === current ? '#2f4b66' : '#4e6479';
+            }} else {{
+              buttonEl.style.display = 'none';
+            }}
+          }});
+
+          const onFirst = current <= 1;
+          const onLast = current >= total;
+          const firstBtn = root.querySelector('[data-a="first"]');
+          const prevBtn = root.querySelector('[data-a="prev"]');
+          const nextBtn = root.querySelector('[data-a="next"]');
+          const lastBtn = root.querySelector('[data-a="last"]');
+
+          if (firstBtn) {{
+            firstBtn.disabled = onFirst;
+            firstBtn.style.opacity = onFirst ? '0.45' : '1';
+            firstBtn.style.cursor = onFirst ? 'not-allowed' : 'pointer';
+          }}
+          if (prevBtn) {{
+            prevBtn.disabled = onFirst;
+            prevBtn.style.opacity = onFirst ? '0.45' : '1';
+            prevBtn.style.cursor = onFirst ? 'not-allowed' : 'pointer';
+          }}
+          if (nextBtn) {{
+            nextBtn.disabled = onLast;
+            nextBtn.style.opacity = onLast ? '0.45' : '1';
+            nextBtn.style.cursor = onLast ? 'not-allowed' : 'pointer';
+          }}
+          if (lastBtn) {{
+            lastBtn.disabled = onLast;
+            lastBtn.style.opacity = onLast ? '0.45' : '1';
+            lastBtn.style.cursor = onLast ? 'not-allowed' : 'pointer';
+          }}
+        }}
+
+        function handleClick(event) {{
+          const target = event && event.target ? event.target : null;
+          if (!target || !target.closest) return;
+          const button = target.closest('[data-page-number], [data-page-nav]');
+          if (!button) return;
+
+          const root = button.closest('[data-pager]');
+          if (!root) return;
+
+          event.preventDefault();
+          event.stopPropagation();
+          if (button.disabled) return;
+
+          const action = button.dataset.a || button.dataset.pageValue || '';
+          const currentRaw = parseInt(root.dataset.currentPage || '1', 10);
+          const current = Number.isFinite(currentRaw) && currentRaw > 0 ? currentRaw : 1;
+          const total = root.querySelectorAll('.mesa-popup-page').length;
+          if (!total) return;
+
+          let nextPage = current;
+          if (action === 'first') nextPage = 1;
+          else if (action === 'prev') nextPage = current - 1;
+          else if (action === 'next') nextPage = current + 1;
+          else if (action === 'last') nextPage = total;
+          else {{
+            const parsed = parseInt(action, 10);
+            if (Number.isFinite(parsed)) nextPage = parsed;
+          }}
+
+          updatePager(root, nextPage);
+        }}
+
+        function bindWhenMapReady() {{
+          const map = window[MAP_NAME];
+          if (!map) {{
+            setTimeout(bindWhenMapReady, 50);
+            return;
+          }}
+          if (map.__mesaPopupPagerBound) return;
+          map.__mesaPopupPagerBound = true;
+
+          const mapContainer = typeof map.getContainer === 'function' ? map.getContainer() : null;
+          const doc = mapContainer && mapContainer.ownerDocument ? mapContainer.ownerDocument : document;
+          doc.addEventListener('click', handleClick, true);
+
+          map.on('popupopen', function(evt) {{
+            const popup = evt && evt.popup ? evt.popup : null;
+            const contentNode = popup && popup._contentNode ? popup._contentNode : null;
+            if (!contentNode || !contentNode.querySelector) return;
+            const root = contentNode.querySelector('[data-pager]');
+            if (!root) return;
+            const initialRaw = parseInt(root.dataset.currentPage || '1', 10);
+            const initialPage = Number.isFinite(initialRaw) && initialRaw > 0 ? initialRaw : 1;
+            updatePager(root, initialPage);
+          }});
+
+          let resizeTimer = null;
+          window.addEventListener('resize', function() {{
+            if (resizeTimer) window.clearTimeout(resizeTimer);
+            resizeTimer = window.setTimeout(function() {{
+              const pagers = doc.querySelectorAll('[data-pager]');
+              pagers.forEach(function(root) {{
+                const currentRaw = parseInt(root.dataset.currentPage || '1', 10);
+                const current = Number.isFinite(currentRaw) && currentRaw > 0 ? currentRaw : 1;
+                updatePager(root, current);
+              }});
+            }}, 70);
+          }});
+        }}
+
+        bindWhenMapReady();
+      }})();
+    </script>
+    """
+    mapa.get_root().html.add_child(Element(script))
+    setattr(mapa, "_mesa_popup_pager_script", True)

backend/app/core/visualizacao/app.py

@@ -23,7 +23,12 @@ import math
 
 from app.core.elaboracao.core import avaliar_imovel, _migrar_pacote_v1_para_v2, exportar_avaliacoes_excel
 from app.core.elaboracao.formatadores import formatar_avaliacao_html
-from app.core.map_layers import add_bairros_layer, add_indice_marker, add_zoom_responsive_circle_markers
+from app.core.map_layers import (
+    add_bairros_layer,
+    add_indice_marker,
+    add_popup_pagination_handlers,
+    add_zoom_responsive_circle_markers,
+)
 
 # ============================================================
 # CONSTANTES
@@ -692,12 +697,15 @@ def _aplicar_jitter_sobrepostos(df_mapa, lat_col, lon_col, lat_plot_col, lon_plo
     max_raio_metros = 22.0
     metros_por_grau_lat = 111_320.0
 
+    lat_plot_pos = int(df_plot.columns.get_loc(lat_plot_col))
+    lon_plot_pos = int(df_plot.columns.get_loc(lon_plot_col))
+
     for _, idx_labels in grupos.indices.items():
-        if len(idx_labels) <= 1:
+        posicoes = np.asarray(idx_labels, dtype=int)
+        if posicoes.size <= 1:
             continue
-        idx_list = list(idx_labels)
-        base_lat = float(df_plot.at[idx_list[0], lat_plot_col])
-        base_lon = float(df_plot.at[idx_list[0], lon_plot_col])
+        base_lat = float(df_plot.iat[int(posicoes[0]), lat_plot_pos])
+        base_lon = float(df_plot.iat[int(posicoes[0]), lon_plot_pos])
         if not np.isfinite(base_lat) or not np.isfinite(base_lon):
             continue
 
@@ -706,7 +714,7 @@ def _aplicar_jitter_sobrepostos(df_mapa, lat_col, lon_col, lat_plot_col, lon_plo
         cos_lat = max(abs(math.cos(math.radians(base_lat))), 1e-6)
         metros_por_grau_lon = metros_por_grau_lat * cos_lat
 
-        for pos, idx_label in enumerate(idx_list):
+        for pos, pos_idx in enumerate(posicoes):
             if pos == 0:
                 continue
 
@@ -723,13 +731,21 @@ def _aplicar_jitter_sobrepostos(df_mapa, lat_col, lon_col, lat_plot_col, lon_plo
             delta_lat = (raio_m * math.sin(angulo)) / metros_por_grau_lat
             delta_lon = (raio_m * math.cos(angulo)) / metros_por_grau_lon
 
-            df_plot.at[idx_label, lat_plot_col] = base_lat + delta_lat
-            df_plot.at[idx_label, lon_plot_col] = base_lon + delta_lon
+            df_plot.iat[int(pos_idx), lat_plot_pos] = base_lat + delta_lat
+            df_plot.iat[int(pos_idx), lon_plot_pos] = base_lon + delta_lon
 
     return df_plot
 
 
 def _montar_popup_registro_paginado(itens, popup_uid, max_itens_pagina=8):
+    def _limitar_texto(valor: str, limite: int) -> str:
+        txt = str(valor)
+        if limite <= 0 or len(txt) <= limite:
+            return txt
+        if limite <= 3:
+            return txt[:limite]
+        return txt[: limite - 3] + "..."
+
     if not itens:
         html = (
             "<div style=\"font-family:'Segoe UI'; border-radius:8px; overflow:hidden;\">"
@@ -739,66 +755,77 @@ def _montar_popup_registro_paginado(itens, popup_uid, max_itens_pagina=8):
         )
         return html, 360
 
-    paginas = [itens[i:i + max_itens_pagina] for i in range(0, len(itens), max_itens_pagina)]
-    pages_html = []
-    botoes_html = []
+    max_colunas_por_pagina = 2
+    max_chars_chave = 20
+    max_chars_valor = 20
+    char_px = 7.2
+    gap_cols_px = 12
+    popup_padding_horizontal_px = 30
+    coluna_largura_px = int(round((max_chars_chave + max_chars_valor) * char_px + 28))
+    itens_por_pagina = max_itens_pagina * max_colunas_por_pagina
+    paginas = [itens[i:i + itens_por_pagina] for i in range(0, len(itens), itens_por_pagina)]
+    itens_primeira_pagina = len(paginas[0]) if paginas else 0
+    colunas_visiveis = max(1, min(max_colunas_por_pagina, int(math.ceil(itens_primeira_pagina / max_itens_pagina)) if itens_primeira_pagina else 1))
+    popup_largura_px = popup_padding_horizontal_px + (coluna_largura_px * colunas_visiveis) + (gap_cols_px * (colunas_visiveis - 1))
 
+    pages_html = []
     for page_idx, page_items in enumerate(paginas):
-        trs = "".join([
-            "<tr style='border-bottom:1px solid #e9ecef;'>"
-            f"<td style='padding:4px 8px 4px 0; color:#6c757d; font-weight:500;'>{escape(str(c))}</td>"
-            f"<td style='padding:4px 0; text-align:right; color:#495057;'>{escape(str(v))}</td>"
-            "</tr>"
-            for c, v in page_items
-        ])
+        colunas = [page_items[i:i + max_itens_pagina] for i in range(0, len(page_items), max_itens_pagina)]
+        colunas_html = []
+        for col_itens in colunas:
+            trs_parts = []
+            for c, v in col_itens:
+                c_full = str(c)
+                v_full = str(v)
+                c_txt = escape(_limitar_texto(c_full, max_chars_chave))
+                v_txt = escape(_limitar_texto(v_full, max_chars_valor))
+                c_title = escape(c_full)
+                v_title = escape(v_full)
+                trs_parts.append(
+                    "<tr style='border-bottom:1px solid #e9ecef;'>"
+                    "<td style='padding:4px 8px 4px 0; color:#6c757d; font-weight:500; width:50%; max-width:50%; overflow:hidden; white-space:nowrap;'>"
+                    f"<span title='{c_title}'>{c_txt}</span>"
+                    "</td>"
+                    "<td style='padding:4px 0; text-align:right; color:#495057; width:50%; max-width:50%; overflow:hidden; white-space:nowrap;'>"
+                    f"<span title='{v_title}'>{v_txt}</span>"
+                    "</td>"
+                    "</tr>"
+                )
+            trs = "".join(trs_parts)
+            colunas_html.append(
+                f"<div style='flex:0 0 {coluna_largura_px}px; width:{coluna_largura_px}px; min-width:{coluna_largura_px}px; overflow:hidden;'>"
+                f"<table style='border-collapse:collapse; table-layout:fixed; font-size:12px; width:{coluna_largura_px}px;'>{trs}</table>"
+                "</div>"
+            )
         display = "block" if page_idx == 0 else "none"
         pages_html.append(
-            f"<div class='mesa-popup-page' data-page='{page_idx}' style='display:{display};'>"
-            f"<table style='border-collapse:collapse; font-size:12px; width:100%;'>{trs}</table>"
+            f"<div class='mesa-popup-page' data-page='{page_idx + 1}' style='display:{display};'>"
+            f"<div style='display:flex; gap:12px; align-items:flex-start; flex-wrap:nowrap;'>{''.join(colunas_html)}</div>"
             "</div>"
         )
-        botao_style = (
-            "border:1px solid #9fb4c8; background:#eaf1f7; border-radius:6px; "
-            "padding:2px 7px; font-size:11px; cursor:pointer; color:#2f4b66;"
-            if page_idx == 0
-            else
-            "border:1px solid #ced8e2; background:#fff; border-radius:6px; "
-            "padding:2px 7px; font-size:11px; cursor:pointer; color:#4e6479;"
-        )
-        onclick = (
-            f"var root=document.getElementById('{popup_uid}');"
-            "if(!root){return false;}"
-            "var pages=root.querySelectorAll('.mesa-popup-page');"
-            "for(var i=0;i<pages.length;i++){pages[i].style.display=(i==="
-            f"{page_idx}"
-            ")?'block':'none';}"
-            "var btns=root.querySelectorAll('[data-page-btn]');"
-            "for(var j=0;j<btns.length;j++){btns[j].style.background='#fff';btns[j].style.borderColor='#ced8e2';btns[j].style.color='#4e6479';}"
-            "this.style.background='#eaf1f7';this.style.borderColor='#9fb4c8';this.style.color='#2f4b66';"
-            "return false;"
-        )
-        botoes_html.append(
-            f"<button type='button' data-page-btn='1' style=\"{botao_style}\" onclick=\"{onclick}\">"
-            f"{page_idx + 1}</button>"
-        )
 
     controls_html = ""
     if len(paginas) > 1:
         controls_html = (
-            "<div class='mesa-popup-controls' style='display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center;'>"
-            f"<span style='font-size:11px; color:#5d7388; margin-right:2px;'>Páginas:</span>{''.join(botoes_html)}"
+            "<div class='mesa-popup-controls' style='display:flex; gap:5px; flex-wrap:nowrap; margin-top:8px; align-items:center; justify-content:center; white-space:nowrap; width:100%;'>"
+            f"<button type='button' data-page-nav='first' data-a='first' style=\"border:1px solid #ced8e2; background:#fff; border-radius:6px; padding:2px 7px; font-size:11px; cursor:pointer; color:#4e6479;\">&laquo;</button>"
+            f"<button type='button' data-page-nav='prev' data-a='prev' style=\"border:1px solid #ced8e2; background:#fff; border-radius:6px; padding:2px 7px; font-size:11px; cursor:pointer; color:#4e6479;\">&lsaquo;</button>"
+            "<div data-page-number-wrap='1' style='display:flex; gap:5px; align-items:center; justify-content:center; flex-wrap:nowrap;'></div>"
+            f"<button type='button' data-page-nav='next' data-a='next' style=\"border:1px solid #ced8e2; background:#fff; border-radius:6px; padding:2px 7px; font-size:11px; cursor:pointer; color:#4e6479;\">&rsaquo;</button>"
+            f"<button type='button' data-page-nav='last' data-a='last' style=\"border:1px solid #ced8e2; background:#fff; border-radius:6px; padding:2px 7px; font-size:11px; cursor:pointer; color:#4e6479;\">&raquo;</button>"
             "</div>"
         )
 
     html = (
-        f"<div id='{popup_uid}' style=\"font-family:'Segoe UI'; border-radius:8px; overflow:hidden;\">"
+        f"<div id='{popup_uid}' data-pager='1' data-current-page='1' data-page-start='1' data-page-window='1' "
+        f"style=\"font-family:'Segoe UI'; border-radius:8px; overflow:hidden; width:{popup_largura_px}px; max-width:{popup_largura_px}px;\">"
         "<div style=\"background:#6c757d; color:white; padding:10px 15px; font-weight:600;\">Dados do Registro</div>"
         "<div style=\"padding:12px 15px; background:#f8f9fa;\">"
-        f"<div class='mesa-popup-pages'>{''.join(pages_html)}</div>"
+        f"<div class='mesa-popup-pages' style='width:100%;'>{''.join(pages_html)}</div>"
         f"{controls_html}"
         "</div></div>"
     )
-    return html, 430
+    return html, popup_largura_px
 
 # ============================================================
 # FUNÇÃO: GERAR MAPA FOLIUM (com suporte a dimensionamento por variável)
@@ -1029,6 +1056,7 @@ def criar_mapa(df, lat_col="lat", lon_col="lon", cor_col=None, tamanho_col=None,
         secondary_area_unit='hectares'
     ).add_to(m)
     add_zoom_responsive_circle_markers(m)
+    add_popup_pagination_handlers(m)
 
     # Ajusta bounds robustos para evitar "salto" por pontos geocodificados distantes.
     df_bounds = df_mapa

frontend/src/App.jsx

@@ -22,6 +22,7 @@ export default function App() {
   const [showStartupIntro, setShowStartupIntro] = useState(true)
   const [sessionId, setSessionId] = useState('')
   const [bootError, setBootError] = useState('')
+  const [avaliacaoBetaQuickLoad, setAvaliacaoBetaQuickLoad] = useState(null)
 
   const [authLoading, setAuthLoading] = useState(true)
   const [authUser, setAuthUser] = useState(null)
@@ -241,6 +242,18 @@ export default function App() {
     setLogsOpen(false)
   }
 
+  function onUsarModeloEmAvaliacao(modelo) {
+    const modeloId = String(modelo?.id || '').trim()
+    if (!modeloId) return
+    setAvaliacaoBetaQuickLoad({
+      requestKey: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      modeloId,
+      nomeModelo: String(modelo?.nome_modelo || modelo?.arquivo || modeloId),
+    })
+    setActiveTab('Avaliação Beta')
+    setShowStartupIntro(false)
+  }
+
   return (
     <div className="app-shell">
       <header className="app-header app-header-logo-only">
@@ -453,7 +466,7 @@ export default function App() {
           ) : null}
 
           <div className="tab-pane" hidden={activeTab !== 'Pesquisa'}>
-            <PesquisaTab sessionId={sessionId} />
+            <PesquisaTab sessionId={sessionId} onUsarModeloEmAvaliacao={onUsarModeloEmAvaliacao} />
           </div>
 
           <div className="tab-pane" hidden={activeTab !== 'Elaboração/Edição'}>
@@ -469,7 +482,7 @@ export default function App() {
           </div>
 
           <div className="tab-pane" hidden={activeTab !== 'Avaliação Beta'}>
-            <AvaliacaoBetaTab sessionId={sessionId} />
+            <AvaliacaoBetaTab sessionId={sessionId} quickLoadRequest={avaliacaoBetaQuickLoad} />
           </div>
           </>
         )

frontend/src/components/AvaliacaoBetaTab.jsx

@@ -63,7 +63,7 @@ function formatarFonteRepositorio(fonte) {
   return 'Fonte: pasta local'
 }
 
-export default function AvaliacaoBetaTab({ sessionId }) {
+export default function AvaliacaoBetaTab({ sessionId, quickLoadRequest = null }) {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [status, setStatus] = useState('')
@@ -88,6 +88,7 @@ export default function AvaliacaoBetaTab({ sessionId }) {
   const [confirmarLimpezaAvaliacoes, setConfirmarLimpezaAvaliacoes] = useState(false)
 
   const uploadInputRef = useRef(null)
+  const quickLoadHandledRef = useRef('')
 
   const repoModeloOptions = useMemo(
     () => (repoModelos || []).map((item) => ({
@@ -206,14 +207,16 @@ export default function AvaliacaoBetaTab({ sessionId }) {
     })
   }
 
-  async function onCarregarModeloRepositorio() {
-    if (!sessionId || !repoModeloSelecionado) return
+  async function onCarregarModeloRepositorio(modeloIdOverride = '') {
+    const alvoModeloId = String(modeloIdOverride || repoModeloSelecionado || '').trim()
+    if (!sessionId || !alvoModeloId) return
     setModeloLoadSource('repo')
+    setRepoModeloSelecionado(alvoModeloId)
     await withBusy(async () => {
-      const uploadResp = await api.visualizacaoRepositorioCarregar(sessionId, repoModeloSelecionado)
+      const uploadResp = await api.visualizacaoRepositorioCarregar(sessionId, alvoModeloId)
       setStatus(uploadResp?.status || '')
       setBadgeHtml(uploadResp?.badge_html || '')
-      const modeloSelecionado = repoModeloOptions.find((item) => item.value === repoModeloSelecionado)
+      const modeloSelecionado = repoModeloOptions.find((item) => item.value === alvoModeloId)
       const nomeModelo = uploadResp?.nome_modelo || modeloSelecionado?.label || ''
       const exibirResp = await api.exibirVisualizacao(sessionId)
       aplicarRespostaExibicao(exibirResp, nomeModelo)
@@ -221,6 +224,17 @@ export default function AvaliacaoBetaTab({ sessionId }) {
     })
   }
 
+  useEffect(() => {
+    const requestKey = String(quickLoadRequest?.requestKey || '').trim()
+    const modeloId = String(quickLoadRequest?.modeloId || '').trim()
+    if (!sessionId || !requestKey || !modeloId) return
+    if (quickLoadHandledRef.current === requestKey) return
+    quickLoadHandledRef.current = requestKey
+    setModeloLoadSource('repo')
+    setRepoModeloSelecionado(modeloId)
+    void onCarregarModeloRepositorio(modeloId)
+  }, [quickLoadRequest, sessionId])
+
   function onUploadInputChange(event) {
     const input = event.target
     const file = input.files?.[0] ?? null

frontend/src/components/PesquisaTab.jsx

@@ -452,7 +452,7 @@ function ChipAutocompleteInput({
   )
 }
 
-export default function PesquisaTab({ sessionId }) {
+export default function PesquisaTab({ sessionId, onUsarModeloEmAvaliacao = null }) {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [pesquisaInicializada, setPesquisaInicializada] = useState(false)
@@ -490,6 +490,7 @@ export default function PesquisaTab({ sessionId }) {
   const [modeloAbertoPlotHistograma, setModeloAbertoPlotHistograma] = useState(null)
   const [modeloAbertoPlotCook, setModeloAbertoPlotCook] = useState(null)
   const [modeloAbertoPlotCorr, setModeloAbertoPlotCorr] = useState(null)
+  const sectionResultadosRef = useRef(null)
 
   const sugestoes = result.sugestoes || {}
   const opcoesTipoModelo = useMemo(
@@ -502,6 +503,31 @@ export default function PesquisaTab({ sessionId }) {
   const todosSelecionados = resultIds.length > 0 && resultIds.every((id) => selectedIds.includes(id))
   const algunsSelecionados = resultIds.some((id) => selectedIds.includes(id))
 
+  function scrollToElementTop(el, behavior = 'smooth', offsetPx = 0) {
+    if (!el || typeof window === 'undefined') return
+    const rect = el.getBoundingClientRect()
+    const targetTop = Math.max(0, window.scrollY + rect.top - offsetPx)
+    window.scrollTo({ top: targetTop, behavior })
+  }
+
+  function scrollParaAbasGeraisNoTopo() {
+    if (typeof document === 'undefined') return
+    const tabsEl = document.querySelector('.tabs')
+    if (tabsEl) {
+      scrollToElementTop(tabsEl, 'smooth', 0)
+      return
+    }
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  function scrollParaResultadosNoTopo() {
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        scrollToElementTop(sectionResultadosRef.current, 'smooth', 0)
+      })
+    })
+  }
+
   async function buscarModelos(nextFilters = filters) {
     setLoading(true)
     setError('')
@@ -598,6 +624,16 @@ export default function PesquisaTab({ sessionId }) {
     })
   }
 
+  function onUsarEmAvaliacao(modelo) {
+    if (!sessionId) {
+      setError('Sessao indisponivel no momento. Aguarde e tente novamente.')
+      return
+    }
+    if (typeof onUsarModeloEmAvaliacao === 'function') {
+      onUsarModeloEmAvaliacao(modelo)
+    }
+  }
+
   function preencherModeloAberto(resp) {
     setModeloAbertoDados(resp?.dados || null)
     setModeloAbertoEstatisticas(resp?.estatisticas || null)
@@ -633,6 +669,9 @@ export default function PesquisaTab({ sessionId }) {
         id: modelo.id,
         nome: modelo.nome_modelo || modelo.arquivo || modelo.id,
       })
+      window.requestAnimationFrame(() => {
+        scrollParaAbasGeraisNoTopo()
+      })
     } catch (err) {
       setModeloAbertoError(err.message || 'Falha ao abrir modelo.')
     } finally {
@@ -644,6 +683,7 @@ export default function PesquisaTab({ sessionId }) {
     setModeloAbertoMeta(null)
     setModeloAbertoError('')
     setModeloAbertoActiveTab('mapa')
+    scrollParaResultadosNoTopo()
   }
 
   async function onModeloAbertoMapChange(nextVar) {
@@ -938,11 +978,12 @@ export default function PesquisaTab({ sessionId }) {
         {error ? <div className="error-line inline-error">{error}</div> : null}
       </SectionBlock>
 
-      <SectionBlock
-        step="2"
-        title="Resultados"
-        subtitle="Modelos aceitos para os parametros do avaliando informado."
-      >
+      <div ref={sectionResultadosRef}>
+        <SectionBlock
+          step="2"
+          title="Resultados"
+          subtitle="Modelos aceitos para os parametros do avaliando informado."
+        >
         <div className="pesquisa-results-toolbar">
           <div className="pesquisa-summary-line">
             <strong>{formatCount(result.total_filtrado)}</strong>{' '}
@@ -969,21 +1010,21 @@ export default function PesquisaTab({ sessionId }) {
               return (
                 <article key={modelo.id} className={`pesquisa-card${selecionado ? ' is-selected' : ''}`}>
                   <div className="pesquisa-card-top">
-                    <div className="pesquisa-card-head">
-                      <h4>{modelo.nome_modelo || modelo.arquivo}</h4>
-                      <div className="pesquisa-card-controls">
-                        <label className="pesquisa-select-toggle pesquisa-select-toggle-compact">
-                          <input
-                            type="checkbox"
-                            checked={selecionado}
-                            onChange={() => onToggleSelecionado(modelo.id)}
-                          />
-                          Selecionar
-                        </label>
-                        <button type="button" className="btn-pesquisa-open" onClick={() => void onAbrirModelo(modelo)}>
-                          Abrir
-                        </button>
-                      </div>
+                    <h4 className="pesquisa-card-title">{modelo.nome_modelo || modelo.arquivo}</h4>
+                    <div className="pesquisa-card-actions">
+                      <button
+                        type="button"
+                        className={`btn-pesquisa-map-toggle${selecionado ? ' is-selected' : ''}`}
+                        onClick={() => onToggleSelecionado(modelo.id)}
+                      >
+                        {selecionado ? 'Desmarcar para mapa' : 'Marcar para mapa'}
+                      </button>
+                      <button type="button" className="btn-pesquisa-open" onClick={() => void onAbrirModelo(modelo)}>
+                        Abrir modelo
+                      </button>
+                      <button type="button" className="btn-pesquisa-eval" onClick={() => onUsarEmAvaliacao(modelo)}>
+                        Usar em avaliação
+                      </button>
                     </div>
                     <div className="pesquisa-card-body">
                       <div className="pesquisa-card-dados-list">
@@ -1005,7 +1046,8 @@ export default function PesquisaTab({ sessionId }) {
             })}
           </div>
         )}
-      </SectionBlock>
+        </SectionBlock>
+      </div>
 
       <SectionBlock step="3" title="Mapa" subtitle="Plote os modelos selecionados com cores distintas e legenda.">
         <div className="pesquisa-summary-line">

frontend/src/styles.css

@@ -1675,82 +1675,67 @@ button.pesquisa-coluna-remove:hover {
 .pesquisa-card-top {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
   min-width: 0;
   flex: 1 1 auto;
 }
 
-.pesquisa-card-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 14px;
-  min-width: 0;
-}
-
-.pesquisa-card-head h4 {
+.pesquisa-card-title {
   margin: 0;
   font-family: 'Sora', sans-serif;
   color: #2e4358;
-  font-size: 0.93rem;
+  font-size: 0.94rem;
   line-height: 1.32;
   overflow-wrap: anywhere;
-  flex: 1 1 auto;
-}
-
-.pesquisa-card-head p {
-  margin: 3px 0 0;
-  color: #5f758b;
-  font-size: 0.8rem;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
 }
 
-.pesquisa-card-controls {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
+.pesquisa-card-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
-  flex: 0 0 auto;
-  align-self: center;
+  min-width: 0;
 }
 
-.btn-pesquisa-open {
-  --btn-bg-start: #2ea94f;
-  --btn-bg-end: #238a40;
-  --btn-border: #1b7435;
-  --btn-shadow-soft: rgba(35, 138, 64, 0.22);
-  --btn-shadow-strong: rgba(35, 138, 64, 0.3);
-  min-width: 74px;
+.pesquisa-card-actions button {
+  width: 100%;
   min-height: 32px;
   padding: 6px 10px;
   font-size: 0.78rem;
   letter-spacing: 0.02em;
 }
 
-.pesquisa-select-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  border: 1px solid #d8e4ef;
-  border-radius: 9px;
-  background: #f5f9fd;
-  padding: 5px 8px;
-  width: fit-content;
-  max-width: 100%;
-  font-size: 0.8rem;
-  font-weight: 700;
-  color: #48627b;
+.btn-pesquisa-map-toggle {
+  --btn-bg-start: #edf4fb;
+  --btn-bg-end: #dfeaf5;
+  --btn-border: #b9ccdf;
+  --btn-shadow-soft: rgba(88, 116, 144, 0.12);
+  --btn-shadow-strong: rgba(88, 116, 144, 0.18);
+  color: #35506a;
 }
 
-.pesquisa-select-toggle-compact {
-  min-height: 32px;
-  padding: 4px 8px;
-  font-size: 0.78rem;
+.btn-pesquisa-map-toggle.is-selected {
+  --btn-bg-start: #f8bd74;
+  --btn-bg-end: #f1a047;
+  --btn-border: #e28a29;
+  --btn-shadow-soft: rgba(226, 138, 41, 0.18);
+  --btn-shadow-strong: rgba(226, 138, 41, 0.25);
+  color: #fff;
 }
 
-.pesquisa-select-toggle input {
-  margin: 0;
+.btn-pesquisa-open {
+  --btn-bg-start: #2ea94f;
+  --btn-bg-end: #238a40;
+  --btn-border: #1b7435;
+  --btn-shadow-soft: rgba(35, 138, 64, 0.22);
+  --btn-shadow-strong: rgba(35, 138, 64, 0.3);
+}
+
+.btn-pesquisa-eval {
+  --btn-bg-start: #4e95cf;
+  --btn-bg-end: #3d82be;
+  --btn-border: #2e6d9f;
+  --btn-shadow-soft: rgba(61, 130, 190, 0.2);
+  --btn-shadow-strong: rgba(61, 130, 190, 0.28);
 }
 
 .pesquisa-card-status-row .status-pill {
@@ -4546,14 +4531,8 @@ button.btn-download-subtle {
     scrollbar-width: thin;
   }
 
-  .pesquisa-card-head {
-    flex-direction: column;
-  }
-
-  .pesquisa-card-controls {
-    width: 100%;
-    justify-content: flex-start;
-    align-self: flex-start;
+  .pesquisa-card-actions {
+    grid-template-columns: 1fr;
   }
 
   .pesquisa-results-toolbar {