correcoes esteticas

backend/app/core/visualizacao/app.py

@@ -1223,11 +1223,20 @@ def exportar_avaliacoes_excel_viz(estado_avaliacoes):
     return gr.update(value=None, visible=False)
 
 
-def _formatar_badge_completo(pacote):
-    """Retorna HTML do badge combinado: elaborador (esquerda) + variáveis (direita) com flex space-between."""
+def _formatar_badge_completo(pacote, nome_modelo=""):
+    """Retorna HTML do badge no mesmo padrão visual da aba Elaboração."""
     if not pacote:
         return ""
 
+    def _esc(value):
+        return (
+            str(value or "")
+            .replace("&", "&")
+            .replace("<", "&lt;")
+            .replace(">", "&gt;")
+            .replace('"', "&quot;")
+        )
+
     def _data_br(value):
         texto = str(value or "").strip()
         match = re.match(r"^(\d{4})-(\d{2})-(\d{2})$", texto)
@@ -1235,103 +1244,127 @@ def _formatar_badge_completo(pacote):
             return f"{match.group(3)}/{match.group(2)}/{match.group(1)}"
         return texto
 
+    model_name = str(nome_modelo or "").strip() or "-"
+
     periodo = pacote.get("periodo_dados_mercado") or {}
     data_inicial = _data_br(periodo.get("data_inicial"))
     data_final = _data_br(periodo.get("data_final"))
-    periodo_txt = f"{data_inicial} a {data_final}" if data_inicial and data_final else ""
-
-    # --- Lado direito: lista de variáveis ---
-    variaveis_html = ""
-    info = pacote.get("transformacoes", {}).get("info")
-    if info:
-        y_str = info[0]
-        y_parts = y_str.split(": ", 1)
+    periodo_txt = f"{data_inicial} a {data_final}" if data_inicial and data_final else "-"
+
+    info_variaveis = pacote.get("transformacoes", {}).get("info") or []
+    y_nome = ""
+    y_transf = ""
+    x_itens: list[tuple[str, str]] = []
+    if info_variaveis:
+        y_parts = str(info_variaveis[0]).split(": ", 1)
         y_nome = y_parts[0].strip()
         y_transf = y_parts[1].strip() if len(y_parts) > 1 else ""
-        y_transf_display = "" if y_transf in ("(y)", "(x)", "y", "x", "") else y_transf
-        y_badge = (
-            "<span style='background:#cce5ff;color:#004085;border-radius:4px;"
-            f"padding:3px 10px;font-size:1em;font-weight:600;'>{y_nome}"
-            + (f" <span style='font-weight:400;font-size:0.85em;'>{y_transf_display}</span>"
-               if y_transf_display else "")
-            + "</span>"
-        )
-        x_badges = []
-        for item in info[1:]:
-            parts = item.split(": ", 1)
+        for item in info_variaveis[1:]:
+            parts = str(item).split(": ", 1)
             nome = parts[0].strip()
             transf = parts[1].strip() if len(parts) > 1 else ""
