Refine elaboracao UI layout

backend/app/core/elaboracao/formatadores.py

@@ -221,7 +221,26 @@ def _renderizar_secao_micro(titulo, resultados_dict, secao_tipo="padrao"):
     html = f'<div class="section-title-orange micro-group-title">{titulo}</div>'
     html += f'<div class="{grid_class}">'
 
-    for coluna, info in resultados_dict.items():
+    def ordenar_categoria(item):
+        return (
+            1 if item.get("valido") else 0,
+            int(item.get("ni", 0) or 0),
+            str(item.get("categoria", "")),
+        )
+
+    def ordenar_variavel(item):
+        coluna, info = item
+        categorias = info.get("categorias") or []
+        falhas = [cat for cat in categorias if not cat.get("valido")]
+        todos_ni = [int(cat.get("ni", 0) or 0) for cat in categorias]
+        return (
+            1 if info.get("valido") else 0,
+            -len(falhas),
+            min(todos_ni) if todos_ni else 0,
+            str(coluna),
+        )
+
+    for coluna, info in sorted(resultados_dict.items(), key=ordenar_variavel):
         status = "✅" if info["valido"] else "⚠️"
         status_class = "micro-ok" if info["valido"] else "micro-warn"
         categorias_lista = info.get("categorias") or []
@@ -230,7 +249,7 @@ def _renderizar_secao_micro(titulo, resultados_dict, secao_tipo="padrao"):
                 f'<div class="micro-msg {"micro-msg-ok" if item.get("valido") else "micro-msg-fail"}">'
                 f'{escape(str(item.get("mensagem", "")))}'
                 f'</div>'
-                for item in categorias_lista
+                for item in sorted(categorias_lista, key=ordenar_categoria)
             )
         else:
             mensagens_lista = info["mensagens"]
@@ -313,14 +332,11 @@ def formatar_outliers_anteriores_html(n_outliers, lista_indices):
     """Formata informações de outliers excluídos como HTML card."""
     lista_str = lista_indices if lista_indices else "Nenhum"
     return f'''
-    <div style="display: flex; gap: 16px; align-items: baseline;
-                padding: 10px 16px; background: var(--background-fill-secondary, #f8f9fa);
-                border-radius: 8px; border: 1px solid var(--border-color-primary, #e2e8f0);
-                flex-wrap: wrap;">
-        <span style="font-weight: 600; color: var(--body-text-color, #495057); white-space: nowrap;">
+    <div class="outliers-previous-card">
+        <span class="outliers-previous-count">
             {n_outliers} outlier(s) excluídos do modelo ajustado
         </span>
-        <span style="color: var(--body-text-color-subdued, #6c757d); font-size: 0.92em;">
+        <span class="outliers-previous-indices">
             Índices: {lista_str}
         </span>
     </div>'''

backend/app/services/elaboracao_service.py

@@ -1591,6 +1591,7 @@ def fit_model(
     tabela_outliers_excluidos = _montar_tabela_outliers_excluidos(session)
 
     return {
+        "diagnosticos": sanitize_value(resultado["diagnosticos"]),
         "diagnosticos_html": diagnosticos_html,
         "transformacao_y": session.transformacao_y,
         "transformacoes_x": sanitize_value(session.transformacoes_x),

frontend/src/components/ElaboracaoTab.jsx

@@ -234,6 +234,19 @@ function formatCurrencyBr(value) {
   return num.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })
 }
 
