criação de nova aba de avaliação e alterações gerais

backend/app/api/repositorio.py

@@ -2,7 +2,7 @@ from __future__ import annotations
 
 from typing import Any
 
-from fastapi import APIRouter, File, HTTPException, Request, UploadFile
+from fastapi import APIRouter, File, Form, HTTPException, Request, UploadFile
 from pydantic import BaseModel, Field
 
 from app.services import auth_service, repositorio_service
@@ -32,7 +32,11 @@ def listar_modelos(request: Request) -> dict[str, Any]:
 
 
 @router.post("/upload")
-async def upload_modelos(request: Request, files: list[UploadFile] = File(...)) -> dict[str, Any]:
+async def upload_modelos(
+    request: Request,
+    files: list[UploadFile] = File(...),
+    confirmar_substituicao: bool = Form(False),
+) -> dict[str, Any]:
     user = auth_service.require_admin(request)
 
     arquivos: list[tuple[str, bytes]] = []
@@ -48,7 +52,11 @@ async def upload_modelos(request: Request, files: list[UploadFile] = File(...))
     if not arquivos:
         raise HTTPException(status_code=400, detail="Nenhum arquivo .dai valido foi enviado")
 
-    resposta = repositorio_service.upload_modelos(arquivos, actor=user.get("usuario"))
+    resposta = repositorio_service.upload_modelos(
+        arquivos,
+        actor=user.get("usuario"),
+        confirmar_substituicao=confirmar_substituicao,
+    )
     log_event(
         "repositorio",
         "upload_modelos",
@@ -57,6 +65,8 @@ async def upload_modelos(request: Request, files: list[UploadFile] = File(...))
         request=request,
         details={
             "arquivos": [nome for nome, _ in arquivos],
+            "confirmar_substituicao": bool(confirmar_substituicao),
+            "substituidos": resposta.get("resultado_upload", {}).get("substituidos", []),
             "total_modelos": resposta.get("total_modelos"),
         },
     )

backend/app/core/elaboracao/charts.py