-            transf_display = "" if transf in ("(x)", "(y)", "x", "y", "") else transf
-            badge = (
-                "<span style='background:#ced4da;color:#343a40;border-radius:4px;"
-                f"padding:3px 8px;font-size:1em;display:inline-block;margin:2px 3px 2px 0;'>{nome}"
-                + (f" <span style='color:#6c757d;font-size:1em;'>{transf_display}</span>"
-                   if transf_display else "")
-                + "</span>"
-            )
-            x_badges.append(badge)
-        variaveis_html = (
-            "<div style='font-size:0.9em;line-height:2;'>"
-            "<div><span style='font-weight:600;color:#495057;margin-right:8px;font-size:1.1em;display:inline-block;min-width:190px;'>Variável Dependente:</span>"
-            + y_badge + "</div>"
-            + "<div style='margin-top:4px;'>"
-            "<span style='font-weight:600;color:#495057;margin-right:8px;font-size:1.1em;display:inline-block;min-width:190px;'>Variáveis Independentes:</span>"
-            + "".join(x_badges) + "</div>"
+            x_itens.append((nome, transf))
+
+    y_transf_display = "" if y_transf in ("(y)", "(x)", "y", "x", "") else y_transf
+    y_html = (
+        "<div class='section1-empty-hint'>Variável dependente não encontrada no modelo carregado.</div>"
+        if not y_nome
+        else (
+            "<div class='variavel-badge-line'>"
+            "<span class='variavel-badge-label'>Dependente:</span>"
+            "<span class='variavel-chip variavel-chip-y variavel-chip-inline'>"
+            + _esc(y_nome)
             + (
-                "<div style='margin-top:6px;'>"
-                "<span style='font-weight:600;color:#495057;margin-right:8px;font-size:1.1em;display:inline-block;min-width:190px;'>Período dos dados de mercado:</span>"
-                f"<span style='color:#2f4458;'>{periodo_txt}</span>"
-                "</div>"
-                if periodo_txt else ""
+                f"<span class='variavel-chip-transform'> {_esc(y_transf_display)}</span>"
+                if y_transf_display
+                else ""
             )
-            + "</div>"
-        )
-    elif periodo_txt:
-        variaveis_html = (
-            "<div style='font-size:0.95em;line-height:1.7;'>"
-            "<span style='font-weight:600;color:#495057;margin-right:8px;display:inline-block;min-width:190px;'>Período dos dados de mercado:</span>"
-            f"<span style='color:#2f4458;'>{periodo_txt}</span>"
-            "</div>"
+            + "</span></div>"
         )
+    )
 
-    # --- Lado esquerdo: elaborador ---
-    elaborador = pacote.get("elaborador")
-    nome = elaborador.get("nome_completo", "") if elaborador else ""
-    if not nome:
-        # Sem elaborador: só exibe variáveis (sem flex desnecessário)
-        if not variaveis_html:
-            return ""
-        return (
-            '<div style="background:#e9ecef; border-left:5px solid #6c757d; border-radius:6px; '
-            'padding:14px 18px; margin-top:8px;">'
-            + variaveis_html
-            + '</div>'
+    if x_itens:
+        x_badges = []
+        for nome, transf in x_itens:
+            transf_display = "" if transf in ("(x)", "(y)", "x", "y", "") else transf
+            x_badges.append(
+                "<span class='variavel-chip'>"
+                + _esc(nome)
+                + (
+                    f"<span class='variavel-chip-transform'> {_esc(transf_display)}</span>"
+                    if transf_display
+                    else ""
+                )
+                + "</span>"
+            )
+        x_html = (
+            "<div class='variavel-badge-line'>"
+            "<span class='variavel-badge-label'>Independentes:</span>"
+            "<div class='variavel-chip-wrap'>"
+            + "".join(x_badges)
+            + "</div></div>"
         )
+    else:
+        x_html = "<div class='section1-empty-hint'>Sem variáveis independentes no modelo carregado.</div>"
 
-    cargo = elaborador.get("cargo", "")
-    conselho = elaborador.get("conselho", "")
-    num = elaborador.get("numero_conselho", "")
-    estado = elaborador.get("estado_conselho", "")
-    matricula = elaborador.get("matricula_sem_digito", "")
-    lotacao = elaborador.get("lotacao", "")
-    linha2 = f"{cargo} · {conselho}/{estado} {num}".strip(" ·") if cargo else ""
-    linha3 = f"Matrícula: {matricula} · {lotacao}".strip(" ·") if matricula else ""
-
-    elab_html = (
-        '<div style="line-height:1.8;">'
-        f'<span style="display:block; font-size:1.05em; font-weight:600; color:#212529; margin-bottom:4px;">{nome}</span>'
-        + (f'<span style="display:block; font-size:0.95em;">{linha2}</span>' if linha2 else '')
-        + (f'<span style="display:block; font-size:0.9em; color:#6c757d;">{linha3}</span>' if linha3 else '')
-        + '</div>'
+    periodo_html = (
+        "<div class='variavel-badge-line'>"
+        "<span class='variavel-badge-label'>Período dados:</span>"
+        f"<span class='variavel-badge-value'>{_esc(periodo_txt)}</span>"
+        "</div>"
+    )
+
+    elaborador = pacote.get("elaborador") or {}
+    nome_elaborador = str(elaborador.get("nome_completo") or "").strip()
+    cargo = str(elaborador.get("cargo") or "").strip()
+    conselho = str(elaborador.get("conselho") or "").strip()
+    numero = str(elaborador.get("numero_conselho") or "").strip()
+    estado = str(elaborador.get("estado_conselho") or "").strip()
+    matricula = str(elaborador.get("matricula_sem_digito") or "").strip()
+    lotacao = str(elaborador.get("lotacao") or "").strip()
+
+    conselho_reg = ""
+    if conselho and estado and numero:
+        conselho_reg = f"{conselho}/{estado} {numero}"
+    elif conselho or numero or estado:
+        conselho_reg = " ".join(part for part in [conselho, numero, estado] if part)
+
+    meta = [cargo, conselho_reg, f"Matrícula {matricula}" if matricula else "", lotacao]
+    meta_txt = " | ".join(part for part in meta if part)
+
+    elaborador_html = (
+        "<div class='section1-empty-hint'>Elaborador não informado no arquivo.</div>"
+        if not nome_elaborador
+        else (
+            f"<div class='elaborador-badge-name'>{_esc(nome_elaborador)}</div>"
+            + (f"<div class='elaborador-badge-meta'>{_esc(meta_txt)}</div>" if meta_txt else "")
+        )
     )
 
     return (
-        '<div style="background:#e9ecef; border-left:5px solid #6c757d; border-radius:6px; '
-        'padding:14px 18px; color:#495057; margin-top:8px; display:flex; '
-        'justify-content:space-between; align-items:flex-start; gap:24px;">'
-        + elab_html
-        + (f'<div>{variaveis_html}</div>' if variaveis_html else '')
-        + '</div>'
+        "<div class='subpanel section1-group'>"
+        "<h4>Informações do modelo</h4>"
+        "<div class='modelo-info-card'>"
+        "<div class='modelo-info-split'>"
+        "<div class='modelo-info-col'>"
+        "<div class='modelo-info-stack-block'>"
+        "<div class='elaborador-badge-title'>NOME DO MODELO:</div>"
+        f"<div class='elaborador-badge-name'>{_esc(model_name)}</div>"
+        "</div>"
+        "<div class='modelo-info-stack-block'>"
+        "<div class='elaborador-badge-title'>ELABORADO POR:</div>"
+        + elaborador_html +
+        "</div>"
+        "</div>"
+        "<div class='modelo-info-col modelo-info-col-vars'>"
+        "<div class='elaborador-badge-title'>Variáveis selecionadas:</div>"
+        + y_html +
+        x_html +
+        periodo_html +
+        "</div>"
+        "</div>"
+        "</div>"
+        "</div>"
     )
 
 

backend/app/services/elaboracao_service.py

@@ -545,6 +545,7 @@ def load_dai_for_elaboracao(session: SessionState, caminho_arquivo: str) -> dict
     return {
         "status": msg,
         "tipo": "dai",
+        "nome_modelo": Path(caminho_arquivo).stem,
         **base,
         "selection": selection_payload,
         "fit": fit_payload,

backend/app/services/visualizacao_service.py

@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-import os
+from pathlib import Path
 from typing import Any
 
 import numpy as np
@@ -51,12 +51,13 @@ def carregar_modelo(session: SessionState, caminho_arquivo: str) -> dict[str, An
     session.dados_visualizacao = None
     session.avaliacoes_visualizacao = []
 
-    status = f"Modelo carregado: {os.path.basename(caminho_arquivo)}"
-    badge_html = viz_app._formatar_badge_completo(pacote)
+    nome_modelo = Path(caminho_arquivo).stem
+    badge_html = viz_app._formatar_badge_completo(pacote, nome_modelo=nome_modelo)
 
     return {
-        "status": status,
+        "status": "",
         "badge_html": badge_html,
+        "nome_modelo": nome_modelo,
     }
 
 

frontend/src/components/ElaboracaoTab.jsx

@@ -480,6 +480,7 @@ function buildLoadedModelInfo(resp) {
 
   const contexto = resp?.contexto || {}
   const fit = resp?.fit || {}
+  const nomeModelo = String(resp?.nome_modelo || '').trim()
   const colunaY = String(contexto.coluna_y || '').trim()
   const colunasX = Array.isArray(contexto.colunas_x) ? contexto.colunas_x.map((item) => String(item)) : []
   const transformacoesX = fit && typeof fit.transformacoes_x === 'object' && fit.transformacoes_x !== null
@@ -487,6 +488,7 @@ function buildLoadedModelInfo(resp) {
     : {}
 
   return {
+    nome_modelo: nomeModelo,
     coluna_y: colunaY,
     colunas_x: colunasX,
     transformacao_y: fit.transformacao_y || contexto.transformacao_y || '(x)',
@@ -2146,55 +2148,62 @@ export default function ElaboracaoTab({ sessionId }) {
           <div className="subpanel section1-group">
             <h4>Informações do modelo</h4>
             {modeloCarregadoInfo ? (
-              <div className="modelo-info-card">
-                <div className="modelo-info-split">
-                  <div className="modelo-info-col">
-                    <div className="elaborador-badge-title">Modelo elaborado por:</div>
-                    {elaborador?.nome_completo ? (
-                      <div className="elaborador-badge-name">{elaborador.nome_completo}</div>
-                    ) : (
-                      <div className="section1-empty-hint">Elaborador não informado no arquivo.</div>
-                    )}
-                    {elaboradorMeta.length > 0 && elaborador?.nome_completo ? (
-                      <div className="elaborador-badge-meta">{elaboradorMeta.join(' | ')}</div>
-                    ) : null}
-                  </div>
+                <div className="modelo-info-card">
+                  <div className="modelo-info-split">
+                    <div className="modelo-info-col">
+                      <div className="modelo-info-stack-block">
+                        <div className="elaborador-badge-title">NOME DO MODELO:</div>
+                        <div className="elaborador-badge-name">{modeloCarregadoInfo.nome_modelo || '-'}</div>
+                      </div>
 
-                  <div className="modelo-info-col modelo-info-col-vars">
-                    <div className="elaborador-badge-title">Variáveis do modelo carregado</div>
-                    {modeloCarregadoInfo.coluna_y ? (
-                      <div className="variavel-badge-line">
-                        <span className="variavel-badge-label">Dependente:</span>
-                        <span className="variavel-chip variavel-chip-y variavel-chip-inline">
-                          {modeloCarregadoInfo.coluna_y}
-                          <span className="variavel-chip-transform">{` ${transformacaoYModeloBadge}`}</span>
-                        </span>
+                      <div className="modelo-info-stack-block">
+                        <div className="elaborador-badge-title">ELABORADO POR:</div>
+                        {elaborador?.nome_completo ? (
+                          <div className="elaborador-badge-name">{elaborador.nome_completo}</div>
+                        ) : (
+                          <div className="section1-empty-hint">Elaborador não informado no arquivo.</div>
+                        )}
+                        {elaboradorMeta.length > 0 && elaborador?.nome_completo ? (
+                          <div className="elaborador-badge-meta">{elaboradorMeta.join(' | ')}</div>
+                        ) : null}
                       </div>
-                    ) : (
-                      <div className="section1-empty-hint">Variável dependente não encontrada no modelo carregado.</div>
-                    )}
-                    {variaveisIndependentesModeloBadge.length > 0 ? (
-                      <div className="variavel-badge-line">
-                        <span className="variavel-badge-label">Independentes:</span>
-                        <div className="variavel-chip-wrap">
-                          {variaveisIndependentesModeloBadge.map((item) => (
-                            <span key={`ind-${item.coluna}`} className="variavel-chip">
-                              {item.coluna}
-                              <span className="variavel-chip-transform">{` ${item.transformacao}`}</span>
-                            </span>
-                          ))}
+                    </div>
+
+                    <div className="modelo-info-col modelo-info-col-vars">
+                      <div className="elaborador-badge-title">Variáveis selecionadas:</div>
+                      {modeloCarregadoInfo.coluna_y ? (
+                        <div className="variavel-badge-line">
+                          <span className="variavel-badge-label">Dependente:</span>
+                          <span className="variavel-chip variavel-chip-y variavel-chip-inline">
+                            {modeloCarregadoInfo.coluna_y}
+                            <span className="variavel-chip-transform">{` ${transformacaoYModeloBadge}`}</span>
+                          </span>
+                        </div>
+                      ) : (
+                        <div className="section1-empty-hint">Variável dependente não encontrada no modelo carregado.</div>
+                      )}
+                      {variaveisIndependentesModeloBadge.length > 0 ? (
+                        <div className="variavel-badge-line">
+                          <span className="variavel-badge-label">Independentes:</span>
+                          <div className="variavel-chip-wrap">
+                            {variaveisIndependentesModeloBadge.map((item) => (
+                              <span key={`ind-${item.coluna}`} className="variavel-chip">
+                                {item.coluna}
+                                <span className="variavel-chip-transform">{` ${item.transformacao}`}</span>
+                              </span>
+                            ))}
+                          </div>
                         </div>
+                      ) : (
+                        <div className="section1-empty-hint">Sem variáveis independentes no modelo carregado.</div>
+                      )}
+                      <div className="variavel-badge-line">
+                        <span className="variavel-badge-label">Período dados:</span>
+                        <span className="variavel-badge-value">{periodoModeloCarregadoTexto}</span>
                       </div>
-                    ) : (
-                      <div className="section1-empty-hint">Sem variáveis independentes no modelo carregado.</div>
-                    )}
-                    <div className="variavel-badge-line">
-                      <span className="variavel-badge-label">Período dados:</span>
-                      <span className="variavel-badge-value">{periodoModeloCarregadoTexto}</span>
                     </div>
                   </div>
                 </div>
-              </div>
             ) : (
               <div className="section1-empty-hint">Carregue um modelo .dai para visualizar os badges do elaborador.</div>
             )}

frontend/src/components/PesquisaTab.jsx

@@ -364,7 +364,7 @@ export default function PesquisaTab() {
           <PesquisaAdminConfigPanel onSaved={() => void onAdminConfigSalva()} />
         ) : null}
 
-        <div className="pesquisa-fields-grid">
+        <div className="pesquisa-fields-grid pesquisa-top-four-grid">
           <label className="pesquisa-field">
             Contem variavel APP (% APP)
             <select
@@ -394,9 +394,6 @@ export default function PesquisaTab() {
               ))}
             </select>
           </label>
-        </div>
-
-        <div className="pesquisa-fields-grid pesquisa-avaliando-grid">
           <label className="pesquisa-field">
             Finalidade do imovel
             <TextFieldInput
@@ -418,19 +415,22 @@ export default function PesquisaTab() {
               placeholder="Ex: Centro"
             />
           </label>
+        </div>
 
-          <div className="pesquisa-avaliando-inline pesquisa-avaliando-inline-periodo">
-            <div className="pesquisa-field-pair pesquisa-field-pair-inline">
-              <span className="pesquisa-field-pair-title">Periodo de data do imovel</span>
-              <label className="pesquisa-field">
-                Data inicial
-                <DateFieldInput field="dataMin" value={filters.dataMin} onChange={onFieldChange} />
-              </label>
-              <label className="pesquisa-field">
-                Data final
-                <DateFieldInput field="dataMax" value={filters.dataMax} onChange={onFieldChange} />
-              </label>
-            </div>
+        <div className="pesquisa-avaliando-bottom-grid">
+          <div className="pesquisa-field-pair pesquisa-field-pair-inline pesquisa-avaliando-periodo-pair">
+            <span className="pesquisa-field-pair-title">Período de referência do imóvel (deve estar contido no período de dados de mercado do modelo)</span>
+            <label className="pesquisa-field">
+              Data inicial
+              <DateFieldInput field="dataMin" value={filters.dataMin} onChange={onFieldChange} />
+            </label>
+            <label className="pesquisa-field">
+              Data final
+              <DateFieldInput field="dataMax" value={filters.dataMax} onChange={onFieldChange} />
+            </label>
+          </div>
+
+          <div className="pesquisa-avaliando-stack pesquisa-avaliando-bottom-stack">
             <label className="pesquisa-field">
               Area do imovel
               <NumberFieldInput field="avalArea" value={filters.avalArea} onChange={onFieldChange} placeholder="0" />

frontend/src/components/VisualizacaoTab.jsx

@@ -431,7 +431,7 @@ export default function VisualizacaoTab({ sessionId }) {
           </div>
         </div>
         {status ? <div className="status-line">{status}</div> : null}
-        {badgeHtml ? <div dangerouslySetInnerHTML={{ __html: badgeHtml }} /> : null}
+        {badgeHtml ? <div className="upload-badge-block" dangerouslySetInnerHTML={{ __html: badgeHtml }} /> : null}
       </SectionBlock>
 
       {dados ? (
@@ -452,7 +452,7 @@ export default function VisualizacaoTab({ sessionId }) {
           <div className="inner-tab-panel">
             {activeInnerTab === 'mapa' ? (
               <>
-                <div className="row compact">
+                <div className="row compact visualizacao-mapa-controls">
                   <label>Variável no mapa</label>
                   <select value={mapaVar} onChange={(e) => onMapChange(e.target.value)}>
                     {mapaChoices.map((choice) => (
@@ -518,6 +518,12 @@ export default function VisualizacaoTab({ sessionId }) {
 
             {activeInnerTab === 'avaliacao' ? (
               <>
+                <div className="equation-formats-section avaliacao-equacao-section">
+                  <h5>Equação (estilo SAB)</h5>
+                  <div className="equation-box equation-box-plain">
+                    {equacoes?.excel_sab || 'Equação indisponível.'}
+                  </div>
+                </div>
                 <div className="avaliacao-grid" key={`avaliacao-grid-viz-${avaliacaoFormVersion}`}>
                   {camposAvaliacao.map((campo) => (
                     <div key={`campo-${campo.coluna}`} className="avaliacao-card">

frontend/src/styles.css

@@ -727,6 +727,23 @@ textarea {
   margin-top: 6px;
 }
 
+.visualizacao-mapa-controls {
+  margin-bottom: 28px;
+}
+
+.visualizacao-mapa-controls + .map-frame,
+.visualizacao-mapa-controls + .empty-box {
+  margin-top: 10px;
+}
+
+.avaliacao-equacao-section {
+  margin-bottom: 12px;
+}
+
+.avaliacao-equacao-section h5 {
+  margin: 0 0 8px;
+}
+
 .placeholder-section .empty-box {
   border-style: solid;
 }
@@ -909,23 +926,35 @@ button.pesquisa-otica-btn.active:hover {
   max-width: none;
 }
 
-.pesquisa-avaliando-grid {
+.pesquisa-top-four-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   align-items: end;
 }
 
-.pesquisa-avaliando-inline {
-  grid-column: 1 / -1;
+.pesquisa-avaliando-bottom-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px 14px;
+  margin-bottom: 14px;
+  align-items: start;
 }
 
-.pesquisa-avaliando-inline-periodo {
-  grid-template-columns: minmax(280px, 1.45fr) repeat(2, minmax(0, 1fr));
-  align-items: end;
+.pesquisa-avaliando-stack {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  align-items: start;
 }
 
-.pesquisa-avaliando-inline-periodo .pesquisa-field-pair {
+.pesquisa-avaliando-periodo-pair {
+  margin: 0;
+}
+
+.pesquisa-avaliando-bottom-stack {
+  gap: 12px;
+}
+
+.pesquisa-avaliando-bottom-grid .pesquisa-field-pair {
   grid-column: auto;
   margin: 0;
 }
@@ -1657,6 +1686,10 @@ button.btn-upload-select {
   word-break: break-word;
 }
 
+.upload-badge-block {
+  margin-top: 14px;
+}
+
 .coords-section-groups {
   display: grid;
   gap: 14px;
@@ -1756,6 +1789,10 @@ button.btn-upload-select {
   padding: 12px 14px;
 }
 
+.modelo-info-stack-block + .modelo-info-stack-block {
+  margin-top: 10px;
+}
+
 .modelo-info-col + .modelo-info-col {
   border-left: 1px solid #dde7f1;
 }
@@ -3356,7 +3393,7 @@ button.btn-download-subtle {
     grid-template-columns: 1fr;
   }
 
-  .pesquisa-avaliando-inline {
+  .pesquisa-avaliando-bottom-grid {
     grid-template-columns: 1fr;
   }