+function Section14MetricRows({ rows }) {
+  return (
+    <div className="section14-field-grid">
+      {(rows || []).map((row) => (
+        <div key={row.label} className="section14-field-row">
+          <span className="section14-field-label">{row.label}</span>
+          <span className="section14-field-value">{row.value}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 function formatarValorTabelaKnn(coluna, valor) {
   if (valor === null || valor === undefined || valor === '') return '-'
   const nome = String(coluna || '').toLowerCase()
@@ -690,6 +703,124 @@ function buildScatterPanelFigureMap(panels) {
   return mapa
 }
 
+function ScatterPlotCarousel({
+  items,
+  indexedFigureMap,
+  onRequestIndexedFigure,
+  itemKeyPrefix,
+  sectionFilePrefix,
+  onDownloadFigure,
+  onDownloadAll,
+  loading = false,
+  downloadingAssets = false,
+}) {
+  const [page, setPage] = useState(0)
+  const pageSize = 2
+  const safeItems = Array.isArray(items) ? items : []
+  const totalPages = Math.max(1, Math.ceil(safeItems.length / pageSize))
+  const itemsSignature = safeItems.map((item) => String(item?.id || item?.label || '')).join('|')
+  const startIndex = Math.min(page, totalPages - 1) * pageSize
+  const visibleItems = safeItems.slice(startIndex, startIndex + pageSize)
+
+  useEffect(() => {
+    setPage(0)
+  }, [itemsSignature])
+
+  useEffect(() => {
+    setPage((current) => Math.min(current, totalPages - 1))
+  }, [totalPages])
+
+  if (safeItems.length === 0) {
+    return <div className="empty-box">Grafico indisponivel.</div>
+  }
+
+  function getPairTitle(pageIndex) {
+    const pair = safeItems.slice(pageIndex * pageSize, (pageIndex * pageSize) + pageSize)
+    return pair.map((item) => String(item?.label || item?.title || '').trim()).filter(Boolean).join(' e ')
+  }
+
+  function getPairLabel(pageIndex) {
+    const title = getPairTitle(pageIndex)
+    if (title) return title
+    const pairStart = (pageIndex * pageSize) + 1
+    const pairEnd = Math.min(pairStart + pageSize - 1, safeItems.length)
+    return pairStart === pairEnd ? String(pairStart) : `${pairStart}-${pairEnd}`
+  }
+
+  function buildFileNameBase(item, itemIndex) {
+    return `${sectionFilePrefix}_${sanitizeFileName(item?.label, `dispersao_${itemIndex + 1}`)}`
+  }
+
+  return (
+    <div className="scatter-carousel">
+      {typeof onDownloadAll === 'function' && safeItems.length > 1 ? (
+        <div className="scatter-carousel-actions">
+          <button
+            type="button"
+            className="btn-download-subtle scatter-carousel-download-all"
+            onClick={onDownloadAll}
+            disabled={loading || downloadingAssets || safeItems.length === 0}
+          >
+            Baixar todos os gráficos
+          </button>
+        </div>
+      ) : null}
+      {totalPages > 1 ? (
+        <div className="scatter-carousel-pills" aria-label="Escolher dupla de gráficos">
+          {Array.from({ length: totalPages }, (_, pageIndex) => {
+            const pairStart = (pageIndex * pageSize) + 1
+            const pairEnd = Math.min(pairStart + pageSize - 1, safeItems.length)
+            const active = pageIndex === page
+            return (
+              <button
+                key={`scatter-pair-${pairStart}-${pairEnd}`}
+                type="button"
+                className={`scatter-carousel-pill${active ? ' is-active' : ''}`}
+                onClick={() => setPage(pageIndex)}
+                title={getPairTitle(pageIndex)}
+                aria-current={active ? 'true' : undefined}
+              >
+                {getPairLabel(pageIndex)}
+              </button>
+            )
+          })}
+        </div>
+      ) : null}
+      <div className="scatter-carousel-track">
+        {visibleItems.map((item, visibleIndex) => {
+          const itemIndex = startIndex + visibleIndex
+          const fileNameBase = buildFileNameBase(item, itemIndex)
+          return (
+          <PlotFigure
+            key={`${itemKeyPrefix}-${item.id}`}
+            figure={item.figure}
+            indexedFigure={indexedFigureMap?.get(String(item.label || '').trim()) || null}
+            onRequestIndexedFigure={onRequestIndexedFigure}
+            title={item.title}
+            subtitle={item.subtitle}
+            showPointIndexToggle
+            forceHideLegend
+            className="plot-stretch"
+            lazy
+            headerActions={typeof onDownloadFigure === 'function' ? (
+              <button
+                type="button"
+                className="btn-download-subtle plot-card-download-btn"
+                title={item.legenda || item.label || 'Fazer download'}
+                onClick={() => onDownloadFigure(item.figure, fileNameBase, { forceHideLegend: true })}
+                disabled={loading || downloadingAssets || !item.figure}
+              >
+                Fazer download
+              </button>
+            ) : null}
+          />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
 function formatConselhoRegistro(elaborador) {
   if (!elaborador) return ''
   const conselho = String(elaborador.conselho || '').trim()
@@ -945,6 +1076,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
   const [section11LocksOpen, setSection11LocksOpen] = useState(false)
   const [section10ManualOpen, setSection10ManualOpen] = useState(false)
   const [section6EditOpen, setSection6EditOpen] = useState(true)
+  const [section14Tab, setSection14Tab] = useState('diagnosticos')
 
   const [fit, setFit] = useState(null)
   const [dispersaoEixoX, setDispersaoEixoX] = useState('transformado')
@@ -1012,6 +1144,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
   const [sectionsMountKey, setSectionsMountKey] = useState(0)
   const [renderedSectionSteps, setRenderedSectionSteps] = useState(() => ['1'])
   const [visibleSectionSteps, setVisibleSectionSteps] = useState(() => ['1'])
+  const [currentSectionStep, setCurrentSectionStep] = useState('1')
   const visibleSectionStepsRef = useRef(new Set(['1']))
   const elaboracaoShareHref = repoModeloSelecionado
     ? buildElaboracaoModeloLink(repoModeloSelecionado)
@@ -1279,6 +1412,68 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
 
     return faixas
   }, [fit?.tabela_metricas?.rows, fit?.variaveis_filtro])
+  const section14DiagnosticosGerais = useMemo(() => {
+    const diagnosticos = fit?.diagnosticos || {}
+    return [
+      { label: 'Número de observações', value: formatNumberBr(diagnosticos.n, 0) },
+      { label: 'Número de variáveis independentes', value: formatNumberBr(diagnosticos.k, 0) },
+      { label: 'Desvio padrão dos resíduos', value: formatMetric4(diagnosticos.desvio_padrao_residuos) },
+      { label: 'MSE', value: formatMetric4(diagnosticos.mse) },
+      { label: 'R²', value: formatMetric4(diagnosticos.r2) },
+      { label: 'R² ajustado', value: formatMetric4(diagnosticos.r2_ajustado) },
+      { label: 'Correlação Pearson', value: formatMetric4(diagnosticos.r_pearson) },
+    ]
+  }, [fit?.diagnosticos])
+  const section14Testes = useMemo(() => {
+    const diagnosticos = fit?.diagnosticos || {}
+    return [
+      {
+        id: 'f',
+        label: 'Teste F',
+        rows: [
+          { label: 'Estatística F', value: formatMetric4(diagnosticos.Fc) },
+          { label: 'P-valor', value: formatMetric4(diagnosticos.p_valor_F) },
+          { label: 'Interpretação', value: diagnosticos.interp_F || '-' },
+        ],
+      },
+      {
+        id: 'ks',
+        label: 'Normalidade KS',
+        rows: [
+          { label: 'Estatística KS', value: formatMetric4(diagnosticos.ks_stat) },
+          { label: 'P-valor', value: formatMetric4(diagnosticos.ks_p) },
+          { label: 'Interpretação', value: diagnosticos.interp_KS || '-' },
+        ],
+      },
+      {
+        id: 'curva',
+        label: 'Curva normal',
+        rows: [
+          { label: 'Percentuais atingidos', value: diagnosticos.perc_resid || '-' },
+          { label: 'Ideal 68%', value: 'aceitável entre 64% e 75%' },
+          { label: 'Ideal 90%', value: 'aceitável entre 88% e 95%' },
+          { label: 'Ideal 95%', value: 'aceitável entre 95% e 100%' },
+        ],
+      },
+      {
+        id: 'dw',
+        label: 'Durbin-Watson',
+        rows: [
+          { label: 'Estatística DW', value: formatMetric4(diagnosticos.dw) },
+          { label: 'Interpretação', value: diagnosticos.interp_DW || '-' },
+        ],
+      },
+      {
+        id: 'bp',
+        label: 'Breusch-Pagan',
+        rows: [
+          { label: 'Estatística LM', value: formatMetric4(diagnosticos.bp_lm) },
+          { label: 'P-valor', value: formatMetric4(diagnosticos.bp_p) },
+          { label: 'Interpretação', value: diagnosticos.interp_BP || '-' },
+        ],
+      },
+    ]
+  }, [fit?.diagnosticos])
   const resumoResiduoPadStats = useMemo(() => {
     const rows = fit?.tabela_metricas?.rows
     if (!Array.isArray(rows) || rows.length === 0) return null
@@ -1416,10 +1611,6 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     if (secao10InterativoSelecionado === 'none' || graficosSecao9Interativo.length === 0) return null
     return graficosSecao9Interativo.find((item) => String(item.label || '') === secao10InterativoSelecionado) || graficosSecao9Interativo[0]
   }, [graficosSecao9Interativo, secao10InterativoSelecionado])
-  const colunasGraficosSecao9 = useMemo(
-    () => Math.max(1, Math.min(3, graficosSecao9.length || 1)),
-    [graficosSecao9.length],
-  )
   const colunasOriginaisDispersao = useMemo(() => {
     const cols = Array.isArray(dados?.columns) ? dados.columns : []
     return cols
@@ -1505,10 +1696,6 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     if (secao13InterativoSelecionado === 'none' || graficosSecao12Interativo.length === 0) return null
     return graficosSecao12Interativo.find((item) => String(item.label || '') === secao13InterativoSelecionado) || graficosSecao12Interativo[0]
   }, [graficosSecao12Interativo, secao13InterativoSelecionado])
-  const colunasGraficosSecao12 = useMemo(
-    () => Math.max(1, Math.min(3, graficosSecao12.length || 1)),
-    [graficosSecao12.length],
-  )
   const secao15DiagnosticoPng = useMemo(
     () => String(fit?.graficos_diagnostico_modo || '') === 'png',
     [fit?.graficos_diagnostico_modo],
@@ -1619,6 +1806,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
     if (typeof window === 'undefined' || typeof document === 'undefined') {
       setRenderedSectionSteps(['1'])
       setVisibleSectionSteps(['1'])
+      setCurrentSectionStep('1')
       visibleSectionStepsRef.current = new Set(['1'])
       return undefined
     }
@@ -1632,6 +1820,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
 
     if (sections.length === 0) {
       setVisibleSectionSteps(['1'])
+      setCurrentSectionStep('1')
       visibleSectionStepsRef.current = new Set(['1'])
       return undefined
     }
@@ -1675,8 +1864,10 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
           .map((section) => section.getAttribute('data-section-step')),
       )
       const normalizedVisible = nextVisible.length > 0 ? nextVisible : [getClosestStepToTop()]
+      const nextCurrentStep = getClosestStepToTop()
       visibleSectionStepsRef.current = new Set(normalizedVisible)
       setVisibleSectionSteps((current) => (isSameSectionStepList(current, normalizedVisible) ? current : normalizedVisible))
+      setCurrentSectionStep((current) => (current === nextCurrentStep ? current : nextCurrentStep))
     }
 
     computeVisibleSteps()
@@ -3944,7 +4135,11 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
 
   return (
     <div ref={elaboracaoRootRef} className="tab-content">
-      <div className={`elaboracao-layout${repoModeloDropdownOpen ? ' is-repo-model-open' : ''}`} style={sideNavDynamicStyle}>
+      <div
+        className={`elaboracao-layout${repoModeloDropdownOpen ? ' is-repo-model-open' : ''}`}
+        style={sideNavDynamicStyle}
+        data-current-section-step={currentSectionStep}
+      >
         <aside className="elaboracao-side-nav" aria-label="Navegação de seções da elaboração">
           <ol className="elaboracao-side-nav-list">
             {ELABORACAO_SECOES_NAV.map((secao) => {
@@ -4567,7 +4762,9 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                     : 'Há outliers excluídos: não'}
                 </div>
                 {outliersAnteriores.length > 0 ? (
-                  <div className="resumo-outliers-box">Índices excluídos: {joinSelection(outliersAnteriores)}</div>
+                  <div className="resumo-outliers-box resumo-outliers-box-scrollable">
+                    Índices excluídos: {joinSelection(outliersAnteriores)}
+                  </div>
                 ) : null}
               </div>
               <div className="download-actions-bar">
@@ -4582,7 +4779,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                   Fazer download
                 </button>
               </div>
-              <DataTable table={dados} maxHeight={540} />
+              <DataTable table={dados} maxHeight={320} />
             </div>
           </SectionBlock>
 
@@ -4710,7 +4907,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                       {colunasX.length}/{colunasXDisponiveis.length} selecionadas
                     </span>
                   </div>
-                  <div className="checkbox-inline-wrap">
+                  <div className="checkbox-inline-wrap checkbox-inline-wrap-scrollable">
                     {colunasXDisponiveis.map((col) => (
                       <label key={`x-${col}`} className="compact-checkbox">
                         <input
@@ -4771,7 +4968,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
 
                 <div className="compact-option-group compact-option-group-codigo">
                   <h4>Variáveis Categóricas Codificadas</h4>
-                  <div className="checkbox-inline-wrap">
+                  <div className="checkbox-inline-wrap checkbox-inline-wrap-scrollable">
                     {colunasX.map((col) => (
                       <label key={`c-${col}`} className="compact-checkbox">
                         <input type="checkbox" checked={codigoAlocado.includes(col)} onChange={() => toggleSelection(setCodigoAlocado, col)} />
@@ -4848,7 +5045,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                   <div className="section6-summary-group">
                     <div className="section6-summary-label">Variáveis categóricas codificadas:</div>
                     {selecaoAplicada.codigo_alocado.length > 0 ? (
-                      <div className="checkbox-inline-wrap">
+                      <div className="checkbox-inline-wrap checkbox-inline-wrap-scrollable">
                         {selecaoAplicada.codigo_alocado.map((coluna) => (
                           <span key={`selected-c-${coluna}`} className="compact-chip">{coluna}</span>
                         ))}
@@ -4952,24 +5149,6 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                 </div>
                 {secao10InterativoSelecionado !== 'none' ? (
                   <>
-                    <div className="download-actions-bar">
-                      <button
-                        type="button"
-                        className="btn-download-subtle"
-                        title={secao10InterativoAtual?.legenda || ''}
-                        onClick={() => {
-                          if (!secao10InterativoAtual) return
-                          void onDownloadFigurePng(
-                            secao10InterativoAtual.figure,
-                            `secao10_${sanitizeFileName(secao10InterativoAtual.label, 'dispersao_interativo')}`,
-                            { forceHideLegend: true },
-                          )
-                        }}
-                        disabled={loading || downloadingAssets || !secao10InterativoAtual?.figure}
-                      >
-                        Fazer download
-                      </button>
-                    </div>
                     {secao10InterativoAtual?.figure ? (
                       <PlotFigure
                         key={`s9-interativo-plot-${secao10InterativoAtual.id}`}
@@ -4982,6 +5161,23 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                         forceHideLegend
                         className="plot-stretch"
                         lazy
+                        headerActions={(
+                          <button
+                            type="button"
+                            className="btn-download-subtle plot-card-download-btn"
+                            title={secao10InterativoAtual?.legenda || ''}
+                            onClick={() => {
+                              void onDownloadFigurePng(
+                                secao10InterativoAtual.figure,
+                                `secao10_${sanitizeFileName(secao10InterativoAtual.label, 'dispersao_interativo')}`,
+                                { forceHideLegend: true },
+                              )
+                            }}
+                            disabled={loading || downloadingAssets || !secao10InterativoAtual?.figure}
+                          >
+                            Fazer download
+                          </button>
+                        )}
                       />
                     ) : (
                       <div className="empty-box">Grafico indisponivel.</div>
@@ -4991,57 +5187,24 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
               </>
             ) : (
               <>
-                <div className="download-actions-bar">
-                  {graficosSecao9.length > 1 ? <span className="download-actions-label">Fazer download:</span> : null}
-                  {graficosSecao9.map((item, idx) => {
-                    const fileBase = `secao10_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`
-                    return (
-                      <button
-                        key={`s9-dl-${item.id}`}
-                        type="button"
-                        className="btn-download-subtle"
-                        title={item.legenda}
-                        onClick={() => onDownloadFigurePng(item.figure, fileBase, { forceHideLegend: true })}
-                        disabled={loading || downloadingAssets || !item.figure}
-                      >
-                        {graficosSecao9.length > 1 ? item.label : 'Fazer download'}
-                      </button>
-                    )
-                  })}
-                  {graficosSecao9.length > 1 ? (
-                    <button
-                      type="button"
-                      className="btn-download-subtle"
-                      onClick={() => onDownloadFiguresPngBatch(
-                        graficosSecao9.map((item, idx) => ({
-                          figure: item.figure,
-                          fileNameBase: `secao10_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`,
-                          forceHideLegend: true,
-                        })),
-                      )}
-                      disabled={loading || downloadingAssets || graficosSecao9.length === 0}
-                    >
-                      Todos
-                    </button>
-                  ) : null}
-                </div>
                 {graficosSecao9.length > 0 ? (
-                  <div className="plot-grid-scatter" style={{ '--plot-cols': colunasGraficosSecao9 }}>
-                    {graficosSecao9.map((item) => (
-                      <PlotFigure
-                        key={`s9-plot-${item.id}`}
-                        figure={item.figure}
-                        indexedFigure={graficosSecao9ComIndicesMap.get(String(item.label || '').trim()) || null}
-                        onRequestIndexedFigure={ensureSecao10GraficoComIndices}
-                        title={item.title}
-                        subtitle={item.subtitle}
-                        showPointIndexToggle
-                        forceHideLegend
-                        className="plot-stretch"
-                        lazy
-                      />
-                    ))}
-                  </div>
+                  <ScatterPlotCarousel
+                    items={graficosSecao9}
+                    indexedFigureMap={graficosSecao9ComIndicesMap}
+                    onRequestIndexedFigure={ensureSecao10GraficoComIndices}
+                    itemKeyPrefix="s9-plot"
+                    sectionFilePrefix="secao10"
+                    onDownloadFigure={onDownloadFigurePng}
+                    onDownloadAll={() => onDownloadFiguresPngBatch(
+                      graficosSecao9.map((item, idx) => ({
+                        figure: item.figure,
+                        fileNameBase: `secao10_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`,
+                        forceHideLegend: true,
+                      })),
+                    )}
+                    loading={loading}
+                    downloadingAssets={downloadingAssets}
+                  />
                 ) : (
                   <div className="empty-box">Grafico indisponivel.</div>
                 )}
@@ -5121,41 +5284,44 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
               </div>
             </div>
             {(selection.busca?.resultados || []).length > 0 ? (
-              <div className="transform-suggestions-grid">
-                {(selection.busca?.resultados || []).map((item, idx) => (
-                  <div key={`sug-${item.rank || idx + 1}`} className="transform-suggestion-card">
-                    <div className="transform-suggestion-head">
-                      <span className="transform-suggestion-rank">#{item.rank || idx + 1}</span>
-                      <div className="transform-suggestion-metrics">
-                        <span className="transform-suggestion-r2">R² = {formatMetric4(item.r2)}</span>
-                        <span className="transform-suggestion-r2adj">R² ajustado = {formatMetric4(item.r2_ajustado)}</span>
-                        <span className={grauBadgeClass(Number(item.grau_f ?? 0))}>
-                          Teste F: {GRAU_LABEL_CURTO[Number(item.grau_f ?? 0)] || 'Sem enq.'}
-                        </span>
+              <div className="section11-suggestions-block">
+                <div className="section11-suggestions-title">Transformações Sugeridas</div>
+                <div className="transform-suggestions-grid">
+                  {(selection.busca?.resultados || []).map((item, idx) => (
+                    <div key={`sug-${item.rank || idx + 1}`} className="transform-suggestion-card">
+                      <div className="transform-suggestion-head">
+                        <span className="transform-suggestion-rank">#{item.rank || idx + 1}</span>
+                        <div className="transform-suggestion-metrics">
+                          <span className="transform-suggestion-r2">R² = {formatMetric4(item.r2)}</span>
+                          <span className="transform-suggestion-r2adj">R² ajustado = {formatMetric4(item.r2_ajustado)}</span>
+                          <span className={grauBadgeClass(Number(item.grau_f ?? 0))}>
+                            Teste F: {GRAU_LABEL_CURTO[Number(item.grau_f ?? 0)] || 'Sem enq.'}
+                          </span>
+                        </div>
                       </div>
-                    </div>
-                    <div className="transform-suggestion-list">
-                      <div className="transform-suggestion-item transform-suggestion-item-y">
-                        <span className="transform-suggestion-col">{`${colunaY || 'Y'} (Y)`}</span>
-                        <span className="transform-suggestion-fn">{item.transformacao_y || '(x)'}</span>
-                        <span className="transform-suggestion-item-note">Dependente</span>
+                      <div className="transform-suggestion-list">
+                        <div className="transform-suggestion-item transform-suggestion-item-y">
+                          <span className="transform-suggestion-col">{`${colunaY || 'Y'} (Y)`}</span>
+                          <span className="transform-suggestion-fn">{item.transformacao_y || '(x)'}</span>
+                          <span className="transform-suggestion-item-note">Dependente</span>
+                        </div>
+                        {Object.entries(item.transformacoes_x || {}).map(([coluna, transf]) => {
+                          const grau = Number(item.graus_coef?.[coluna] ?? 0)
+                          return (
+                            <div key={`scol-${item.rank || idx}-${coluna}`} className="transform-suggestion-item">
+                              <span className="transform-suggestion-col">{coluna}</span>
+                              <span className="transform-suggestion-fn">{transf}</span>
+                              <span className={grauBadgeClass(grau)}>{GRAU_LABEL_CURTO[grau] || 'Sem enq.'}</span>
+                            </div>
+                          )
+                        })}
                       </div>
-                      {Object.entries(item.transformacoes_x || {}).map(([coluna, transf]) => {
-                        const grau = Number(item.graus_coef?.[coluna] ?? 0)
-                        return (
-                          <div key={`scol-${item.rank || idx}-${coluna}`} className="transform-suggestion-item">
-                            <span className="transform-suggestion-col">{coluna}</span>
-                            <span className="transform-suggestion-fn">{transf}</span>
-                            <span className={grauBadgeClass(grau)}>{GRAU_LABEL_CURTO[grau] || 'Sem enq.'}</span>
-                          </div>
-                        )
-                      })}
+                      <button className="btn-adopt-model" onClick={() => onAdoptSuggestion(idx)} disabled={loading}>
+                        Adotar e Ajustar Modelo
+                      </button>
                     </div>
-                    <button className="btn-adopt-model" onClick={() => onAdoptSuggestion(idx)} disabled={loading}>
-                      Adotar e Ajustar Modelo
-                    </button>
-                  </div>
-                ))}
+                  ))}
+                </div>
               </div>
             ) : (
               <div dangerouslySetInnerHTML={{ __html: selection.busca?.html || '' }} />
@@ -5284,7 +5450,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                 Modo PNG automático para mais de {secao13PngPayload?.limiar || fit?.grafico_dispersao_modelo_limiar_png || 1500} pontos. Ao final da seção, podem ser gerados individualmente os gráficos interativos.
               </div>
             ) : null}
-            <div className="row dispersao-config-row">
+            <div className="row dispersao-config-row dispersao-config-panel">
               <div className="dispersao-config-field">
                 <label>Eixo X</label>
                 <select
@@ -5401,7 +5567,7 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                 </div>
                 {secao13InterativoSelecionado !== 'none' ? (
                   <>
-                    <div className="row dispersao-config-row">
+                    <div className="row dispersao-config-row dispersao-config-panel">
                       <div className="dispersao-config-field">
                         <label>Eixo X (interativo)</label>
                         <select
@@ -5489,24 +5655,6 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                         )}
                       </select>
                     </div>
-                    <div className="download-actions-bar">
-                      <button
-                        type="button"
-                        className="btn-download-subtle"
-                        title={secao13InterativoAtual?.legenda || ''}
-                        onClick={() => {
-                          if (!secao13InterativoAtual) return
-                          void onDownloadFigurePng(
-                            secao13InterativoAtual.figure,
-                            `secao13_${sanitizeFileName(secao13InterativoAtual.label, 'dispersao_interativo')}`,
-                            { forceHideLegend: true },
-                          )
-                        }}
-                        disabled={loading || downloadingAssets || !secao13InterativoAtual?.figure}
-                      >
-                        Fazer download
-                      </button>
-                    </div>
                     {secao13InterativoAtual?.figure ? (
                       <PlotFigure
                         key={`s12-interativo-plot-${secao13InterativoAtual.id}`}
@@ -5519,6 +5667,23 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
                         forceHideLegend
                         className="plot-stretch"
                         lazy
+                        headerActions={(
+                          <button
+                            type="button"
+                            className="btn-download-subtle plot-card-download-btn"
+                            title={secao13InterativoAtual?.legenda || ''}
+                            onClick={() => {
+                              void onDownloadFigurePng(
+                                secao13InterativoAtual.figure,
+                                `secao13_${sanitizeFileName(secao13InterativoAtual.label, 'dispersao_interativo')}`,
+                                { forceHideLegend: true },
+                              )
+                            }}
+                            disabled={loading || downloadingAssets || !secao13InterativoAtual?.figure}
+                          >
+                            Fazer download
+                          </button>
+                        )}
                       />
                     ) : (
                       <div className="empty-box">Grafico indisponivel.</div>
@@ -5528,57 +5693,24 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
               </>
             ) : (
               <>
-                <div className="download-actions-bar">
-                  {graficosSecao12.length > 1 ? <span className="download-actions-label">Fazer download:</span> : null}
-                  {graficosSecao12.map((item, idx) => {
-                    const fileBase = `secao13_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`
-                    return (
-                      <button
-                        key={`s12-dl-${item.id}`}
-                        type="button"
-                        className="btn-download-subtle"
-                        title={item.legenda}
-                        onClick={() => onDownloadFigurePng(item.figure, fileBase, { forceHideLegend: true })}
-                        disabled={loading || downloadingAssets || !item.figure}
-                      >
-                        {graficosSecao12.length > 1 ? item.label : 'Fazer download'}
-                      </button>
-                    )
-                  })}
-                  {graficosSecao12.length > 1 ? (
-                    <button
-                      type="button"
-                      className="btn-download-subtle"
-                      onClick={() => onDownloadFiguresPngBatch(
-                        graficosSecao12.map((item, idx) => ({
-                          figure: item.figure,
-                          fileNameBase: `secao13_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`,
-                          forceHideLegend: true,
-                        })),
-                      )}
-                      disabled={loading || downloadingAssets || graficosSecao12.length === 0}
-                    >
-                      Todos
-                    </button>
-                  ) : null}
-                </div>
                 {graficosSecao12.length > 0 ? (
-                  <div className="plot-grid-scatter" style={{ '--plot-cols': colunasGraficosSecao12 }}>
-                    {graficosSecao12.map((item) => (
-                      <PlotFigure
-                        key={`s12-plot-${item.id}`}
-                        figure={item.figure}
-                        indexedFigure={graficosSecao12ComIndicesMap.get(String(item.label || '').trim()) || null}
-                        onRequestIndexedFigure={ensureSecao13GraficoComIndices}
-                        title={item.title}
-                        subtitle={item.subtitle}
-                        showPointIndexToggle
-                        forceHideLegend
-                        className="plot-stretch"
-                        lazy
-                      />
-                    ))}
-                  </div>
+                  <ScatterPlotCarousel
+                    items={graficosSecao12}
+                    indexedFigureMap={graficosSecao12ComIndicesMap}
+                    onRequestIndexedFigure={ensureSecao13GraficoComIndices}
+                    itemKeyPrefix="s12-plot"
+                    sectionFilePrefix="secao13"
+                    onDownloadFigure={onDownloadFigurePng}
+                    onDownloadAll={() => onDownloadFiguresPngBatch(
+                      graficosSecao12.map((item, idx) => ({
+                        figure: item.figure,
+                        fileNameBase: `secao13_${sanitizeFileName(item.label, `dispersao_${idx + 1}`)}`,
+                        forceHideLegend: true,
+                      })),
+                    )}
+                    loading={loading}
+                    downloadingAssets={downloadingAssets}
+                  />
                 ) : (
                   <div className="empty-box">Grafico indisponivel.</div>
                 )}
@@ -5587,54 +5719,100 @@ export default function ElaboracaoTab({ sessionId, authUser, quickLoadRequest =
           </SectionBlock>
 
           <SectionBlock step="14" title="Diagnóstico de Modelo" subtitle="Resumo diagnóstico e tabelas principais do ajuste.">
-            <div dangerouslySetInnerHTML={{ __html: fit.diagnosticos_html || '' }} />
-            <div className="equation-formats-section">
-              <h4>Equações do Modelo</h4>
-              <EquationFormatsPanel
-                equacoes={fit.equacoes}
-                onDownload={(mode) => void onDownloadEquacao(mode)}
-                disabled={loading || downloadingAssets}
-              />
-            </div>
-            <div className="download-actions-bar">
-              <span className="download-actions-label">Fazer download:</span>
-              <button
-                type="button"
-                className="btn-download-subtle"
-                onClick={() => onDownloadTableCsv(fit.tabela_coef, 'secao14_coeficientes')}
-                disabled={loading || downloadingAssets || !fit.tabela_coef}
-              >
-                Coeficientes
-              </button>
-              <button
-                type="button"
-                className="btn-download-subtle"
-                onClick={() => onDownloadTableCsv(fit.tabela_obs_calc, 'secao14_obs_calc')}
-                disabled={loading || downloadingAssets || !fit.tabela_obs_calc}
-              >
-                Obs x Calc
-              </button>
-              <button
-                type="button"
-                className="btn-download-subtle"
-                onClick={() => onDownloadTablesCsvBatch([
-                  { table: fit.tabela_coef, fileNameBase: 'secao14_coeficientes' },
-                  { table: fit.tabela_obs_calc, fileNameBase: 'secao14_obs_calc' },
-                ])}
-                disabled={loading || downloadingAssets || (!fit.tabela_coef && !fit.tabela_obs_calc)}
-              >
-                Todos
-              </button>
+            <div className="section14-tabs" role="tablist" aria-label="Conteúdos do diagnóstico do modelo">
+              {[
+                { id: 'diagnosticos', label: 'Diagnósticos' },
+                { id: 'testes', label: 'Testes' },
+                { id: 'equacoes', label: 'Equações' },
+                { id: 'coeficientes', label: 'Coeficientes' },
+                { id: 'obs_calc', label: 'Obs x Calc' },
+              ].map((tab) => (
+                <button
+                  key={`sec14-tab-${tab.id}`}
+                  type="button"
+                  className={`section14-tab-pill${section14Tab === tab.id ? ' is-active' : ''}`}
+                  onClick={() => setSection14Tab(tab.id)}
+                  aria-selected={section14Tab === tab.id}
+                  role="tab"
+                >
+                  {tab.label}
+                </button>
+              ))}
             </div>
-            <div className="two-col diagnostic-tables">
-              <div className="pane">
-                <h4>Tabela de Coeficientes</h4>
-                <DataTable table={fit.tabela_coef} maxHeight={460} />
-              </div>
-              <div className="pane">
-                <h4>Valores Observados x Calculados</h4>
-                <DataTable table={fit.tabela_obs_calc} maxHeight={460} />
-              </div>
+
+            <div className="section14-panel" role="tabpanel">
+              {section14Tab === 'diagnosticos' ? (
+                fit?.diagnosticos ? (
+                  <div className="section14-diagnostics-panel">
+                    <h4>Estatísticas Gerais</h4>
+                    <Section14MetricRows rows={section14DiagnosticosGerais} />
+                  </div>
+                ) : (
+                  <div className="section14-diagnostics-panel" dangerouslySetInnerHTML={{ __html: fit.diagnosticos_html || '' }} />
+                )
+              ) : null}
+
+              {section14Tab === 'testes' ? (
+                fit?.diagnosticos ? (
+                  <div className="section14-tests-panel">
+                    <div className="section14-tests-grid">
+                      {section14Testes.map((teste) => (
+                        <div key={`sec14-test-card-${teste.id}`} className="section14-test-card">
+                          <h4>{teste.label}</h4>
+                          <Section14MetricRows rows={teste.rows} />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="section14-diagnostics-panel" dangerouslySetInnerHTML={{ __html: fit.diagnosticos_html || '' }} />
+                )
+              ) : null}
+
+              {section14Tab === 'equacoes' ? (
+                <div className="equation-formats-section section14-equations-panel">
+                  <h4>Equações do Modelo</h4>
+                  <EquationFormatsPanel
+                    equacoes={fit.equacoes}
+                    onDownload={(mode) => void onDownloadEquacao(mode)}
+                    disabled={loading || downloadingAssets}
+                  />
+                </div>
+              ) : null}
+
+              {section14Tab === 'coeficientes' ? (
+                <div className="section14-table-panel">
+                  <div className="section14-table-head">
+                    <h4>Tabela de Coeficientes</h4>
+                    <button
+                      type="button"
+                      className="btn-download-subtle"
+                      onClick={() => onDownloadTableCsv(fit.tabela_coef, 'secao14_coeficientes')}
+                      disabled={loading || downloadingAssets || !fit.tabela_coef}
+                    >
+                      Fazer download
+                    </button>
+                  </div>
+                  <DataTable table={fit.tabela_coef} maxHeight={460} />
+                </div>
+              ) : null}
+
+              {section14Tab === 'obs_calc' ? (
+                <div className="section14-table-panel">
+                  <div className="section14-table-head">
+                    <h4>Valores Observados x Calculados</h4>
+                    <button
+                      type="button"
+                      className="btn-download-subtle"
+                      onClick={() => onDownloadTableCsv(fit.tabela_obs_calc, 'secao14_obs_calc')}
+                      disabled={loading || downloadingAssets || !fit.tabela_obs_calc}
+                    >
+                      Fazer download
+                    </button>
+                  </div>
+                  <DataTable table={fit.tabela_obs_calc} maxHeight={460} />
+                </div>
+              ) : null}
             </div>
           </SectionBlock>
 

frontend/src/components/PlotFigure.jsx

@@ -12,6 +12,7 @@ function PlotFigure({
   className = '',
   lazy = false,
   showPointIndexToggle = false,
+  headerActions = null,
 }) {
   const containerRef = useRef(null)
   const [shouldRenderPlot, setShouldRenderPlot] = useState(() => !lazy)
@@ -115,22 +116,27 @@ function PlotFigure({
 
   return (
     <div ref={containerRef} className={cardClassName}>
-      {title || subtitle ? (
+      {title || subtitle || showPointIndexToggle || headerActions ? (
         <div className="plot-card-head">
-          {title ? <h4 className="plot-card-title">{title}</h4> : null}
-          {subtitle ? <div className="plot-card-subtitle">{subtitle}</div> : null}
-          {showPointIndexToggle ? (
-            <label className={`plot-card-toggle${canToggleIndices ? '' : ' is-disabled'}`}>
-              <input
-                type="checkbox"
-                checked={showPointIndices}
-                disabled={!canToggleIndices || loadingIndexedFigure}
-                onChange={handleToggleChange}
-                title={toggleTitle}
-              />
-              {loadingIndexedFigure ? 'Carregando índices...' : 'Exibir índices dos pontos'}
-            </label>
-          ) : null}
+          <div className="plot-card-head-main">
+            {title ? <h4 className="plot-card-title">{title}</h4> : null}
+            {subtitle ? <div className="plot-card-subtitle">{subtitle}</div> : null}
+          </div>
+          <div className="plot-card-head-actions">
+            {showPointIndexToggle ? (
+              <label className={`plot-card-toggle${canToggleIndices ? '' : ' is-disabled'}`}>
+                <input
+                  type="checkbox"
+                  checked={showPointIndices}
+                  disabled={!canToggleIndices || loadingIndexedFigure}
+                  onChange={handleToggleChange}
+                  title={toggleTitle}
+                />
+                {loadingIndexedFigure ? 'Carregando índices...' : 'Exibir índices dos pontos'}
+              </label>
+            ) : null}
+            {headerActions}
+          </div>
         </div>
       ) : null}
       {shouldRenderPlot ? (

frontend/src/styles.css

@@ -1793,6 +1793,32 @@ textarea {
     inset 0 0 0 1px #dfe9f3;
   animation: sectionIn 0.35s ease both;
   animation-delay: calc(var(--section-order, 1) * 25ms);
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.elaboracao-layout[data-current-section-step="1"] .workflow-section[data-section-step="1"],
+.elaboracao-layout[data-current-section-step="2"] .workflow-section[data-section-step="2"],
+.elaboracao-layout[data-current-section-step="3"] .workflow-section[data-section-step="3"],
+.elaboracao-layout[data-current-section-step="4"] .workflow-section[data-section-step="4"],
+.elaboracao-layout[data-current-section-step="5"] .workflow-section[data-section-step="5"],
+.elaboracao-layout[data-current-section-step="6"] .workflow-section[data-section-step="6"],
+.elaboracao-layout[data-current-section-step="7"] .workflow-section[data-section-step="7"],
+.elaboracao-layout[data-current-section-step="8"] .workflow-section[data-section-step="8"],
+.elaboracao-layout[data-current-section-step="9"] .workflow-section[data-section-step="9"],
+.elaboracao-layout[data-current-section-step="10"] .workflow-section[data-section-step="10"],
+.elaboracao-layout[data-current-section-step="11"] .workflow-section[data-section-step="11"],
+.elaboracao-layout[data-current-section-step="12"] .workflow-section[data-section-step="12"],
+.elaboracao-layout[data-current-section-step="13"] .workflow-section[data-section-step="13"],
+.elaboracao-layout[data-current-section-step="14"] .workflow-section[data-section-step="14"],
+.elaboracao-layout[data-current-section-step="15"] .workflow-section[data-section-step="15"],
+.elaboracao-layout[data-current-section-step="16"] .workflow-section[data-section-step="16"],
+.elaboracao-layout[data-current-section-step="17"] .workflow-section[data-section-step="17"],
+.elaboracao-layout[data-current-section-step="18"] .workflow-section[data-section-step="18"],
+.elaboracao-layout[data-current-section-step="19"] .workflow-section[data-section-step="19"] {
+  border-color: #111820;
+  box-shadow:
+    0 8px 22px rgba(20, 28, 36, 0.1),
+    inset 0 0 0 1px #dfe9f3;
 }
 
 .section-head {
@@ -2068,6 +2094,15 @@ textarea {
   gap: 14px;
 }
 
+.dispersao-config-panel {
+  margin: 0 0 14px;
+  padding: 12px;
+  border: 1px solid #d7e2ee;
+  border-left: 4px solid #2f80cf;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #fbfdff 0%, #f5f9fd 100%);
+}
+
 .dispersao-config-field {
   display: grid;
   gap: 6px;
@@ -3153,8 +3188,7 @@ button.pesquisa-coluna-remove:hover {
 .plot-card-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  margin-top: 8px;
+  gap: 6px;
   color: #42586e;
   font-size: 0.8rem;
   font-weight: 700;
@@ -5021,6 +5055,152 @@ button.btn-upload-select {
   font-size: 0.9rem;
 }
 
+.section14-tabs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0 0 12px;
+  padding: 10px;
+  border: 1px solid #d7e2ee;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #fbfdff 0%, #f5f9fd 100%);
+}
+
+.section14-tab-pill {
+  min-height: 34px;
+  padding: 7px 12px;
+  border: 1px solid #c3d2e1;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #f8fbff 0%, #edf4fa 100%);
+  color: #4b6177;
+  font-family: 'Sora', sans-serif;
+  font-size: 0.78rem;
+  font-weight: 800;
+  box-shadow: none;
+}
+
+.section14-tab-pill:hover,
+.section14-tab-pill:focus-visible {
+  transform: translateY(-1px);
+  border-color: #d06f00;
+  color: #6c3900;
+}
+
+.section14-tab-pill.is-active {
+  border-color: #bf6500;
+  background: linear-gradient(180deg, #ff9f31 0%, #e67900 100%);
+  color: #ffffff;
+}
+
+.section14-panel {
+  border: 1px solid #dbe5ef;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 12px;
+}
+
+.section14-diagnostics-panel .dai-card {
+  margin: 0;
+  border: none;
+  padding: 0;
+}
+
+.section14-equations-panel {
+  margin: 0;
+}
+
+.section14-diagnostics-panel h4,
+.section14-test-card h4,
+.section14-equations-panel h4,
+.section14-table-head h4 {
+  margin: 0;
+  color: #3b4f64;
+  font-family: 'Sora', sans-serif;
+  font-size: 0.9rem;
+}
+
+.section14-diagnostics-panel,
+.section14-tests-panel,
+.section14-table-panel {
+  display: grid;
+  gap: 10px;
+}
+
+.section14-field-grid {
+  display: grid;
+  border: 1px solid #e1eaf2;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.section14-tests-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 12px;
+}
+
+.section14-test-card {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid #dbe6f1;
+  border-radius: 8px;
+  background: #fbfdff;
+}
+
+.section14-test-card h4 {
+  font-size: 0.82rem;
+}
+
+.section14-test-card .section14-field-row {
+  padding: 6px 8px;
+}
+
+.section14-test-card .section14-field-label {
+  font-size: 0.78rem;
+}
+
+.section14-test-card .section14-field-value {
+  font-size: 0.68rem;
+  line-height: 1.25;
+}
+
+.section14-field-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 10px;
+  border-bottom: 1px solid #edf2f6;
+  background: #ffffff;
+}
+
+.section14-field-row:last-child {
+  border-bottom: none;
+}
+
+.section14-field-label {
+  color: #586e84;
+  font-weight: 700;
+}
+
+.section14-field-value {
+  color: #24384d;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.82rem;
+  text-align: right;
+}
+
+.section14-table-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
 .map-frame {
   display: block;
   width: 100%;
@@ -5605,6 +5785,14 @@ button.btn-upload-select {
   gap: 8px 10px;
 }
 
+.checkbox-inline-wrap-scrollable {
+  max-height: 132px;
+  overflow-y: auto;
+  padding-right: 6px;
+  align-content: flex-start;
+  overscroll-behavior: contain;
+}
+
 .checkbox-inline-wrap-tools {
   align-items: center;
   margin-bottom: 6px;
@@ -5697,14 +5885,14 @@ button.btn-upload-select {
   align-items: flex-start;
   justify-content: space-between;
   gap: 8px;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
 }
 
 .transform-suggestion-metrics {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 7px;
+  gap: 5px;
 }
 
 .transform-suggestion-rank {
@@ -5719,8 +5907,8 @@ button.btn-upload-select {
   background: #eaf4fe;
   color: #1e4d78;
   font-family: 'JetBrains Mono', monospace;
-  font-size: 0.78rem;
-  padding: 3px 7px;
+  font-size: 0.72rem;
+  padding: 2px 6px;
   font-weight: 700;
 }
 
@@ -5730,8 +5918,8 @@ button.btn-upload-select {
   background: #f4f8fc;
   color: #355a78;
   font-family: 'JetBrains Mono', monospace;
-  font-size: 0.76rem;
-  padding: 3px 7px;
+  font-size: 0.7rem;
+  padding: 2px 6px;
   font-weight: 700;
 }
 
@@ -5777,8 +5965,11 @@ button.btn-upload-select {
 
 .section11-search-criteria {
   margin-top: 8px;
-  padding-top: 11px;
-  border-top: 1px solid #d7e2ee;
+  padding: 12px;
+  border: 1px solid #d7e2ee;
+  border-left: 4px solid #2f80cf;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #fbfdff 0%, #f5f9fd 100%);
   display: grid;
   gap: 8px;
 }
@@ -5795,6 +5986,21 @@ button.btn-upload-select {
   margin-bottom: 0;
 }
 
+.section11-suggestions-block {
+  margin-top: 18px;
+  padding-top: 16px;
+  border-top: 1px solid #d7e2ee;
+  display: grid;
+  gap: 10px;
+}
+
+.section11-suggestions-title {
+  color: #3a4f64;
+  font-family: 'Sora', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 800;
+}
+
 .transform-preview-summary {
   border: 1px solid #d8e5f2;
   border-radius: 12px;
@@ -5940,6 +6146,7 @@ button.btn-upload-select {
 .transform-suggestion-col {
   color: #2e4358;
   font-weight: 700;
+  font-size: 0.84rem;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -6001,6 +6208,11 @@ button.btn-upload-select {
   color: #9d2f2f;
 }
 
+.transform-suggestion-card .grau-badge {
+  font-size: 0.68rem;
+  padding: 2px 6px;
+}
+
 .transform-suggestion-card button {
   width: 100%;
   justify-content: center;
@@ -6034,6 +6246,84 @@ button.btn-upload-select {
   gap: 12px;
 }
 
+.scatter-carousel {
+  display: grid;
+  gap: 10px;
+  margin-top: 10px;
+  padding: 12px;
+  border: 1px solid #d7e2ee;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
+}
+
+.scatter-carousel-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.scatter-carousel-btn {
+  min-width: 104px;
+}
+
+.scatter-carousel-download-all {
+  min-width: 190px;
+}
+
+.scatter-carousel-actions {
+  display: flex;
+  justify-content: center;
+}
+
+.scatter-carousel-pills {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: 8px 0 10px;
+  border-top: 1px solid #e4edf5;
+  border-bottom: 1px solid #e4edf5;
+}
+
+.scatter-carousel-pill {
+  max-width: min(360px, 100%);
+  min-height: 32px;
+  padding: 6px 11px;
+  border: 1px solid #c3d2e1;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #f8fbff 0%, #edf4fa 100%);
+  color: #5b7188;
+  font-family: 'Sora', sans-serif;
+  font-size: 0.74rem;
+  font-weight: 800;
+  line-height: 1.18;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-shadow: 0 3px 8px rgba(23, 37, 50, 0.1);
+}
+
+.scatter-carousel-pill:hover,
+.scatter-carousel-pill:focus-visible {
+  transform: translateY(-1px);
+  border-color: #d06f00;
+  color: #6c3900;
+}
+
+.scatter-carousel-pill.is-active {
+  border-color: #bf6500;
+  background: linear-gradient(180deg, #ff9f31 0%, #e67900 100%);
+  color: #ffffff;
+}
+
+.scatter-carousel-track {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
 .section-disclaimer-warning {
   margin: 0 0 10px;
   padding: 9px 12px;
@@ -6106,13 +6396,34 @@ button.btn-upload-select {
 .plot-card-head {
   margin: 4px 4px 8px;
   min-height: 42px;
-  display: grid;
-  align-content: start;
-  gap: 2px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
   position: relative;
   z-index: 2;
 }
 
+.plot-card-head-main {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.plot-card-head-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.plot-card-download-btn {
+  font-size: 0.76rem;
+  padding: 6px 9px;
+}
+
 .plot-card-title {
   margin: 0;
   color: #2f465c;
@@ -6245,6 +6556,30 @@ button.btn-upload-select {
   margin-bottom: 10px;
 }
 
+.outliers-previous-card {
+  display: grid;
+  gap: 8px;
+  padding: 10px 16px;
+  border: 1px solid #dbe6f0;
+  border-radius: 8px;
+  background: #f8f9fa;
+}
+
+.outliers-previous-count {
+  color: #495057;
+  font-weight: 700;
+}
+
+.outliers-previous-indices {
+  max-height: 92px;
+  overflow-y: auto;
+  overflow-wrap: anywhere;
+  padding-right: 10px;
+  color: #6c757d;
+  font-size: 0.86rem;
+  line-height: 1.35;
+}
+
 .outlier-actions-row {
   display: flex;
   flex-wrap: wrap;
@@ -6481,6 +6816,13 @@ button.btn-upload-select {
   margin-top: 8px;
 }
 
+.resumo-outliers-box-scrollable {
+  max-height: 92px;
+  overflow-y: auto;
+  overflow-wrap: anywhere;
+  padding-right: 12px;
+}
+
 .outliers-excluidos-details {
   margin-top: 10px;
   border: 1px solid #dbe6f1;
@@ -7050,6 +7392,11 @@ button.btn-download-subtle {
 .micro-msg-grid-codigo {
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 6px 14px;
+  max-height: 144px;
+  overflow-y: auto;
+  padding-right: 6px;
+  align-content: start;
+  overscroll-behavior: contain;
 }
 
 .micro-msg {
@@ -7271,6 +7618,18 @@ button.btn-download-subtle {
     grid-template-columns: 1fr;
   }
 
+  .scatter-carousel-track {
+    grid-template-columns: 1fr;
+  }
+
+  .scatter-carousel-controls {
+    width: 100%;
+  }
+
+  .scatter-carousel-btn {
+    flex: 1;
+  }
+
   .plot-card {
     min-height: 340px;
   }