@@ -1208,12 +1208,18 @@ def criar_mapa(
     if not np.isfinite(lon_min) or not np.isfinite(lon_max):
         lon_min, lon_max = float(df_mapa[lon_real].min()), float(df_mapa[lon_real].max())
 
-    # Fallback para mapa muito concentrado (mesma coordenada / quase mesma área).
-    if np.isclose(lat_min, lat_max) and np.isclose(lon_min, lon_max):
-        m.location = [float(lat_min), float(lon_min)]
-    else:
-        bounds = [[lat_min, lon_min], [lat_max, lon_max]]
-        m.fit_bounds(bounds, padding=(20, 20), max_zoom=17)
+    # Ajusta bounds para aproximar o máximo possível sem colar os pontos nas bordas.
+    if np.isclose(lat_min, lat_max):
+        lat_delta = 0.0008
+        lat_min = float(lat_min) - lat_delta
+        lat_max = float(lat_max) + lat_delta
+    if np.isclose(lon_min, lon_max):
+        lon_delta = 0.0008
+        lon_min = float(lon_min) - lon_delta
+        lon_max = float(lon_max) + lon_delta
+
+    bounds = [[float(lat_min), float(lon_min)], [float(lat_max), float(lon_max)]]
+    m.fit_bounds(bounds, padding=(48, 48), max_zoom=18)
 
     if houve_amostragem:
         aviso_html = (

backend/app/core/visualizacao/app.py

@@ -932,11 +932,17 @@ def criar_mapa(df, lat_col="lat", lon_col="lon", cor_col=None, tamanho_col=None,
     if not np.isfinite(lon_min) or not np.isfinite(lon_max):
         lon_min, lon_max = float(df_mapa[lon_key].min()), float(df_mapa[lon_key].max())
 
-    if np.isclose(lat_min, lat_max) and np.isclose(lon_min, lon_max):
-        m.location = [float(lat_min), float(lon_min)]
-    else:
-        bounds = [[lat_min, lon_min], [lat_max, lon_max]]
-        m.fit_bounds(bounds, padding=(20, 20), max_zoom=17)
+    if np.isclose(lat_min, lat_max):
+        lat_delta = 0.0008
+        lat_min = float(lat_min) - lat_delta
+        lat_max = float(lat_max) + lat_delta
+    if np.isclose(lon_min, lon_max):
+        lon_delta = 0.0008
+        lon_min = float(lon_min) - lon_delta
+        lon_max = float(lon_max) + lon_delta
+
+    bounds = [[float(lat_min), float(lon_min)], [float(lat_max), float(lon_max)]]
+    m.fit_bounds(bounds, padding=(48, 48), max_zoom=18)
 
     # Evita o wrapper de notebook (_repr_html_), que pode falhar dentro de iframe srcDoc.
     return m.get_root().render()

backend/app/services/model_repository.py

@@ -307,7 +307,11 @@ def _normalizar_nome_arquivo(nome_arquivo: str) -> str:
     return safe
 
 
-def upsert_repository_models(arquivos: list[tuple[str, bytes]], actor: str | None = None) -> dict[str, Any]:
+def upsert_repository_models(
+    arquivos: list[tuple[str, bytes]],
+    actor: str | None = None,
+    confirmar_substituicao: bool = False,
+) -> dict[str, Any]:
     if not arquivos:
         raise HTTPException(status_code=400, detail="Nenhum arquivo foi informado")
 
@@ -328,6 +332,15 @@ def upsert_repository_models(arquivos: list[tuple[str, bytes]], actor: str | Non
     existentes = {item.name for item in resolved.modelos_dir.glob("*.dai")}
     substituidos = sorted([nome for nome in payload if nome in existentes])
     adicionados = sorted([nome for nome in payload if nome not in existentes])
+    if substituidos and not confirmar_substituicao:
+        raise HTTPException(
+            status_code=409,
+            detail={
+                "code": "repositorio_modelo_duplicado",
+                "message": "Ja existe modelo com o mesmo nome no repositorio. Confirme para substituir.",
+                "substituidos": substituidos,
+            },
+        )
 
     if resolved.provider == "local":
         resolved.modelos_dir.mkdir(parents=True, exist_ok=True)
@@ -375,6 +388,7 @@ def upsert_repository_models(arquivos: list[tuple[str, bytes]], actor: str | Non
         "arquivos": sorted(payload.keys()),
         "adicionados": adicionados,
         "substituidos": substituidos,
+        "confirmar_substituicao": bool(confirmar_substituicao),
         "fonte": resolved.as_payload(),
     }
 

backend/app/services/pesquisa_service.py

@@ -486,7 +486,19 @@ def gerar_mapa_modelos(modelos_ids: list[str], limite_pontos_por_modelo: int = 4
     folium.LayerControl(collapsed=False).add_to(mapa)
     add_zoom_responsive_circle_markers(mapa)
     if bounds:
-        mapa.fit_bounds(bounds, padding=(20, 20))
+        lat_values = [float(coord[0]) for coord in bounds]
+        lon_values = [float(coord[1]) for coord in bounds]
+        lat_min, lat_max = min(lat_values), max(lat_values)
+        lon_min, lon_max = min(lon_values), max(lon_values)
+        if math.isclose(lat_min, lat_max):
+            lat_delta = 0.0008
+            lat_min -= lat_delta
+            lat_max += lat_delta
+        if math.isclose(lon_min, lon_max):
+            lon_delta = 0.0008
+            lon_min -= lon_delta
+            lon_max += lon_delta
+        mapa.fit_bounds([[lat_min, lon_min], [lat_max, lon_max]], padding=(48, 48), max_zoom=18)
 
     return sanitize_value(
         {

backend/app/services/repositorio_service.py

@@ -98,8 +98,16 @@ def listar_modelos() -> dict[str, Any]:
     )
 
 
-def upload_modelos(arquivos: list[tuple[str, bytes]], actor: str | None = None) -> dict[str, Any]:
-    resultado = model_repository.upsert_repository_models(arquivos, actor=actor)
+def upload_modelos(
+    arquivos: list[tuple[str, bytes]],
+    actor: str | None = None,
+    confirmar_substituicao: bool = False,
+) -> dict[str, Any]:
+    resultado = model_repository.upsert_repository_models(
+        arquivos,
+        actor=actor,
+        confirmar_substituicao=confirmar_substituicao,
+    )
     contexto = listar_modelos()
     return sanitize_value(
         {

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { api, getAuthToken, setAuthToken } from './api'
+import AvaliacaoBetaTab from './components/AvaliacaoBetaTab'
 import ElaboracaoTab from './components/ElaboracaoTab'
 import InicioTab from './components/InicioTab'
 import PesquisaTab from './components/PesquisaTab'
@@ -9,15 +10,16 @@ import VisualizacaoTab from './components/VisualizacaoTab'
 const LOGS_PAGE_SIZE = 30
 
 const TABS = [
-  { key: 'Início', label: 'Início', hint: 'Visão geral rápida do aplicativo' },
   { key: 'Pesquisa', label: 'Pesquisa', hint: 'Busca inicial de modelos .dai' },
   { key: 'Elaboração/Edição', label: 'Elaboração/Edição', hint: 'Fluxo completo de modelagem' },
   { key: 'Visualização/Avaliação', label: 'Visualização/Avaliação', hint: 'Leitura e avaliação de modelos .dai' },
   { key: 'Repositório', label: 'Repositório', hint: 'Gestão e consulta dos modelos .dai' },
+  { key: 'Avaliação Beta', label: 'Avaliação Beta', hint: 'Comparação por cards entre modelos e cenários' },
 ]
 
 export default function App() {
   const [activeTab, setActiveTab] = useState(TABS[0].key)
+  const [showStartupIntro, setShowStartupIntro] = useState(true)
   const [sessionId, setSessionId] = useState('')
   const [bootError, setBootError] = useState('')
 
@@ -60,6 +62,7 @@ export default function App() {
     setLogsError('')
     setLogsPage(1)
     setActiveTab(TABS[0].key)
+    setShowStartupIntro(true)
     setAuthError(message)
   }
 
@@ -428,7 +431,10 @@ export default function App() {
                 <button
                   key={tab.key}
                   className={active ? 'tab-pill active' : 'tab-pill'}
-                  onClick={() => setActiveTab(tab.key)}
+                  onClick={() => {
+                    setActiveTab(tab.key)
+                    setShowStartupIntro(false)
+                  }}
                   type="button"
                 >
                   <strong>{tab.label}</strong>
@@ -440,12 +446,14 @@ export default function App() {
 
           {bootError ? <div className="error-line">Falha ao criar sessão: {bootError}</div> : null}
 
-          <div className="tab-pane" hidden={activeTab !== 'Início'}>
-            <InicioTab />
-          </div>
+          {showStartupIntro ? (
+            <div className="tab-pane">
+              <InicioTab />
+            </div>
+          ) : null}
 
           <div className="tab-pane" hidden={activeTab !== 'Pesquisa'}>
-            <PesquisaTab />
+            <PesquisaTab sessionId={sessionId} />
           </div>
 
           <div className="tab-pane" hidden={activeTab !== 'Elaboração/Edição'}>
@@ -457,7 +465,11 @@ export default function App() {
           </div>
 
           <div className="tab-pane" hidden={activeTab !== 'Repositório'}>
-            <RepositorioTab authUser={authUser} />
+            <RepositorioTab authUser={authUser} sessionId={sessionId} />
+          </div>
+
+          <div className="tab-pane" hidden={activeTab !== 'Avaliação Beta'}>
+            <AvaliacaoBetaTab sessionId={sessionId} />
           </div>
           </>
         )

frontend/src/api.js

@@ -42,13 +42,18 @@ async function handleResponse(response, path = '') {
     } catch {
       detail = response.statusText || detail
     }
+    const detailMessage = typeof detail === 'string'
+      ? detail
+      : String(detail?.message || response.statusText || 'Erro inesperado')
+
     if (response.status === 401 && path !== '/api/auth/login') {
       setAuthToken('')
-      emitAuthRequired(detail)
+      emitAuthRequired(detailMessage)
     }
-    const error = new Error(detail)
+    const error = new Error(detailMessage)
     error.status = response.status
     error.path = path
+    error.detail = detail
     throw error
   }
   return response
@@ -265,11 +270,12 @@ export const api = {
   clearVisualizacao: (sessionId) => postJson('/api/visualizacao/clear', { session_id: sessionId }),
 
   repositorioListar: () => getJson('/api/repositorio/modelos'),
-  repositorioUpload(files = []) {
+  repositorioUpload(files = [], { confirmarSubstituicao = false } = {}) {
     const form = new FormData()
     files.forEach((file) => {
       form.append('files', file)
     })
+    form.append('confirmar_substituicao', confirmarSubstituicao ? 'true' : 'false')
     return postForm('/api/repositorio/upload', form)
   },
   repositorioDelete: (modelosIds = []) => postJson('/api/repositorio/delete', { modelos_ids: modelosIds }),

frontend/src/components/AvaliacaoBetaTab.jsx

@@ -0,0 +1,627 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { api, downloadBlob } from '../api'
+import LoadingOverlay from './LoadingOverlay'
+import SinglePillAutocomplete from './SinglePillAutocomplete'
+
+function formatarNumero(valor, casas = 2) {
+  const numero = Number(valor)
+  if (!Number.isFinite(numero)) return '-'
+  return numero.toLocaleString('pt-BR', {
+    minimumFractionDigits: casas,
+    maximumFractionDigits: casas,
+  })
+}
+
+function formatarMoeda(valor) {
+  const numero = Number(valor)
+  if (!Number.isFinite(numero)) return '-'
+  return numero.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
+}
+
+function formatarDataHoraIso(iso) {
+  if (!iso) return '-'
+  const data = new Date(String(iso))
+  if (Number.isNaN(data.getTime())) return '-'
+  return data.toLocaleString('pt-BR')
+}
+
+function classificarExtrapolacao(info) {
+  const status = String(info?.status || 'ok')
+  const percentual = Number(info?.percentual || 0)
+  if (status === 'ok') return 'ok'
+  if (status === 'warning') return `⚠ ${formatarNumero(percentual, 1)}%`
+  if (status === 'grave') return `✖ ${formatarNumero(percentual, 1)}%`
+  if (status === 'dicotomica' || status === 'codigo_alocado' || status === 'percentual') return '—'
+  return status
+}
+
+function corGrau(valor) {
+  const texto = String(valor || '').toLowerCase()
+  if (texto.includes('grau iii')) return '#1f7a40'
+  if (texto.includes('grau ii')) return '#2d8dbf'
+  if (texto.includes('grau i')) return '#c97400'
+  if (texto.includes('sem enquadramento')) return '#b22f40'
+  return '#48627a'
+}
+
+function escaparCsv(valor) {
+  const texto = String(valor ?? '')
+  if (!/[;"\n\r]/.test(texto)) return texto
+  return `"${texto.replaceAll('"', '""')}"`
+}
+
+function formatarFonteRepositorio(fonte) {
+  if (!fonte || typeof fonte !== 'object') return ''
+  const provider = String(fonte.provider || '').toLowerCase()
+  if (provider === 'hf_dataset') {
+    const repo = String(fonte.repo_id || '').trim()
+    const revision = String(fonte.revision || '').trim()
+    const degradado = Boolean(fonte.degraded)
+    const sufixo = degradado ? ' (modo contingência)' : ''
+    return `Fonte: HF Dataset${repo ? ` (${repo})` : ''}${revision ? ` | revisão ${revision.slice(0, 8)}` : ''}${sufixo}`
+  }
+  return 'Fonte: pasta local'
+}
+
+export default function AvaliacaoBetaTab({ sessionId }) {
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [status, setStatus] = useState('')
+  const [badgeHtml, setBadgeHtml] = useState('')
+
+  const [uploadedFile, setUploadedFile] = useState(null)
+  const [uploadDragOver, setUploadDragOver] = useState(false)
+  const [modeloLoadSource, setModeloLoadSource] = useState('')
+  const [repoModelos, setRepoModelos] = useState([])
+  const [repoModeloSelecionado, setRepoModeloSelecionado] = useState('')
+  const [repoModelosLoading, setRepoModelosLoading] = useState(false)
+  const [repoFonteModelos, setRepoFonteModelos] = useState('')
+
+  const [modeloAtualNome, setModeloAtualNome] = useState('')
+  const [camposAvaliacao, setCamposAvaliacao] = useState([])
+  const [equacaoSab, setEquacaoSab] = useState('')
+  const valoresAvaliacaoRef = useRef({})
+  const [avaliacaoFormVersion, setAvaliacaoFormVersion] = useState(0)
+
+  const [avaliacoesCards, setAvaliacoesCards] = useState([])
+  const [baseCardId, setBaseCardId] = useState('')
+  const [confirmarLimpezaAvaliacoes, setConfirmarLimpezaAvaliacoes] = useState(false)
+
+  const uploadInputRef = useRef(null)
+
+  const repoModeloOptions = useMemo(
+    () => (repoModelos || []).map((item) => ({
+      value: String(item?.id || ''),
+      label: String(item?.nome_modelo || item?.arquivo || item?.id || ''),
+      secondary: String(item?.arquivo || ''),
+    })).filter((item) => item.value && item.label),
+    [repoModelos],
+  )
+
+  const baseCard = useMemo(
+    () => avaliacoesCards.find((item) => item.id === baseCardId) || null,
+    [avaliacoesCards, baseCardId],
+  )
+
+  useEffect(() => {
+    let ativo = true
+    if (!sessionId) return () => {
+      ativo = false
+    }
+
+    setRepoModelosLoading(true)
+    api.visualizacaoRepositorioModelos()
+      .then((resp) => {
+        if (!ativo) return
+        const modelos = Array.isArray(resp?.modelos) ? resp.modelos : []
+        setRepoModelos(modelos)
+        setRepoFonteModelos(formatarFonteRepositorio(resp?.fonte || null))
+      })
+      .catch(() => {
+        if (!ativo) return
+        setRepoModelos([])
+        setRepoFonteModelos('')
+      })
+      .finally(() => {
+        if (!ativo) return
+        setRepoModelosLoading(false)
+      })
+
+    return () => {
+      ativo = false
+    }
+  }, [sessionId])
+
+  useEffect(() => {
+    if (!avaliacoesCards.length) {
+      if (baseCardId) setBaseCardId('')
+      return
+    }
+    if (!baseCardId || !avaliacoesCards.some((item) => item.id === baseCardId)) {
+      setBaseCardId(avaliacoesCards[0].id)
+    }
+  }, [avaliacoesCards, baseCardId])
+
+  function resetCamposAvaliacao(campos = camposAvaliacao) {
+    const limpo = {}
+    ;(campos || []).forEach((campo) => {
+      limpo[campo.coluna] = ''
+    })
+    valoresAvaliacaoRef.current = limpo
+    setAvaliacaoFormVersion((prev) => prev + 1)
+  }
+
+  function aplicarRespostaExibicao(resp, nomeModelo) {
+    const campos = resp?.campos_avaliacao || []
+    setCamposAvaliacao(campos)
+    resetCamposAvaliacao(campos)
+    setEquacaoSab(String(resp?.equacoes?.excel_sab || ''))
+    setModeloAtualNome(String(nomeModelo || '').trim())
+  }
+
+  async function withBusy(fn) {
+    setLoading(true)
+    setError('')
+    try {
+      await fn()
+    } catch (err) {
+      setError(err?.message || 'Falha ao executar operação.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function carregarModelosRepositorio() {
+    setRepoModelosLoading(true)
+    try {
+      const resp = await api.visualizacaoRepositorioModelos()
+      const modelos = Array.isArray(resp?.modelos) ? resp.modelos : []
+      setRepoModelos(modelos)
+      setRepoFonteModelos(formatarFonteRepositorio(resp?.fonte || null))
+      setRepoModeloSelecionado((prev) => {
+        if (prev && modelos.some((item) => String(item.id) === String(prev))) return prev
+        return ''
+      })
+    } catch (err) {
+      setError(err?.message || 'Falha ao carregar modelos do repositório.')
+      setRepoModelos([])
+      setRepoModeloSelecionado('')
+      setRepoFonteModelos('')
+    } finally {
+      setRepoModelosLoading(false)
+    }
+  }
+
+  async function onUploadModel(arquivo = null) {
+    const arquivoUpload = arquivo || uploadedFile
+    if (!sessionId || !arquivoUpload) return
+    setModeloLoadSource('upload')
+    await withBusy(async () => {
+      const uploadResp = await api.uploadVisualizacaoFile(sessionId, arquivoUpload)
+      setStatus(uploadResp?.status || '')
+      setBadgeHtml(uploadResp?.badge_html || '')
+      const nomeModelo = uploadResp?.nome_modelo || arquivoUpload.name || ''
+      const exibirResp = await api.exibirVisualizacao(sessionId)
+      aplicarRespostaExibicao(exibirResp, nomeModelo)
+    })
+  }
+
+  async function onCarregarModeloRepositorio() {
+    if (!sessionId || !repoModeloSelecionado) return
+    setModeloLoadSource('repo')
+    await withBusy(async () => {
+      const uploadResp = await api.visualizacaoRepositorioCarregar(sessionId, repoModeloSelecionado)
+      setStatus(uploadResp?.status || '')
+      setBadgeHtml(uploadResp?.badge_html || '')
+      const modeloSelecionado = repoModeloOptions.find((item) => item.value === repoModeloSelecionado)
+      const nomeModelo = uploadResp?.nome_modelo || modeloSelecionado?.label || ''
+      const exibirResp = await api.exibirVisualizacao(sessionId)
+      aplicarRespostaExibicao(exibirResp, nomeModelo)
+      setUploadedFile(null)
+    })
+  }
+
+  function onUploadInputChange(event) {
+    const input = event.target
+    const file = input.files?.[0] ?? null
+    setModeloLoadSource('upload')
+    setUploadedFile(file)
+    input.value = ''
+    if (!file || loading) return
+    void onUploadModel(file)
+  }
+
+  function onUploadDropZoneDragOver(event) {
+    event.preventDefault()
+    event.dataTransfer.dropEffect = 'copy'
+    setUploadDragOver(true)
+  }
+
+  function onUploadDropZoneDragLeave(event) {
+    event.preventDefault()
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setUploadDragOver(false)
+    }
+  }
+
+  function onUploadDropZoneDrop(event) {
+    event.preventDefault()
+    setUploadDragOver(false)
+    const file = event.dataTransfer?.files?.[0]
+    if (!file || loading) return
+    setModeloLoadSource('upload')
+    setUploadedFile(file)
+    void onUploadModel(file)
+  }
+
+  async function onIncluirAvaliacao() {
+    if (!sessionId || !camposAvaliacao.length) return
+    await withBusy(async () => {
+      const resp = await api.evaluationCalculateViz(sessionId, valoresAvaliacaoRef.current, null)
+      const lista = Array.isArray(resp?.avaliacoes) ? resp.avaliacoes : []
+      const ultima = lista.length ? lista[lista.length - 1] : null
+      if (!ultima || typeof ultima !== 'object') {
+        throw new Error('Não foi possível obter o resultado da avaliação.')
+      }
+      const card = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+        modelo: modeloAtualNome || 'Modelo sem nome',
+        createdAt: new Date().toISOString(),
+        avaliacao: ultima,
+      }
+      setAvaliacoesCards((prev) => [...prev, card])
+      setBaseCardId((prev) => prev || card.id)
+      setConfirmarLimpezaAvaliacoes(false)
+    })
+  }
+
+  function onResetCamposAvaliacao() {
+    resetCamposAvaliacao()
+  }
+
+  function onExcluirCard(cardId) {
+    setAvaliacoesCards((prev) => prev.filter((item) => item.id !== cardId))
+  }
+
+  function onLimparAvaliacoes() {
+    setAvaliacoesCards([])
+    setBaseCardId('')
+    setConfirmarLimpezaAvaliacoes(false)
+  }
+
+  function calcularComparacaoBase(avaliacao) {
+    if (!baseCard || !baseCard.avaliacao) return '—'
+    const baseEstimado = Number(baseCard.avaliacao.estimado)
+    const atual = Number(avaliacao?.estimado)
+    if (!Number.isFinite(baseEstimado) || baseEstimado === 0 || !Number.isFinite(atual)) return '—'
+    const diff = ((atual / baseEstimado) - 1) * 100
+    const sinal = diff >= 0 ? '+' : '−'
+    return `${sinal}${formatarNumero(Math.abs(diff), 1)}%`
+  }
+
+  function onExportAvaliacoes() {
+    if (!avaliacoesCards.length) return
+    const variaveis = Array.from(
+      new Set(
+        avaliacoesCards.flatMap((item) => Object.keys(item?.avaliacao?.valores_x || {})),
+      ),
+    )
+
+    const cabecalho = [
+      'Avaliacao',
+      'Modelo',
+      'DataHora',
+      'Estimado',
+      'EstimadoVsBase',
+      'CA-15%',
+      'CA+15%',
+      'IC80Inf',
+      'IC80Sup',
+      'PercInf',
+      'PercSup',
+      'Amplitude',
+      'Precisao',
+      'Fundamentacao',
+      'QtdExtrapolacoes',
+      ...variaveis.map((item) => `X_${item}`),
+    ]
+    const linhas = [cabecalho.join(';')]
+    avaliacoesCards.forEach((item, idx) => {
+      const aval = item?.avaliacao || {}
+      const baseTexto = item.id === baseCardId ? 'Base' : calcularComparacaoBase(aval)
+      const camposFixos = [
+        String(idx + 1),
+        String(item.modelo || ''),
+        formatarDataHoraIso(item.createdAt),
+        formatarNumero(aval.estimado, 2),
+        baseTexto,
+        formatarNumero(aval.ca_inf, 2),
+        formatarNumero(aval.ca_sup, 2),
+        formatarNumero(aval.ic_inf, 2),
+        formatarNumero(aval.ic_sup, 2),
+        formatarNumero(aval.perc_inf, 2),
+        formatarNumero(aval.perc_sup, 2),
+        formatarNumero(aval.amplitude, 2),
+        String(aval.precisao || ''),
+        String(aval.fundamentacao || ''),
+        String(aval.qtd_extrapolacoes ?? ''),
+      ]
+      const camposVars = variaveis.map((variavel) => {
+        const valor = aval?.valores_x?.[variavel]
+        return Number.isFinite(Number(valor)) ? formatarNumero(valor, 2) : String(valor ?? '')
+      })
+      linhas.push([...camposFixos, ...camposVars].map(escaparCsv).join(';'))
+    })
+
+    const csv = `\uFEFF${linhas.join('\n')}`
+    downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8;' }), 'avaliacoes_beta.csv')
+  }
+
+  const modeloPronto = Boolean(camposAvaliacao.length)
+
+  return (
+    <div className="tab-content">
+      <div className="avaliacao-beta-flow">
+        <div className="avaliacao-beta-model-block">
+          <h3 className="avaliacao-beta-title">Selecionar Modelo para Avaliação</h3>
+        {!modeloLoadSource ? (
+          <div className="model-source-choice-grid">
+            <button
+              type="button"
+              className="model-source-choice-btn model-source-choice-btn-primary"
+              onClick={() => setModeloLoadSource('repo')}
+              disabled={loading}
+            >
+              Carregar modelo do repositório
+            </button>
+            <button
+              type="button"
+              className="model-source-choice-btn model-source-choice-btn-secondary"
+              onClick={() => setModeloLoadSource('upload')}
+              disabled={loading}
+            >
+              Fazer upload de modelo
+            </button>
+          </div>
+        ) : (
+          <div className="model-source-flow">
+            <div className="model-source-flow-head">
+              <button
+                type="button"
+                className="model-source-back-btn"
+                onClick={() => setModeloLoadSource('')}
+                disabled={loading}
+              >
+                Voltar
+              </button>
+            </div>
+
+            {modeloLoadSource === 'repo' ? (
+              <div className="row upload-repo-row">
+                <label className="upload-repo-field">
+                  Modelo do repositório
+                  <SinglePillAutocomplete
+                    value={repoModeloSelecionado}
+                    onChange={setRepoModeloSelecionado}
+                    options={repoModeloOptions}
+                    placeholder={repoModelosLoading ? 'Carregando lista...' : repoModeloOptions.length > 0 ? 'Digite para buscar modelo' : 'Nenhum modelo disponível'}
+                    emptyMessage={repoModeloOptions.length > 0 ? 'Nenhum modelo encontrado.' : 'Nenhum modelo disponível.'}
+                    loading={repoModelosLoading}
+                    disabled={loading || repoModelosLoading || repoModeloOptions.length === 0}
+                  />
+                </label>
+                <div className="row compact upload-repo-actions">
+                  <button type="button" onClick={onCarregarModeloRepositorio} disabled={loading || repoModelosLoading || !repoModeloSelecionado}>
+                    Carregar do repositório
+                  </button>
+                  <button type="button" onClick={() => void carregarModelosRepositorio()} disabled={loading || repoModelosLoading}>
+                    Atualizar lista
+                  </button>
+                </div>
+                {repoFonteModelos ? <div className="section1-empty-hint">{repoFonteModelos}</div> : null}
+              </div>
+            ) : null}
+
+            {modeloLoadSource === 'upload' ? (
+              <div
+                className={`upload-dropzone${uploadDragOver ? ' is-dragover' : ''}`}
+                onDragOver={onUploadDropZoneDragOver}
+                onDragEnter={onUploadDropZoneDragOver}
+                onDragLeave={onUploadDropZoneDragLeave}
+                onDrop={onUploadDropZoneDrop}
+              >
+                <input
+                  ref={uploadInputRef}
+                  type="file"
+                  className="upload-hidden-input"
+                  accept=".dai"
+                  onChange={onUploadInputChange}
+                />
+                <div className="row upload-dropzone-main">
+                  <button
+                    type="button"
+                    className="btn-upload-select"
+                    onClick={() => uploadInputRef.current?.click()}
+                    disabled={loading}
+                  >
+                    Selecionar arquivo
+                  </button>
+                </div>
+                <div className="upload-dropzone-hint">Ou arraste e solte aqui para carregar automaticamente.</div>
+              </div>
+            ) : null}
+          </div>
+        )}
+        {status ? <div className="status-line">{status}</div> : null}
+        {badgeHtml ? <div className="upload-badge-block" dangerouslySetInnerHTML={{ __html: badgeHtml }} /> : null}
+        </div>
+
+        {!modeloPronto ? (
+          <div className="empty-box">Selecione um modelo acima para liberar os campos de avaliação.</div>
+        ) : (
+          <>
+            <div className="equation-formats-section avaliacao-equacao-section">
+              <h5>Equação (estilo SAB)</h5>
+              <div className="equation-box equation-box-plain">
+                {equacaoSab || 'Equação indisponível.'}
+              </div>
+            </div>
+
+            <div className="avaliacao-groups avaliacao-beta-groups">
+              <div className="subpanel avaliacao-group">
+                <h4>Parâmetros</h4>
+                <div className="avaliacao-grid" key={`avaliacao-grid-beta-${avaliacaoFormVersion}`}>
+                  {camposAvaliacao.map((campo) => (
+                    <div key={`campo-beta-${campo.coluna}`} className="avaliacao-card">
+                      <label>{campo.coluna}</label>
+                      {campo.tipo === 'dicotomica' ? (
+                        <select
+                          defaultValue={String(valoresAvaliacaoRef.current[campo.coluna] ?? '')}
+                          onChange={(event) => {
+                            valoresAvaliacaoRef.current[campo.coluna] = event.target.value
+                          }}
+                        >
+                          <option value="">Selecione</option>
+                          {(campo.opcoes || [0, 1]).map((opcao) => (
+                            <option key={`op-beta-${campo.coluna}-${opcao}`} value={String(opcao)}>
+                              {opcao}
+                            </option>
+                          ))}
+                        </select>
+                      ) : (
+                        <input
+                          type="number"
+                          defaultValue={valoresAvaliacaoRef.current[campo.coluna] ?? ''}
+                          placeholder={campo.placeholder || ''}
+                          onChange={(event) => {
+                            valoresAvaliacaoRef.current[campo.coluna] = event.target.value
+                          }}
+                        />
+                      )}
+                    </div>
+                  ))}
+                </div>
+                <div className="row-wrap avaliacao-actions-row">
+                  <button type="button" onClick={() => void onIncluirAvaliacao()} disabled={loading || !modeloPronto}>
+                    Incluir avaliação
+                  </button>
+                  <button type="button" onClick={onResetCamposAvaliacao} disabled={loading || !modeloPronto}>
+                    Resetar campos
+                  </button>
+                </div>
+              </div>
+
+              {avaliacoesCards.length ? (
+                <div className="subpanel avaliacao-group">
+                  <h4>Avaliações</h4>
+                  <div className="row avaliacao-base-row">
+                    <label>Base comparação</label>
+                    <select value={baseCardId} onChange={(event) => setBaseCardId(event.target.value)}>
+                      {avaliacoesCards.map((item, idx) => (
+                        <option key={`base-card-${item.id}`} value={item.id}>
+                          {`Aval. ${idx + 1} - ${item.modelo}`}
+                        </option>
+                      ))}
+                    </select>
+                    <button type="button" className="btn-avaliacao-export" onClick={onExportAvaliacoes} disabled={loading || !avaliacoesCards.length}>
+                      Exportar avaliações
+                    </button>
+                    {!confirmarLimpezaAvaliacoes ? (
+                      <button
+                        type="button"
+                        className="btn-avaliacao-clear"
+                        onClick={() => setConfirmarLimpezaAvaliacoes(true)}
+                        disabled={loading || !avaliacoesCards.length}
+                      >
+                        Limpar avaliações
+                      </button>
+                    ) : (
+                      <div className="avaliacao-clear-confirm avaliacao-clear-confirm-inline">
+                        <span>Confirmar limpeza?</span>
+                        <button type="button" className="btn-avaliacao-clear" onClick={onLimparAvaliacoes} disabled={loading}>
+                          Confirmar
+                        </button>
+                        <button type="button" onClick={() => setConfirmarLimpezaAvaliacoes(false)} disabled={loading}>
+                          Cancelar
+                        </button>
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="avaliacao-beta-cards-grid">
+                    {avaliacoesCards.map((item, idx) => {
+                      const aval = item.avaliacao || {}
+                      const ehBase = item.id === baseCardId
+                      const variaveis = Object.keys(aval.valores_x || {})
+                      return (
+                        <article key={item.id} className="avaliacao-beta-card">
+                          <div className="avaliacao-beta-card-head">
+                            <div className="avaliacao-beta-card-title">
+                              <strong>{`Aval. ${idx + 1}`}</strong>
+                              <span>{item.modelo}</span>
+                            </div>
+                            <div className="avaliacao-beta-card-actions">
+                              <button type="button" className="avaliacao-beta-delete-btn" onClick={() => onExcluirCard(item.id)} disabled={loading}>
+                                Excluir
+                              </button>
+                            </div>
+                          </div>
+
+                          <div className="avaliacao-beta-card-subtitle">
+                            {formatarDataHoraIso(item.createdAt)}
+                          </div>
+
+                          <div className="avaliacao-beta-card-base">
+                            <strong>Estimado / Base:</strong>{' '}
+                            {ehBase ? (
+                              <span className="avaliacao-beta-base-pill">Base</span>
+                            ) : (
+                              <span>{calcularComparacaoBase(aval)}</span>
+                            )}
+                          </div>
+
+                          <div className="avaliacao-beta-vars-list">
+                            {variaveis.map((variavel) => (
+                              <div key={`${item.id}-var-${variavel}`} className="avaliacao-beta-vars-item">
+                                <span>{variavel}</span>
+                                <span>
+                                  {formatarNumero(aval?.valores_x?.[variavel], 2)} {classificarExtrapolacao(aval?.extrapolacoes?.[variavel])}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+
+                          <div className="avaliacao-beta-metrics">
+                            <div><strong>Estimado:</strong> {formatarMoeda(aval.estimado)}</div>
+                            <div><strong>CA -15%:</strong> {formatarMoeda(aval.ca_inf)}</div>
+                            <div><strong>CA +15%:</strong> {formatarMoeda(aval.ca_sup)}</div>
+                            <div><strong>IC 80% Inf.:</strong> {formatarMoeda(aval.ic_inf)} ({`-${formatarNumero(aval.perc_inf, 1)}%`})</div>
+                            <div><strong>IC 80% Sup.:</strong> {formatarMoeda(aval.ic_sup)} ({`+${formatarNumero(aval.perc_sup, 1)}%`})</div>
+                            <div><strong>Amplitude:</strong> {formatarNumero(aval.amplitude, 1)}%</div>
+                            <div><strong>Qtd. extrapolações:</strong> {String(aval.qtd_extrapolacoes ?? 0)}</div>
+                          </div>
+
+                          <div className="avaliacao-beta-graus">
+                            <span style={{ color: corGrau(aval.precisao) }}>
+                              <strong>Precisão:</strong> {String(aval.precisao || '-')}
+                            </span>
+                            <span style={{ color: corGrau(aval.fundamentacao) }}>
+                              <strong>Fundamentação:</strong> {String(aval.fundamentacao || '-')}
+                            </span>
+                          </div>
+                        </article>
+                      )
+                    })}
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          </>
+        )}
+      </div>
+
+      <LoadingOverlay show={loading} label="Processando dados..." />
+      {error ? <div className="error-line">{error}</div> : null}
+    </div>
+  )
+}

frontend/src/components/InicioTab.jsx

@@ -10,6 +10,7 @@ export default function InicioTab() {
           <li><strong>Elaboração/Edição:</strong> cria, ajusta e exporta modelos estatísticos.</li>
           <li><strong>Visualização/Avaliação:</strong> abre modelos `.dai`, mostra diagnósticos e permite avaliação.</li>
           <li><strong>Repositório:</strong> lista, adiciona e remove modelos do acervo central.</li>
+          <li><strong>Avaliação Beta:</strong> compara avaliações de modelos diferentes em cards no mesmo painel.</li>
         </ul>
         <p className="inicio-creditos">
           Aplicativo criado por Guilherme Silberfarb Costa e David Schuch Bertoglio.

frontend/src/components/MapFrame.jsx

@@ -40,31 +40,50 @@ export default function MapFrame({ html }) {
       if (!map) return
 
       map.invalidateSize(true)
-      const bounds = win.L.latLngBounds([])
+      const dataBounds = win.L.latLngBounds([])
+
+      const isBairroLayer = (layer) => {
+        try {
+          const nome = String(layer?.options?.name || layer?.layerName || '').toLowerCase()
+          if (nome.includes('bairro')) return true
+          const featureName = String(layer?.feature?.properties?.NOME || layer?.feature?.properties?.BAIRRO || '').toLowerCase()
+          return featureName.length > 0
+        } catch {
+          return false
+        }
+      }
 
       map.eachLayer((layer) => {
         try {
-          if (typeof layer.getLatLng === 'function') {
+          if (layer instanceof win.L.TileLayer) return
+          if (isBairroLayer(layer)) return
+
+          if (layer instanceof win.L.CircleMarker || layer instanceof win.L.Marker) {
             const latlng = layer.getLatLng()
             if (latlng && Number.isFinite(latlng.lat) && Number.isFinite(latlng.lng)) {
-              bounds.extend(latlng)
+              dataBounds.extend(latlng)
             }
             return
           }
 
-          if (typeof layer.getBounds === 'function') {
-            const layerBounds = layer.getBounds()
-            if (layerBounds && typeof layerBounds.isValid === 'function' && layerBounds.isValid()) {
-              bounds.extend(layerBounds)
+          if (layer instanceof win.L.Rectangle) {
+            const rectBounds = layer.getBounds()
+            if (rectBounds && typeof rectBounds.isValid === 'function' && rectBounds.isValid()) {
+              dataBounds.extend(rectBounds)
             }
+            return
           }
         } catch {
           // no-op
         }
       })
 
-      if (bounds.isValid()) {
-        map.fitBounds(bounds, { padding: [20, 20], maxZoom: 17, animate: false })
+      if (dataBounds.isValid()) {
+        const size = map.getSize ? map.getSize() : null
+        const basePadding = size
+          ? Math.max(34, Math.min(84, Math.round(Math.min(size.x, size.y) * 0.085)))
+          : 48
+        map.fitBounds(dataBounds, { padding: [basePadding, basePadding], maxZoom: 18, animate: false })
       }
     } catch {
       // no-op

frontend/src/components/PesquisaTab.jsx

@@ -1,6 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { api } from '../api'
+import { api, downloadBlob } from '../api'
+import DataTable from './DataTable'
+import EquationFormatsPanel from './EquationFormatsPanel'
+import LoadingOverlay from './LoadingOverlay'
 import MapFrame from './MapFrame'
+import PlotFigure from './PlotFigure'
 import PesquisaAdminConfigPanel from './PesquisaAdminConfigPanel'
 import SectionBlock from './SectionBlock'
 
@@ -24,6 +28,17 @@ const RESULT_INITIAL = {
   total_geral: 0,
 }
 
+const PESQUISA_INNER_TABS = [
+  { key: 'mapa', label: 'Mapa' },
+  { key: 'dados_mercado', label: 'Dados de Mercado' },
+  { key: 'metricas', label: 'Métricas' },
+  { key: 'transformacoes', label: 'Transformações' },
+  { key: 'resumo', label: 'Resumo' },
+  { key: 'coeficientes', label: 'Coeficientes' },
+  { key: 'obs_calc', label: 'Obs x Calc' },
+  { key: 'graficos', label: 'Gráficos' },
+]
+
 const TIPO_SIGLAS = {
   RECOND: 'Residencia em condominio',
   RCOMD: 'Residencia em condominio',
@@ -437,7 +452,7 @@ function ChipAutocompleteInput({
   )
 }
 
-export default function PesquisaTab() {
+export default function PesquisaTab({ sessionId }) {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [pesquisaInicializada, setPesquisaInicializada] = useState(false)
@@ -447,7 +462,6 @@ export default function PesquisaTab() {
   const [result, setResult] = useState(RESULT_INITIAL)
 
   const [selectedIds, setSelectedIds] = useState([])
-  const [detailModelId, setDetailModelId] = useState('')
   const selectAllRef = useRef(null)
 
   const [mapaLoading, setMapaLoading] = useState(false)
@@ -456,6 +470,27 @@ export default function PesquisaTab() {
   const [mapaHtml, setMapaHtml] = useState('')
   const [mapaLegendas, setMapaLegendas] = useState([])
 
+  const [modeloAbertoMeta, setModeloAbertoMeta] = useState(null)
+  const [modeloAbertoLoading, setModeloAbertoLoading] = useState(false)
+  const [modeloAbertoError, setModeloAbertoError] = useState('')
+  const [modeloAbertoActiveTab, setModeloAbertoActiveTab] = useState('mapa')
+  const [modeloAbertoDados, setModeloAbertoDados] = useState(null)
+  const [modeloAbertoEstatisticas, setModeloAbertoEstatisticas] = useState(null)
+  const [modeloAbertoEscalasHtml, setModeloAbertoEscalasHtml] = useState('')
+  const [modeloAbertoDadosTransformados, setModeloAbertoDadosTransformados] = useState(null)
+  const [modeloAbertoResumoHtml, setModeloAbertoResumoHtml] = useState('')
+  const [modeloAbertoEquacoes, setModeloAbertoEquacoes] = useState(null)
+  const [modeloAbertoCoeficientes, setModeloAbertoCoeficientes] = useState(null)
+  const [modeloAbertoObsCalc, setModeloAbertoObsCalc] = useState(null)
+  const [modeloAbertoMapaHtml, setModeloAbertoMapaHtml] = useState('')
+  const [modeloAbertoMapaChoices, setModeloAbertoMapaChoices] = useState(['Visualização Padrão'])
+  const [modeloAbertoMapaVar, setModeloAbertoMapaVar] = useState('Visualização Padrão')
+  const [modeloAbertoPlotObsCalc, setModeloAbertoPlotObsCalc] = useState(null)
+  const [modeloAbertoPlotResiduos, setModeloAbertoPlotResiduos] = useState(null)
+  const [modeloAbertoPlotHistograma, setModeloAbertoPlotHistograma] = useState(null)
+  const [modeloAbertoPlotCook, setModeloAbertoPlotCook] = useState(null)
+  const [modeloAbertoPlotCorr, setModeloAbertoPlotCorr] = useState(null)
+
   const sugestoes = result.sugestoes || {}
   const opcoesTipoModelo = useMemo(
     () => [...new Set((sugestoes.tipos_modelo || []).map((item) => String(item || '').trim()).filter(Boolean))]
@@ -463,7 +498,7 @@ export default function PesquisaTab() {
     [sugestoes.tipos_modelo],
   )
   const resultIds = useMemo(() => (result.modelos || []).map((modelo) => modelo.id), [result.modelos])
-  const detalheModelo = useMemo(() => (result.modelos || []).find((modelo) => modelo.id === detailModelId) || null, [result.modelos, detailModelId])
+  const modoModeloAberto = Boolean(modeloAbertoMeta)
   const todosSelecionados = resultIds.length > 0 && resultIds.every((id) => selectedIds.includes(id))
   const algunsSelecionados = resultIds.some((id) => selectedIds.includes(id))
 
@@ -530,24 +565,6 @@ export default function PesquisaTab() {
     selectAllRef.current.indeterminate = algunsSelecionados && !todosSelecionados
   }, [algunsSelecionados, todosSelecionados])
 
-  useEffect(() => {
-    if (!detailModelId) return
-    if (!detalheModelo) {
-      setDetailModelId('')
-    }
-  }, [detailModelId, detalheModelo])
-
-  useEffect(() => {
-    if (!detailModelId) return undefined
-    function onEsc(event) {
-      if (event.key === 'Escape') {
-        setDetailModelId('')
-      }
-    }
-    window.addEventListener('keydown', onEsc)
-    return () => window.removeEventListener('keydown', onEsc)
-  }, [detailModelId])
-
   function onFieldChange(event) {
     const { value, dataset, name } = event.target
     const field = dataset.field || name
@@ -581,12 +598,77 @@ export default function PesquisaTab() {
     })
   }
 
-  function onAbrirDetalhes(modeloId) {
-    setDetailModelId(modeloId)
+  function preencherModeloAberto(resp) {
+    setModeloAbertoDados(resp?.dados || null)
+    setModeloAbertoEstatisticas(resp?.estatisticas || null)
+    setModeloAbertoEscalasHtml(resp?.escalas_html || '')
+    setModeloAbertoDadosTransformados(resp?.dados_transformados || null)
+    setModeloAbertoResumoHtml(resp?.resumo_html || '')
+    setModeloAbertoEquacoes(resp?.equacoes || null)
+    setModeloAbertoCoeficientes(resp?.coeficientes || null)
+    setModeloAbertoObsCalc(resp?.obs_calc || null)
+    setModeloAbertoMapaHtml(resp?.mapa_html || '')
+    setModeloAbertoMapaChoices(resp?.mapa_choices || ['Visualização Padrão'])
+    setModeloAbertoMapaVar('Visualização Padrão')
+    setModeloAbertoPlotObsCalc(resp?.grafico_obs_calc || null)
+    setModeloAbertoPlotResiduos(resp?.grafico_residuos || null)
+    setModeloAbertoPlotHistograma(resp?.grafico_histograma || null)
+    setModeloAbertoPlotCook(resp?.grafico_cook || null)
+    setModeloAbertoPlotCorr(resp?.grafico_correlacao || null)
   }
 
-  function onFecharDetalhes() {
-    setDetailModelId('')
+  async function onAbrirModelo(modelo) {
+    if (!sessionId) {
+      setError('Sessao indisponivel no momento. Aguarde e tente novamente.')
+      return
+    }
+    setModeloAbertoLoading(true)
+    setModeloAbertoError('')
+    try {
+      await api.visualizacaoRepositorioCarregar(sessionId, modelo.id)
+      const resp = await api.exibirVisualizacao(sessionId)
+      preencherModeloAberto(resp)
+      setModeloAbertoActiveTab('mapa')
+      setModeloAbertoMeta({
+        id: modelo.id,
+        nome: modelo.nome_modelo || modelo.arquivo || modelo.id,
+      })
+    } catch (err) {
+      setModeloAbertoError(err.message || 'Falha ao abrir modelo.')
+    } finally {
+      setModeloAbertoLoading(false)
+    }
+  }
+
+  function onVoltarPesquisa() {
+    setModeloAbertoMeta(null)
+    setModeloAbertoError('')
+    setModeloAbertoActiveTab('mapa')
+  }
+
+  async function onModeloAbertoMapChange(nextVar) {
+    setModeloAbertoMapaVar(nextVar)
+    if (!sessionId) return
+    try {
+      const resp = await api.updateVisualizacaoMap(sessionId, nextVar)
+      setModeloAbertoMapaHtml(resp?.mapa_html || '')
+    } catch (err) {
+      setModeloAbertoError(err.message || 'Falha ao atualizar mapa do modelo.')
+    }
+  }
+
+  async function onDownloadEquacaoModeloAberto(mode) {
+    if (!sessionId || !mode) return
+    setModeloAbertoLoading(true)
+    try {
+      const blob = await api.exportEquationViz(sessionId, mode)
+      const sufixo = String(mode) === 'excel_sab' ? 'estilo_sab' : 'excel'
+      downloadBlob(blob, `equacao_modelo_${sufixo}.xlsx`)
+    } catch (err) {
+      setModeloAbertoError(err.message || 'Falha ao exportar equação.')
+    } finally {
+      setModeloAbertoLoading(false)
+    }
   }
 
   async function onGerarMapaSelecionados() {
@@ -617,6 +699,103 @@ export default function PesquisaTab() {
     await carregarContextoInicial()
   }
 
+  if (modoModeloAberto) {
+    return (
+      <div className="tab-content">
+        <div className="pesquisa-opened-model-view">
+          <div className="pesquisa-opened-model-head">
+            <div className="pesquisa-opened-model-title-wrap">
+              <h3>{modeloAbertoMeta?.nome || 'Modelo'}</h3>
+              <p>Aceito para o avaliando</p>
+            </div>
+            <button
+              type="button"
+              className="model-source-back-btn model-source-back-btn-danger"
+              onClick={onVoltarPesquisa}
+              disabled={modeloAbertoLoading}
+            >
+              Voltar para pesquisa
+            </button>
+          </div>
+
+          <div className="inner-tabs" role="tablist" aria-label="Abas internas do modelo aberto na pesquisa">
+            {PESQUISA_INNER_TABS.map((tab) => (
+              <button
+                key={tab.key}
+                type="button"
+                className={modeloAbertoActiveTab === tab.key ? 'inner-tab-pill active' : 'inner-tab-pill'}
+                onClick={() => setModeloAbertoActiveTab(tab.key)}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          <div className="inner-tab-panel">
+            {modeloAbertoActiveTab === 'mapa' ? (
+              <>
+                <div className="row compact visualizacao-mapa-controls">
+                  <label>Variável no mapa</label>
+                  <select value={modeloAbertoMapaVar} onChange={(event) => void onModeloAbertoMapChange(event.target.value)}>
+                    {modeloAbertoMapaChoices.map((choice) => (
+                      <option key={`modelo-aberto-mapa-${choice}`} value={choice}>{choice}</option>
+                    ))}
+                  </select>
+                </div>
+                <MapFrame html={modeloAbertoMapaHtml} />
+              </>
+            ) : null}
+
+            {modeloAbertoActiveTab === 'dados_mercado' ? <DataTable table={modeloAbertoDados} maxHeight={620} /> : null}
+            {modeloAbertoActiveTab === 'metricas' ? <DataTable table={modeloAbertoEstatisticas} maxHeight={620} /> : null}
+
+            {modeloAbertoActiveTab === 'transformacoes' ? (
+              <>
+                <div dangerouslySetInnerHTML={{ __html: modeloAbertoEscalasHtml }} />
+                <h4 className="visualizacao-table-title">Dados com variáveis transformadas</h4>
+                <DataTable table={modeloAbertoDadosTransformados} />
+              </>
+            ) : null}
+
+            {modeloAbertoActiveTab === 'resumo' ? (
+              <>
+                <div className="equation-formats-section">
+                  <h4>Equações do Modelo</h4>
+                  <EquationFormatsPanel
+                    equacoes={modeloAbertoEquacoes}
+                    onDownload={(mode) => void onDownloadEquacaoModeloAberto(mode)}
+                    disabled={modeloAbertoLoading}
+                  />
+                </div>
+                <div dangerouslySetInnerHTML={{ __html: modeloAbertoResumoHtml }} />
+              </>
+            ) : null}
+
+            {modeloAbertoActiveTab === 'coeficientes' ? <DataTable table={modeloAbertoCoeficientes} maxHeight={620} /> : null}
+            {modeloAbertoActiveTab === 'obs_calc' ? <DataTable table={modeloAbertoObsCalc} maxHeight={620} /> : null}
+
+            {modeloAbertoActiveTab === 'graficos' ? (
+              <>
+                <div className="plot-grid-2-fixed">
+                  <PlotFigure figure={modeloAbertoPlotObsCalc} title="Obs x Calc" />
+                  <PlotFigure figure={modeloAbertoPlotResiduos} title="Resíduos" />
+                  <PlotFigure figure={modeloAbertoPlotHistograma} title="Histograma" />
+                  <PlotFigure figure={modeloAbertoPlotCook} title="Cook" forceHideLegend />
+                </div>
+                <div className="plot-full-width">
+                  <PlotFigure figure={modeloAbertoPlotCorr} title="Correlação" className="plot-correlation-card" />
+                </div>
+              </>
+            ) : null}
+          </div>
+
+          {modeloAbertoError ? <div className="error-line inline-error">{modeloAbertoError}</div> : null}
+        </div>
+        <LoadingOverlay show={modeloAbertoLoading} label="Carregando modelo..." />
+      </div>
+    )
+  }
+
   return (
     <div className="tab-content">
       <SectionBlock
@@ -791,27 +970,21 @@ export default function PesquisaTab() {
                 <article key={modelo.id} className={`pesquisa-card${selecionado ? ' is-selected' : ''}`}>
                   <div className="pesquisa-card-top">
                     <div className="pesquisa-card-head">
-                      <div className="pesquisa-card-head-main">
-                        <h4>{modelo.nome_modelo || modelo.arquivo}</h4>
-                        <div className="pesquisa-card-head-actions">
-                          <label className="pesquisa-select-toggle">
-                            <input
-                              type="checkbox"
-                              checked={selecionado}
-                              onChange={() => onToggleSelecionado(modelo.id)}
-                            />
-                            Selecionar
-                          </label>
-                          <button type="button" className="btn-pesquisa-expand" onClick={() => onAbrirDetalhes(modelo.id)}>
-                            Ver mais
-                          </button>
-                        </div>
+                      <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>
                     </div>
-
-                    <div className="pesquisa-card-status-row">
-                      <div className="status-pill done">Aceito para o avaliando ({modelo.avaliando?.campos_informados || 0} campo(s) validado(s))</div>
-                    </div>
                     <div className="pesquisa-card-body">
                       <div className="pesquisa-card-dados-list">
                         <div><strong>Finalidades no modelo:</strong> {(modelo.finalidades || []).length ? modelo.finalidades.join(', ') : '-'}</div>
@@ -862,62 +1035,7 @@ export default function PesquisaTab() {
         {mapaHtml ? <MapFrame html={mapaHtml} /> : <div className="empty-box">Nenhum mapa gerado ainda.</div>}
       </SectionBlock>
 
-      {detalheModelo ? (
-        <div className="pesquisa-modal-backdrop" role="presentation" onClick={onFecharDetalhes}>
-          <div className="pesquisa-modal" role="dialog" aria-modal="true" aria-labelledby={`pesquisa-modal-title-${detalheModelo.id}`} onClick={(event) => event.stopPropagation()}>
-            <div className="pesquisa-modal-head">
-              <div>
-                <h4 id={`pesquisa-modal-title-${detalheModelo.id}`}>{detalheModelo.nome_modelo || detalheModelo.arquivo}</h4>
-                <p>{detalheModelo.arquivo}</p>
-              </div>
-              <button type="button" className="pesquisa-modal-close" onClick={onFecharDetalhes}>
-                Fechar
-              </button>
-            </div>
-
-            <div className="pesquisa-modal-body">
-              <div className="pesquisa-card-kpis">
-                <span><strong>Faixa area:</strong> {formatRange(detalheModelo.faixa_area)}</span>
-                <span><strong>Faixa RH:</strong> {formatRange(detalheModelo.faixa_rh)}</span>
-                <span><strong>Faixa data:</strong> {formatRange(detalheModelo.faixa_data)}</span>
-              </div>
-
-              <div className="pesquisa-compare-block">
-                <h5>Equacao</h5>
-                <div className="equation-box">{detalheModelo.equacao || 'Nao disponivel no modelo.'}</div>
-              </div>
-
-              <div className="pesquisa-compare-block">
-                <h5>Faixas de variaveis (min/max)</h5>
-                {detalheModelo.variaveis_resumo?.length ? (
-                  <div className="table-wrapper pesquisa-variaveis-table">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th>Variavel</th>
-                          <th>Min</th>
-                          <th>Max</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {detalheModelo.variaveis_resumo.map((item) => (
-                          <tr key={`${detalheModelo.id}-${item.variavel}`}>
-                            <td>{item.variavel}</td>
-                            <td>{item.min ?? '-'}</td>
-                            <td>{item.max ?? '-'}</td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                ) : (
-                  <div className="empty-box">Sem estatisticas suficientes para listar variaveis.</div>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : null}
+      <LoadingOverlay show={modeloAbertoLoading} label="Carregando modelo..." />
     </div>
   )
 }

frontend/src/components/RepositorioTab.jsx

@@ -1,6 +1,21 @@
-import React, { useEffect, useMemo, useState } from 'react'
-import { api } from '../api'
-import SectionBlock from './SectionBlock'
+import React, { useEffect, useState } from 'react'
+import { api, downloadBlob } from '../api'
+import DataTable from './DataTable'
+import EquationFormatsPanel from './EquationFormatsPanel'
+import LoadingOverlay from './LoadingOverlay'
+import MapFrame from './MapFrame'
+import PlotFigure from './PlotFigure'
+
+const REPO_INNER_TABS = [
+  { key: 'mapa', label: 'Mapa' },
+  { key: 'dados_mercado', label: 'Dados de Mercado' },
+  { key: 'metricas', label: 'Métricas' },
+  { key: 'transformacoes', label: 'Transformações' },
+  { key: 'resumo', label: 'Resumo' },
+  { key: 'coeficientes', label: 'Coeficientes' },
+  { key: 'obs_calc', label: 'Obs x Calc' },
+  { key: 'graficos', label: 'Gráficos' },
+]
 
 function formatarFonte(fonte) {
   if (!fonte || typeof fonte !== 'object') return 'Fonte não informada'
@@ -14,7 +29,7 @@ function formatarFonte(fonte) {
   return 'Pasta local'
 }
 
-export default function RepositorioTab({ authUser }) {
+export default function RepositorioTab({ authUser, sessionId }) {
   const [modelos, setModelos] = useState([])
   const [fonte, setFonte] = useState(null)
   const [loading, setLoading] = useState(false)
@@ -22,27 +37,49 @@ export default function RepositorioTab({ authUser }) {
   const [deleting, setDeleting] = useState(false)
   const [error, setError] = useState('')
   const [status, setStatus] = useState('')
-  const [selecionados, setSelecionados] = useState([])
-  const [arquivos, setArquivos] = useState([])
-  const [confirmDelete, setConfirmDelete] = useState(false)
+  const [arquivoUpload, setArquivoUpload] = useState(null)
+  const [confirmDeleteId, setConfirmDeleteId] = useState('')
+  const [confirmarSubstituicao, setConfirmarSubstituicao] = useState({ open: false, substituidos: [] })
+  const [confirmarExclusaoModal, setConfirmarExclusaoModal] = useState({
+    open: false,
+    modeloId: '',
+    nomeModelo: '',
+    digitado: '',
+  })
+
+  const [modeloAbertoMeta, setModeloAbertoMeta] = useState(null)
+  const [modeloAbertoLoading, setModeloAbertoLoading] = useState(false)
+  const [modeloAbertoError, setModeloAbertoError] = useState('')
+  const [modeloAbertoActiveTab, setModeloAbertoActiveTab] = useState('mapa')
+  const [modeloAbertoDados, setModeloAbertoDados] = useState(null)
+  const [modeloAbertoEstatisticas, setModeloAbertoEstatisticas] = useState(null)
+  const [modeloAbertoEscalasHtml, setModeloAbertoEscalasHtml] = useState('')
+  const [modeloAbertoDadosTransformados, setModeloAbertoDadosTransformados] = useState(null)
+  const [modeloAbertoResumoHtml, setModeloAbertoResumoHtml] = useState('')
+  const [modeloAbertoEquacoes, setModeloAbertoEquacoes] = useState(null)
+  const [modeloAbertoCoeficientes, setModeloAbertoCoeficientes] = useState(null)
+  const [modeloAbertoObsCalc, setModeloAbertoObsCalc] = useState(null)
+  const [modeloAbertoMapaHtml, setModeloAbertoMapaHtml] = useState('')
+  const [modeloAbertoMapaChoices, setModeloAbertoMapaChoices] = useState(['Visualização Padrão'])
+  const [modeloAbertoMapaVar, setModeloAbertoMapaVar] = useState('Visualização Padrão')
+  const [modeloAbertoPlotObsCalc, setModeloAbertoPlotObsCalc] = useState(null)
+  const [modeloAbertoPlotResiduos, setModeloAbertoPlotResiduos] = useState(null)
+  const [modeloAbertoPlotHistograma, setModeloAbertoPlotHistograma] = useState(null)
+  const [modeloAbertoPlotCook, setModeloAbertoPlotCook] = useState(null)
+  const [modeloAbertoPlotCorr, setModeloAbertoPlotCorr] = useState(null)
 
   const isAdmin = String(authUser?.perfil || '').toLowerCase() === 'admin'
   const totalModelos = modelos.length
-  const totalSelecionados = selecionados.length
-
-  const todosSelecionados = useMemo(() => {
-    if (!modelos.length) return false
-    return modelos.every((item) => selecionados.includes(String(item.id)))
-  }, [modelos, selecionados])
+  const modoModeloAberto = Boolean(modeloAbertoMeta)
+  const nomesSubstituidos = Array.isArray(confirmarSubstituicao.substituidos)
+    ? confirmarSubstituicao.substituidos.filter(Boolean)
+    : []
+  const exclusaoDigitadaCorreta = confirmarExclusaoModal.digitado === confirmarExclusaoModal.nomeModelo
 
   useEffect(() => {
     void carregarModelos()
   }, [])
 
-  useEffect(() => {
-    setSelecionados((prev) => prev.filter((id) => modelos.some((item) => String(item.id) === String(id))))
-  }, [modelos])
-
   async function carregarModelos() {
     setLoading(true)
     setError('')
@@ -60,61 +97,253 @@ export default function RepositorioTab({ authUser }) {
     }
   }
 
-  function onToggleSelecionado(id) {
-    const key = String(id)
-    setSelecionados((prev) => (prev.includes(key) ? prev.filter((item) => item !== key) : [...prev, key]))
-    setConfirmDelete(false)
+  function parseSubstituidosErro(err) {
+    if (!err || typeof err !== 'object') return []
+    const detail = err.detail
+    if (!detail || typeof detail !== 'object') return []
+    const lista = detail.substituidos
+    if (!Array.isArray(lista)) return []
+    return lista.map((item) => String(item || '').trim()).filter(Boolean)
   }
 
-  function onToggleTodos(event) {
-    if (event.target.checked) {
-      setSelecionados(modelos.map((item) => String(item.id)))
-    } else {
-      setSelecionados([])
-    }
-    setConfirmDelete(false)
-  }
-
-  async function onUploadArquivos() {
-    if (!isAdmin || arquivos.length === 0) return
+  async function onUploadArquivo(confirmar = false) {
+    if (!isAdmin || !arquivoUpload) return
     setUploading(true)
     setError('')
     setStatus('')
     try {
-      const resp = await api.repositorioUpload(arquivos)
+      const resp = await api.repositorioUpload([arquivoUpload], { confirmarSubstituicao: confirmar })
       setModelos(Array.isArray(resp?.modelos) ? resp.modelos : [])
       setFonte(resp?.fonte || null)
-      setStatus(resp?.status || 'Upload concluído.')
-      setArquivos([])
+      setStatus(resp?.status || 'Modelo incluído no repositório.')
+      setArquivoUpload(null)
+      setConfirmarSubstituicao({ open: false, substituidos: [] })
     } catch (err) {
-      setError(err.message || 'Falha no upload dos modelos.')
+      const substituidos = parseSubstituidosErro(err)
+      const erroDuplicado = Number(err?.status) === 409 && substituidos.length > 0
+      if (!confirmar && erroDuplicado) {
+        setConfirmarSubstituicao({ open: true, substituidos })
+        setError('')
+        return
+      }
+      setError(err.message || 'Falha ao incluir modelo no repositório.')
     } finally {
       setUploading(false)
     }
   }
 
-  async function onExcluirSelecionados() {
-    if (!isAdmin || selecionados.length === 0) return
+  async function onExcluirModelo(modeloId) {
+    if (!isAdmin || !modeloId) return
     setDeleting(true)
     setError('')
     setStatus('')
     try {
-      const resp = await api.repositorioDelete(selecionados)
+      const resp = await api.repositorioDelete([String(modeloId)])
       setModelos(Array.isArray(resp?.modelos) ? resp.modelos : [])
       setFonte(resp?.fonte || null)
-      setStatus(resp?.status || 'Modelos removidos.')
-      setSelecionados([])
-      setConfirmDelete(false)
+      setStatus(resp?.status || 'Modelo removido do repositório.')
+      setConfirmDeleteId('')
+      setConfirmarExclusaoModal({ open: false, modeloId: '', nomeModelo: '', digitado: '' })
     } catch (err) {
-      setError(err.message || 'Falha na exclusão dos modelos.')
+      setError(err.message || 'Falha na exclusão do modelo.')
     } finally {
       setDeleting(false)
     }
   }
 
+  function onAbrirModalExclusao(item) {
+    const id = String(item?.id || '').trim()
+    if (!id) return
+    const nomeModelo = String(item?.nome_modelo || item?.arquivo || id).trim()
+    setConfirmDeleteId('')
+    setConfirmarExclusaoModal({
+      open: true,
+      modeloId: id,
+      nomeModelo,
+      digitado: '',
+    })
+  }
+
+  function onCancelarModalExclusao() {
+    if (deleting) return
+    setConfirmarExclusaoModal({ open: false, modeloId: '', nomeModelo: '', digitado: '' })
+  }
+
+  async function onConfirmarExclusaoModal() {
+    const modeloId = String(confirmarExclusaoModal.modeloId || '').trim()
+    if (!modeloId) return
+    if (confirmarExclusaoModal.digitado !== confirmarExclusaoModal.nomeModelo) return
+    await onExcluirModelo(modeloId)
+  }
+
+  function preencherModeloAberto(resp) {
+    setModeloAbertoDados(resp?.dados || null)
+    setModeloAbertoEstatisticas(resp?.estatisticas || null)
+    setModeloAbertoEscalasHtml(resp?.escalas_html || '')
+    setModeloAbertoDadosTransformados(resp?.dados_transformados || null)
+    setModeloAbertoResumoHtml(resp?.resumo_html || '')
+    setModeloAbertoEquacoes(resp?.equacoes || null)
+    setModeloAbertoCoeficientes(resp?.coeficientes || null)
+    setModeloAbertoObsCalc(resp?.obs_calc || null)
+    setModeloAbertoMapaHtml(resp?.mapa_html || '')
+    setModeloAbertoMapaChoices(resp?.mapa_choices || ['Visualização Padrão'])
+    setModeloAbertoMapaVar('Visualização Padrão')
+    setModeloAbertoPlotObsCalc(resp?.grafico_obs_calc || null)
+    setModeloAbertoPlotResiduos(resp?.grafico_residuos || null)
+    setModeloAbertoPlotHistograma(resp?.grafico_histograma || null)
+    setModeloAbertoPlotCook(resp?.grafico_cook || null)
+    setModeloAbertoPlotCorr(resp?.grafico_correlacao || null)
+  }
+
+  async function onAbrirModelo(item) {
+    if (!sessionId) {
+      setError('Sessão indisponível no momento. Aguarde e tente novamente.')
+      return
+    }
+    setModeloAbertoLoading(true)
+    setModeloAbertoError('')
+    try {
+      await api.visualizacaoRepositorioCarregar(sessionId, String(item?.id || ''))
+      const resp = await api.exibirVisualizacao(sessionId)
+      preencherModeloAberto(resp)
+      setModeloAbertoActiveTab('mapa')
+      setModeloAbertoMeta({
+        id: String(item?.id || ''),
+        nome: item?.nome_modelo || item?.arquivo || String(item?.id || ''),
+      })
+    } catch (err) {
+      setModeloAbertoError(err.message || 'Falha ao abrir modelo.')
+    } finally {
+      setModeloAbertoLoading(false)
+    }
+  }
+
+  function onVoltarRepositorio() {
+    setModeloAbertoMeta(null)
+    setModeloAbertoError('')
+    setModeloAbertoActiveTab('mapa')
+  }
+
+  async function onModeloAbertoMapChange(nextVar) {
+    setModeloAbertoMapaVar(nextVar)
+    if (!sessionId) return
+    try {
+      const resp = await api.updateVisualizacaoMap(sessionId, nextVar)
+      setModeloAbertoMapaHtml(resp?.mapa_html || '')
+    } catch (err) {
+      setModeloAbertoError(err.message || 'Falha ao atualizar mapa do modelo.')
+    }
+  }
+
+  async function onDownloadEquacaoModeloAberto(mode) {
+    if (!sessionId || !mode) return
+    setModeloAbertoLoading(true)
+    try {
+      const blob = await api.exportEquationViz(sessionId, mode)
+      const sufixo = String(mode) === 'excel_sab' ? 'estilo_sab' : 'excel'
+      downloadBlob(blob, `equacao_modelo_${sufixo}.xlsx`)
+    } catch (err) {
+      setModeloAbertoError(err.message || 'Falha ao exportar equação.')
+    } finally {
+      setModeloAbertoLoading(false)
+    }
+  }
+
+  if (modoModeloAberto) {
+    return (
+      <div className="tab-content">
+        <div className="pesquisa-opened-model-view">
+          <div className="pesquisa-opened-model-head">
+            <div className="pesquisa-opened-model-title-wrap">
+              <h3>{modeloAbertoMeta?.nome || 'Modelo'}</h3>
+              <p>Visualização do modelo do repositório</p>
+            </div>
+            <button type="button" className="model-source-back-btn" onClick={onVoltarRepositorio} disabled={modeloAbertoLoading}>
+              Voltar ao repositório
+            </button>
+          </div>
+
+          <div className="inner-tabs" role="tablist" aria-label="Abas internas do modelo aberto no repositório">
+            {REPO_INNER_TABS.map((tab) => (
+              <button
+                key={tab.key}
+                type="button"
+                className={modeloAbertoActiveTab === tab.key ? 'inner-tab-pill active' : 'inner-tab-pill'}
+                onClick={() => setModeloAbertoActiveTab(tab.key)}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          <div className="inner-tab-panel">
+            {modeloAbertoActiveTab === 'mapa' ? (
+              <>
+                <div className="row compact visualizacao-mapa-controls">
+                  <label>Variável no mapa</label>
+                  <select value={modeloAbertoMapaVar} onChange={(event) => void onModeloAbertoMapChange(event.target.value)}>
+                    {modeloAbertoMapaChoices.map((choice) => (
+                      <option key={`repo-modelo-aberto-mapa-${choice}`} value={choice}>{choice}</option>
+                    ))}
+                  </select>
+                </div>
+                <MapFrame html={modeloAbertoMapaHtml} />
+              </>
+            ) : null}
+
+            {modeloAbertoActiveTab === 'dados_mercado' ? <DataTable table={modeloAbertoDados} maxHeight={620} /> : null}
+            {modeloAbertoActiveTab === 'metricas' ? <DataTable table={modeloAbertoEstatisticas} maxHeight={620} /> : null}
+
+            {modeloAbertoActiveTab === 'transformacoes' ? (
+              <>
+                <div dangerouslySetInnerHTML={{ __html: modeloAbertoEscalasHtml }} />
+                <h4 className="visualizacao-table-title">Dados com variáveis transformadas</h4>
+                <DataTable table={modeloAbertoDadosTransformados} />
+              </>
+            ) : null}
+
+            {modeloAbertoActiveTab === 'resumo' ? (
+              <>
+                <div className="equation-formats-section">
+                  <h4>Equações do Modelo</h4>
+                  <EquationFormatsPanel
+                    equacoes={modeloAbertoEquacoes}
+                    onDownload={(mode) => void onDownloadEquacaoModeloAberto(mode)}
+                    disabled={modeloAbertoLoading}
+                  />
+                </div>
+                <div dangerouslySetInnerHTML={{ __html: modeloAbertoResumoHtml }} />
+              </>
+            ) : null}
+
+            {modeloAbertoActiveTab === 'coeficientes' ? <DataTable table={modeloAbertoCoeficientes} maxHeight={620} /> : null}
+            {modeloAbertoActiveTab === 'obs_calc' ? <DataTable table={modeloAbertoObsCalc} maxHeight={620} /> : null}
+
+            {modeloAbertoActiveTab === 'graficos' ? (
+              <>
+                <div className="plot-grid-2-fixed">
+                  <PlotFigure figure={modeloAbertoPlotObsCalc} title="Obs x Calc" />
+                  <PlotFigure figure={modeloAbertoPlotResiduos} title="Resíduos" />
+                  <PlotFigure figure={modeloAbertoPlotHistograma} title="Histograma" />
+                  <PlotFigure figure={modeloAbertoPlotCook} title="Cook" forceHideLegend />
+                </div>
+                <div className="plot-full-width">
+                  <PlotFigure figure={modeloAbertoPlotCorr} title="Correlação" className="plot-correlation-card" />
+                </div>
+              </>
+            ) : null}
+          </div>
+
+          {modeloAbertoError ? <div className="error-line inline-error">{modeloAbertoError}</div> : null}
+        </div>
+        <LoadingOverlay show={modeloAbertoLoading} label="Carregando modelo..." />
+      </div>
+    )
+  }
+
   return (
     <div className="tab-content">
-      <SectionBlock step="1" title="Repositório de Modelos" subtitle="Visualização, upload e remoção de modelos .dai.">
+      <div className="repositorio-standalone-panel">
         <div className="repo-toolbar">
           <div className="repo-summary">
             <div><strong>Total:</strong> {totalModelos}</div>
@@ -122,7 +351,12 @@ export default function RepositorioTab({ authUser }) {
             <div><strong>Perfil:</strong> {isAdmin ? 'Administrador' : 'Leitura'}</div>
           </div>
           <div className="repo-actions">
-            <button type="button" onClick={() => void carregarModelos()} disabled={loading || uploading || deleting}>
+            <button
+              type="button"
+              className="repo-refresh-btn"
+              onClick={() => void carregarModelos()}
+              disabled={loading || uploading || deleting}
+            >
               Atualizar lista
             </button>
           </div>
@@ -130,50 +364,30 @@ export default function RepositorioTab({ authUser }) {
 
         {isAdmin ? (
           <div className="repo-admin-controls">
-            <div className="repo-upload-row">
+            <div className="repo-upload-row repo-upload-row-single">
               <input
                 type="file"
-                multiple
                 accept=".dai"
-                onChange={(event) => setArquivos(Array.from(event.target.files || []))}
+                onChange={(event) => setArquivoUpload(event.target.files?.[0] || null)}
                 disabled={uploading || deleting}
               />
-              <button type="button" onClick={() => void onUploadArquivos()} disabled={uploading || deleting || arquivos.length === 0}>
-                Enviar modelos
+              <button type="button" onClick={() => void onUploadArquivo()} disabled={uploading || deleting || !arquivoUpload}>
+                Incluir modelo no repositório
               </button>
             </div>
-            <div className="repo-delete-row">
-              <button
-                type="button"
-                onClick={() => setConfirmDelete((prev) => !prev)}
-                disabled={uploading || deleting || totalSelecionados === 0}
-              >
-                Excluir selecionados
-              </button>
-              {confirmDelete ? (
-                <div className="repo-delete-confirm">
-                  <span>Confirmar exclusão de {totalSelecionados} modelo(s)?</span>
-                  <button type="button" className="btn-danger" onClick={() => void onExcluirSelecionados()} disabled={deleting}>
-                    Confirmar exclusão
-                  </button>
-                </div>
-              ) : null}
-            </div>
+            {arquivoUpload ? <div className="section1-empty-hint">Arquivo selecionado: {arquivoUpload.name}</div> : null}
           </div>
         ) : (
-          <div className="section1-empty-hint">Perfil de leitura: upload e exclusão disponíveis apenas para administradores.</div>
+          <div className="section1-empty-hint">Perfil de leitura: inclusão e exclusão disponíveis apenas para administradores.</div>
         )}
 
         {status ? <div className="status-line">{status}</div> : null}
         {error ? <div className="error-line">{error}</div> : null}
 
-        <div className="table-container">
+        <div className="table-container repo-table-block">
           <table className="repo-table">
             <thead>
               <tr>
-                <th>
-                  <input type="checkbox" checked={todosSelecionados} onChange={onToggleTodos} aria-label="Selecionar todos" />
-                </th>
                 <th>Modelo</th>
                 <th>Tipo</th>
                 <th>Finalidade</th>
@@ -182,16 +396,16 @@ export default function RepositorioTab({ authUser }) {
                 <th>Dados</th>
                 <th>APP</th>
                 <th>Status</th>
+                <th className="repo-col-open">Abrir</th>
+                {isAdmin ? <th className="repo-col-delete">Excluir</th> : null}
               </tr>
             </thead>
             <tbody>
               {modelos.map((item) => {
                 const key = String(item.id)
+                const emConfirmacao = confirmDeleteId === key
                 return (
                   <tr key={key}>
-                    <td>
-                      <input type="checkbox" checked={selecionados.includes(key)} onChange={() => onToggleSelecionado(key)} />
-                    </td>
                     <td>{item.nome_modelo || item.arquivo || key}</td>
                     <td>{item.tipo_imovel || '-'}</td>
                     <td>{item.finalidade || '-'}</td>
@@ -200,18 +414,172 @@ export default function RepositorioTab({ authUser }) {
                     <td>{item.total_dados ?? '-'}</td>
                     <td>{item.tem_app ? 'Sim' : 'Não'}</td>
                     <td>{item.status || '-'}</td>
+                    <td className="repo-col-open">
+                      <button
+                        type="button"
+                        className="repo-open-btn"
+                        onClick={() => void onAbrirModelo(item)}
+                        title="Abrir modelo"
+                        aria-label={`Abrir ${item.nome_modelo || item.arquivo || key}`}
+                      >
+                        ↗
+                      </button>
+                    </td>
+                    {isAdmin ? (
+                      <td className="repo-col-delete">
+                        {!emConfirmacao ? (
+                          <button
+                            type="button"
+                            className="repo-delete-icon-btn"
+                            onClick={() => setConfirmDeleteId(key)}
+                            disabled={deleting}
+                            title="Excluir modelo"
+                            aria-label={`Excluir ${item.nome_modelo || item.arquivo || key}`}
+                          >
+                            🗑
+                          </button>
+                        ) : (
+                          <div className="repo-delete-inline-confirm">
+                            <button
+                              type="button"
+                              className="btn-danger repo-delete-confirm-btn"
+                              onClick={() => onAbrirModalExclusao(item)}
+                              disabled={deleting}
+                            >
+                              Excluir
+                            </button>
+                            <button
+                              type="button"
+                              className="repo-delete-cancel-btn"
+                              onClick={() => setConfirmDeleteId('')}
+                              disabled={deleting}
+                            >
+                              Cancelar
+                            </button>
+                          </div>
+                        )}
+                      </td>
+                    ) : null}
                   </tr>
                 )
               })}
               {!modelos.length ? (
                 <tr>
-                  <td colSpan={9}>{loading ? 'Carregando modelos...' : 'Nenhum modelo encontrado no repositório.'}</td>
+                  <td colSpan={isAdmin ? 10 : 9}>
+                    {loading ? 'Carregando modelos...' : 'Nenhum modelo encontrado no repositório.'}
+                  </td>
                 </tr>
               ) : null}
             </tbody>
           </table>
         </div>
-      </SectionBlock>
+      </div>
+
+      {confirmarSubstituicao.open ? (
+        <div className="pesquisa-modal-backdrop">
+          <div className="pesquisa-modal repo-confirm-modal">
+            <div className="pesquisa-modal-head">
+              <div>
+                <h4>Confirmar substituição de modelo</h4>
+                <p>Já existe modelo com o mesmo nome no repositório.</p>
+              </div>
+              <button
+                type="button"
+                className="pesquisa-modal-close"
+                onClick={() => setConfirmarSubstituicao({ open: false, substituidos: [] })}
+                disabled={uploading}
+              >
+                Fechar
+              </button>
+            </div>
+            <div className="repo-confirm-modal-body">
+              <div className="repo-confirm-text">
+                Se você continuar, o modelo existente será substituído.
+              </div>
+              <ul className="repo-replace-list">
+                {(nomesSubstituidos.length ? nomesSubstituidos : [String(arquivoUpload?.name || '')]).map((nome) => (
+                  <li key={`substituir-${nome}`}>{nome}</li>
+                ))}
+              </ul>
+              <div className="repo-confirm-actions">
+                <button
+                  type="button"
+                  className="repo-delete-cancel-btn"
+                  onClick={() => setConfirmarSubstituicao({ open: false, substituidos: [] })}
+                  disabled={uploading}
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="button"
+                  className="btn-danger"
+                  onClick={() => void onUploadArquivo(true)}
+                  disabled={uploading}
+                >
+                  {uploading ? 'Substituindo...' : 'Confirmar substituição'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {confirmarExclusaoModal.open ? (
+        <div className="pesquisa-modal-backdrop">
+          <div className="pesquisa-modal repo-confirm-modal">
+            <div className="pesquisa-modal-head">
+              <div>
+                <h4>{confirmarExclusaoModal.nomeModelo || 'Confirmar exclusão'}</h4>
+                <p>Digite o nome completo do modelo para confirmar a exclusão.</p>
+              </div>
+              <button
+                type="button"
+                className="pesquisa-modal-close"
+                onClick={onCancelarModalExclusao}
+                disabled={deleting}
+              >
+                Fechar
+              </button>
+            </div>
+            <form
+              className="repo-confirm-modal-body"
+              onSubmit={(event) => {
+                event.preventDefault()
+                void onConfirmarExclusaoModal()
+              }}
+            >
+              <label className="repo-delete-typing-field">
+                Nome do modelo
+                <input
+                  type="text"
+                  value={confirmarExclusaoModal.digitado}
+                  onChange={(event) => setConfirmarExclusaoModal((prev) => ({ ...prev, digitado: event.target.value }))}
+                  placeholder="Digite exatamente como no título"
+                  autoComplete="off"
+                  disabled={deleting}
+                />
+              </label>
+              {confirmarExclusaoModal.digitado && !exclusaoDigitadaCorreta ? (
+                <div className="repo-delete-typing-hint repo-delete-typing-hint-error">
+                  O texto digitado não corresponde ao nome do modelo.
+                </div>
+              ) : (
+                <div className="repo-delete-typing-hint">
+                  A exclusão será concluída somente quando o nome for digitado exatamente.
+                </div>
+              )}
+              <div className="repo-confirm-actions">
+                <button type="button" className="repo-delete-cancel-btn" onClick={onCancelarModalExclusao} disabled={deleting}>
+                  Cancelar
+                </button>
+                <button type="submit" className="btn-danger" disabled={deleting || !exclusaoDigitadaCorreta}>
+                  {deleting ? 'Excluindo...' : 'Excluir modelo'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
     </div>
   )
 }

frontend/src/styles.css

@@ -253,6 +253,14 @@ textarea {
   }
 }
 
+.repositorio-standalone-panel {
+  border: 1px solid #d1deec;
+  border-radius: 14px;
+  background: #fff;
+  box-shadow: var(--shadow-sm);
+  padding: 14px;
+}
+
 .repo-toolbar {
   display: flex;
   justify-content: space-between;
@@ -274,6 +282,19 @@ textarea {
   gap: 10px;
 }
 
+.repo-table-block {
+  margin-top: 26px;
+}
+
+.repo-refresh-btn {
+  --btn-bg-start: #82bdf0;
+  --btn-bg-end: #66aae8;
+  --btn-border: #5597d3;
+  --btn-shadow-soft: rgba(85, 151, 211, 0.22);
+  --btn-shadow-strong: rgba(85, 151, 211, 0.3);
+  color: #ffffff;
+}
+
 .repo-upload-row,
 .repo-delete-row {
   display: flex;
@@ -282,6 +303,10 @@ textarea {
   gap: 10px;
 }
 
+.repo-upload-row-single input[type="file"] {
+  min-width: 320px;
+}
+
 .repo-delete-confirm {
   display: inline-flex;
   align-items: center;
@@ -320,6 +345,121 @@ textarea {
   color: #48627a;
 }
 
+.repo-col-open,
+.repo-col-delete {
+  width: 68px;
+  text-align: center !important;
+}
+
+.repo-open-btn {
+  min-width: 28px;
+  min-height: 28px;
+  padding: 2px 7px;
+  font-size: 0.85rem;
+  border-radius: 8px;
+  --btn-bg-start: #e9f8ee;
+  --btn-bg-end: #dff3e6;
+  --btn-border: #8ec9a0;
+  --btn-shadow-soft: rgba(46, 138, 83, 0.14);
+  --btn-shadow-strong: rgba(46, 138, 83, 0.2);
+  color: #1b7a40;
+}
+
+.repo-delete-icon-btn {
+  min-width: 28px;
+  min-height: 28px;
+  padding: 2px 6px;
+  border-radius: 8px;
+  --btn-bg-start: #fff4f6;
+  --btn-bg-end: #fee9ed;
+  --btn-border: #e3adb8;
+  --btn-shadow-soft: rgba(178, 47, 64, 0.1);
+  --btn-shadow-strong: rgba(178, 47, 64, 0.16);
+  color: #a63446;
+  font-size: 0.85rem;
+}
+
+.repo-delete-inline-confirm {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.repo-delete-confirm-btn {
+  min-height: 28px;
+  min-width: 64px;
+  padding: 4px 8px;
+  font-size: 0.72rem;
+}
+
+.repo-delete-cancel-btn {
+  min-height: 28px;
+  min-width: 64px;
+  padding: 4px 8px;
+  font-size: 0.72rem;
+  --btn-bg-start: #f7fbff;
+  --btn-bg-end: #edf3fa;
+  --btn-border: #c8d8e8;
+  --btn-shadow-soft: rgba(53, 83, 114, 0.1);
+  --btn-shadow-strong: rgba(53, 83, 114, 0.16);
+  color: #3f5973;
+}
+
+.repo-confirm-modal {
+  width: min(620px, 100%);
+}
+
+.repo-confirm-modal-body {
+  display: grid;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.repo-confirm-text {
+  color: #445d74;
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.repo-replace-list {
+  margin: 0;
+  padding-left: 18px;
+  display: grid;
+  gap: 4px;
+  color: #2f4760;
+  font-size: 0.88rem;
+}
+
+.repo-confirm-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}
+
+.repo-delete-typing-field {
+  display: grid;
+  gap: 6px;
+  color: #334c64;
+  font-size: 0.88rem;
+}
+
+.repo-delete-typing-field input {
+  min-height: 38px;
+}
+
+.repo-delete-typing-hint {
+  color: #5a7288;
+  font-size: 0.82rem;
+}
+
+.repo-delete-typing-hint-error {
+  color: #a63446;
+  font-weight: 700;
+}
+
 .logs-panel {
   border: 1px solid #d8e4f0;
   border-radius: 14px;
@@ -1371,15 +1511,6 @@ button.pesquisa-coluna-remove:hover {
   margin-bottom: 14px;
 }
 
-.btn-pesquisa-expand {
-  --btn-bg-start: #f7fbff;
-  --btn-bg-end: #ecf3fa;
-  --btn-border: #c7d7e6;
-  --btn-shadow-soft: rgba(73, 102, 128, 0.08);
-  --btn-shadow-strong: rgba(73, 102, 128, 0.13);
-  color: #415c74;
-}
-
 .pesquisa-status {
   margin-top: 2px;
 }
@@ -1428,6 +1559,36 @@ button.pesquisa-coluna-remove:hover {
   align-items: stretch;
 }
 
+.pesquisa-opened-model-view {
+  border: 1px solid var(--section-border);
+  border-radius: var(--radius-lg);
+  background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%);
+  padding: 14px;
+  display: grid;
+  gap: 12px;
+  box-shadow: var(--shadow-sm);
+}
+
+.pesquisa-opened-model-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.pesquisa-opened-model-title-wrap h3 {
+  margin: 0;
+  color: #2e4358;
+  font-family: 'Sora', sans-serif;
+  font-size: 1rem;
+}
+
+.pesquisa-opened-model-title-wrap p {
+  margin: 4px 0 0;
+  color: #5f758b;
+  font-size: 0.83rem;
+}
+
 .pesquisa-card {
   border: 1px solid #dbe7f2;
   border-radius: 14px;
@@ -1472,18 +1633,7 @@ button.pesquisa-coluna-remove:hover {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 10px;
-  min-width: 0;
-}
-
-.pesquisa-card-head > div {
-  min-width: 0;
-  flex: 1 1 auto;
-}
-
-.pesquisa-card-head-main {
-  display: grid;
-  gap: 6px;
+  gap: 14px;
   min-width: 0;
 }
 
@@ -1494,6 +1644,7 @@ button.pesquisa-coluna-remove:hover {
   font-size: 0.93rem;
   line-height: 1.32;
   overflow-wrap: anywhere;
+  flex: 1 1 auto;
 }
 
 .pesquisa-card-head p {
@@ -1504,25 +1655,26 @@ button.pesquisa-coluna-remove:hover {
   overflow-wrap: anywhere;
 }
 
-.btn-pesquisa-expand {
+.pesquisa-card-controls {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
   flex: 0 0 auto;
-  min-width: 84px;
-  padding: 6px 10px;
-}
-
-button.btn-pesquisa-expand:hover {
-  transform: none;
-  box-shadow: 0 4px 10px var(--btn-shadow-strong);
+  align-self: center;
 }
 
-.pesquisa-card-head-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  min-width: 0;
-  margin-top: 2px;
+.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;
+  min-height: 32px;
+  padding: 6px 10px;
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
 }
 
 .pesquisa-select-toggle {
@@ -1540,6 +1692,12 @@ button.btn-pesquisa-expand:hover {
   color: #48627b;
 }
 
+.pesquisa-select-toggle-compact {
+  min-height: 32px;
+  padding: 4px 8px;
+  font-size: 0.78rem;
+}
+
 .pesquisa-select-toggle input {
   margin: 0;
 }
@@ -1883,6 +2041,152 @@ button.btn-pesquisa-expand:hover {
   margin-top: 10px;
 }
 
+.avaliacao-beta-groups {
+  gap: 16px;
+}
+
+.avaliacao-beta-flow {
+  display: grid;
+  gap: 14px;
+}
+
+.avaliacao-beta-model-block {
+  display: grid;
+  gap: 10px;
+}
+
+.avaliacao-beta-title {
+  margin: 0;
+  color: #2f465c;
+  font-family: 'Sora', sans-serif;
+  font-size: 1rem;
+}
+
+.avaliacao-beta-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 12px;
+}
+
+.avaliacao-beta-card {
+  border: 1px solid #d7e3ef;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(34, 52, 70, 0.08);
+  padding: 10px 11px;
+  display: grid;
+  gap: 8px;
+}
+
+.avaliacao-beta-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.avaliacao-beta-card-title {
+  display: grid;
+  gap: 1px;
+}
+
+.avaliacao-beta-card-title strong {
+  color: #2f465c;
+  font-family: 'Sora', sans-serif;
+  font-size: 0.87rem;
+}
+
+.avaliacao-beta-card-title span {
+  color: #4f667d;
+  font-size: 0.79rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.avaliacao-beta-card-subtitle {
+  color: #70869b;
+  font-size: 0.75rem;
+}
+
+.avaliacao-beta-card-actions {
+  display: inline-flex;
+  align-items: center;
+}
+
+.avaliacao-beta-delete-btn {
+  min-height: 28px;
+  padding: 3px 8px;
+  font-size: 0.74rem;
+  --btn-bg-start: #fff4f6;
+  --btn-bg-end: #fee9ed;
+  --btn-border: #e3adb8;
+  --btn-shadow-soft: rgba(178, 47, 64, 0.1);
+  --btn-shadow-strong: rgba(178, 47, 64, 0.16);
+  color: #a63446;
+}
+
+.avaliacao-beta-card-base {
+  color: #3c546a;
+  font-size: 0.8rem;
+  border: 1px solid #e3ebf3;
+  border-radius: 8px;
+  background: #fbfdff;
+  padding: 6px 8px;
+}
+
+.avaliacao-beta-base-pill {
+  display: inline-block;
+  border: 1px solid #f2cd91;
+  border-radius: 999px;
+  background: #fff6e8;
+  color: #9a5a00;
+  padding: 1px 8px;
+  font-size: 0.74rem;
+  font-weight: 700;
+}
+
+.avaliacao-beta-vars-list {
+  display: grid;
+  gap: 4px;
+}
+
+.avaliacao-beta-vars-item {
+  display: grid;
+  grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
+  gap: 6px;
+  align-items: center;
+  border: 1px solid #edf2f7;
+  border-radius: 7px;
+  background: #fcfdff;
+  padding: 5px 7px;
+  font-size: 0.78rem;
+}
+
+.avaliacao-beta-vars-item span:first-child {
+  color: #526a80;
+  font-weight: 700;
+}
+
+.avaliacao-beta-vars-item span:last-child {
+  color: #2e475d;
+  text-align: right;
+}
+
+.avaliacao-beta-metrics {
+  display: grid;
+  gap: 3px;
+  color: #40596f;
+  font-size: 0.78rem;
+}
+
+.avaliacao-beta-graus {
+  display: grid;
+  gap: 3px;
+  padding-top: 2px;
+  border-top: 1px solid #ecf2f8;
+  font-size: 0.79rem;
+}
+
 label {
   font-weight: 700;
   color: #394a5e;
@@ -2038,6 +2342,15 @@ button.model-source-back-btn {
   color: #3f5973;
 }
 
+button.model-source-back-btn.model-source-back-btn-danger {
+  --btn-bg-start: #cf3d4f;
+  --btn-bg-end: #b22f40;
+  --btn-border: #a22b3a;
+  --btn-shadow-soft: rgba(162, 43, 58, 0.2);
+  --btn-shadow-strong: rgba(162, 43, 58, 0.26);
+  color: #fff;
+}
+
 .upload-dropzone {
   border: 1px dashed #c5d5e5;
   border-radius: 12px;
@@ -4186,9 +4499,10 @@ button.btn-download-subtle {
     flex-direction: column;
   }
 
-  .pesquisa-card-head-actions {
+  .pesquisa-card-controls {
     width: 100%;
     justify-content: flex-start;
+    align-self: flex-start;
   }
 
   .pesquisa-results-toolbar {