melhora no registro de variaveis selecionadas

backend/app/core/pesquisa/pesquisa_admin_config.json

@@ -0,0 +1,58 @@
+{
+  "area": [
+    "var:ACONST",
+    "var:ALOC",
+    "var:APRIV",
+    "var:APRIVEQ",
+    "var:ATTOTAL"
+  ],
+  "aval_area": [
+    "var:ACONST",
+    "var:ALOC",
+    "var:APRIV",
+    "var:APRIVEQ",
+    "var:ATTOTAL"
+  ],
+  "aval_area_privativa": [
+    "var:APRIV",
+    "var:APRIVEQ"
+  ],
+  "aval_area_total": [
+    "var:ATTOTAL"
+  ],
+  "aval_bairro": [
+    "col:NME BAI"
+  ],
+  "aval_data": [],
+  "aval_finalidade": [
+    "col:FINALIDADE",
+    "col:NME IMO-FINAL"
+  ],
+  "aval_rh": [
+    "var:RH"
+  ],
+  "aval_valor_total": [
+    "var:VLOC",
+    "var:VTOTAL"
+  ],
+  "aval_valor_unitario": [
+    "var:VUACONST",
+    "var:VUNIPRIV",
+    "var:VUNIT"
+  ],
+  "bairros": [
+    "col:BAIRRO",
+    "col:Bairro",
+    "col:NME BAI"
+  ],
+  "data": [
+    "meta:faixa_data"
+  ],
+  "finalidade": [
+    "col:FINALIDADE",
+    "col:NME IMO-FINAL"
+  ],
+  "rh": [
+    "var:RH"
+  ]
+}

frontend/src/components/ElaboracaoTab.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { api, downloadBlob } from '../api'
 import Plotly from 'plotly.js-dist-min'
 import DataTable from './DataTable'
@@ -593,6 +593,7 @@ export default function ElaboracaoTab({ sessionId }) {
   const [section8Open, setSection8Open] = useState(false)
   const [section10ManualOpen, setSection10ManualOpen] = useState(false)
   const [section11Open, setSection11Open] = useState(false)
+  const [section6EditOpen, setSection6EditOpen] = useState(true)
 
   const [fit, setFit] = useState(null)
   const [tipoDispersao, setTipoDispersao] = useState('Variáveis Independentes Transformadas X Variável Dependente Transformada')
@@ -624,6 +625,7 @@ export default function ElaboracaoTab({ sessionId }) {
   const classificarXReqRef = useRef(0)
   const deleteConfirmTimersRef = useRef({})
   const uploadInputRef = useRef(null)
+  const [disabledHint, setDisabledHint] = useState(null)
 
   const mapaChoices = useMemo(() => ['Visualização Padrão', ...colunasNumericas], [colunasNumericas])
   const colunasXDisponiveis = useMemo(
@@ -668,6 +670,7 @@ export default function ElaboracaoTab({ sessionId }) {
     [periodoDadosMercadoPreview],
   )
   const pendingWarningText = 'Há alterações em campos que ainda não foram aplicadas.'
+  const semAlteracaoTooltipText = 'Não houve modificação para ser aplicada.'
   const dataMercadoPendente = useMemo(
     () => String(colunaDataMercado || '') !== String(colunaDataMercadoAplicada || ''),
     [colunaDataMercado, colunaDataMercadoAplicada],
@@ -710,6 +713,34 @@ export default function ElaboracaoTab({ sessionId }) {
     () => Boolean(selection) && Boolean(section10ManualOpen) && manualTransformSnapshotAtual !== manualTransformAppliedSnapshot,
     [selection, section10ManualOpen, manualTransformSnapshotAtual, manualTransformAppliedSnapshot],
   )
+  const podeAplicarDataMercado = useMemo(
+    () => dataMercadoPendente && Boolean(colunaDataMercado) && Boolean(periodoDadosMercadoPreview),
+    [dataMercadoPendente, colunaDataMercado, periodoDadosMercadoPreview],
+  )
+  const semAlteracaoDataMercado = useMemo(
+    () => !dataMercadoPendente && Boolean(colunaDataMercadoAplicada),
+    [dataMercadoPendente, colunaDataMercadoAplicada],
+  )
+  const semAlteracaoDependente = useMemo(
+    () => !dependentePendente && Boolean(colunaYDraft),
+    [dependentePendente, colunaYDraft],
+  )
+  const podeAplicarSelecao = useMemo(
+    () => selecaoPendente && !dependentePendente && Boolean(colunaY) && colunasX.length > 0,
+    [selecaoPendente, dependentePendente, colunaY, colunasX],
+  )
+  const semAlteracaoSelecao = useMemo(
+    () => !selecaoPendente && !dependentePendente && Boolean(colunaY) && colunasX.length > 0,
+    [selecaoPendente, dependentePendente, colunaY, colunasX],
+  )
+  const podeAplicarTransformacaoManual = useMemo(
+    () => manualTransformPendente,
+    [manualTransformPendente],
+  )
+  const semAlteracaoTransformacaoManual = useMemo(
+    () => !manualTransformPendente && Boolean(selection) && Boolean(section10ManualOpen),
+    [manualTransformPendente, selection, section10ManualOpen],
+  )
   const outlierFiltrosSnapshotAtual = useMemo(
     () => buildFiltrosSnapshot(filtros),
     [filtros],
@@ -793,6 +824,59 @@ export default function ElaboracaoTab({ sessionId }) {
   )
   const baseCarregada = Boolean(dados)
 
+  const hideDisabledHint = useCallback(() => {
+    setDisabledHint(null)
+  }, [])
+
+  const onDisabledHintEnter = useCallback((event, showHint, hintText) => {
+    if (!showHint || !hintText || typeof window === 'undefined') {
+      setDisabledHint(null)
+      return
+    }
+
+    const anchor = event.currentTarget
+    if (!anchor || typeof anchor.getBoundingClientRect !== 'function') {
+      setDisabledHint(null)
+      return
+    }
+
+    const anchorRect = anchor.getBoundingClientRect()
+    const sectionEl = anchor.closest('.workflow-section')
+    const sectionRect = sectionEl?.getBoundingClientRect?.()
+    const containerRect = sectionRect || {
+      top: 0,
+      left: 0,
+      right: window.innerWidth,
+      bottom: window.innerHeight,
+    }
+
+    const tooltipWidth = 280
+    const tooltipHeight = 44
+    const gap = 10
+    const margin = 12
+
+    const distLeft = anchorRect.left - containerRect.left
+    const distRight = containerRect.right - anchorRect.right
+    const distTop = anchorRect.top - containerRect.top
+    const distBottom = containerRect.bottom - anchorRect.bottom
+
+    const openToRight = distLeft <= distRight
+    const openToTop = distBottom <= distTop
+
+    let left = openToRight ? anchorRect.left : anchorRect.right - tooltipWidth
+    let top = openToTop ? anchorRect.top - tooltipHeight - gap : anchorRect.bottom + gap
+
+    left = Math.max(margin, Math.min(left, window.innerWidth - tooltipWidth - margin))
+    top = Math.max(margin, Math.min(top, window.innerHeight - tooltipHeight - margin))
+
+    setDisabledHint({
+      text: String(hintText),
+      left,
+      top,
+      width: tooltipWidth,
+    })
+  }, [])
+
   useEffect(() => {
     if (coordsInfo && !coordsInfo.tem_coords) {
       setCoordsMode('menu')
@@ -962,6 +1046,7 @@ export default function ElaboracaoTab({ sessionId }) {
       setPeriodoDadosMercadoPreview(null)
       setDataMercadoError('')
       setSelection(null)
+      setSection6EditOpen(true)
       setFit(null)
       setFiltros(defaultFiltros())
       setOutliersTexto('')
@@ -998,6 +1083,7 @@ export default function ElaboracaoTab({ sessionId }) {
 
   function applySelectionResponse(resp) {
     setSelection(resp)
+    setSection6EditOpen(false)
     setSection8Open(false)
     setSection10ManualOpen(false)
     setTransformacoesAplicadas(null)
@@ -1256,6 +1342,7 @@ export default function ElaboracaoTab({ sessionId }) {
     setDicotomicas(proximasDicotomicas)
     setCodigoAlocado(proximoCodigoAlocado)
     setPercentuais(proximosPercentuais)
+    setSection6EditOpen(true)
     setSelectionAppliedSnapshot(buildSelectionSnapshot({ coluna_y: proximaColunaY }))
     setSelection(null)
     setFit(null)
@@ -1395,6 +1482,7 @@ export default function ElaboracaoTab({ sessionId }) {
       const resp = await api.applySelection(payload)
       applySelectionResponse(resp)
       setSelectionAppliedSnapshot(buildSelectionSnapshot(payload))
+      setSection6EditOpen(false)
       setFit(null)
       setOutlierFiltrosAplicadosSnapshot(buildFiltrosSnapshot(defaultFiltros()))
       setOutlierTextosAplicadosSnapshot(buildOutlierTextSnapshot('', ''))
@@ -1532,6 +1620,7 @@ export default function ElaboracaoTab({ sessionId }) {
       setOutliersAnteriores([])
       setIteracao(1)
       setSelection(null)
+      setSection6EditOpen(true)
       setFit(null)
       setTransformacoesAplicadas(null)
       setOrigemTransformacoes(null)
@@ -2265,17 +2354,27 @@ export default function ElaboracaoTab({ sessionId }) {
                 </select>
               </div>
               <div className="row market-date-actions-row">
-                <div className="resumo-outliers-box">
+                <div className="resumo-outliers-box market-date-period-row">
                   Período identificado: {periodoDadosMercadoPreviewTexto}
                 </div>
-                <button
-                  type="button"
-                  onClick={onAplicarColunaDataMercado}
-                  disabled={loading || dataMercadoLoading || !colunaDataMercado || !periodoDadosMercadoPreview}
-                >
-                  Aplicar período
-                </button>
-                {dataMercadoPendente ? <span className="pending-apply-note">{pendingWarningText}</span> : null}
+                <div className="row market-date-apply-row">
+                  <span
+                    className={`button-tooltip-wrap${semAlteracaoDataMercado ? ' is-disabled-hint' : ''}`}
+                    title={semAlteracaoDataMercado ? semAlteracaoTooltipText : ''}
+                    onMouseEnter={(event) => onDisabledHintEnter(event, semAlteracaoDataMercado, semAlteracaoTooltipText)}
+                    onMouseLeave={hideDisabledHint}
+                  >
+                    <button
+                      type="button"
+                      onClick={onAplicarColunaDataMercado}
+                      disabled={loading || dataMercadoLoading || !podeAplicarDataMercado}
+                    >
+                      Aplicar
+                    </button>
+                  </span>
+                  {dataMercadoPendente ? <span className="pending-apply-note">{pendingWarningText}</span> : null}
+                </div>
+                <div className="section1-empty-hint">Selecionado: {colunaDataMercado || '-'}</div>
               </div>
               {dataMercadoError ? <div className="error-line inline-error">{dataMercadoError}</div> : null}
             </div>
@@ -2290,15 +2389,25 @@ export default function ElaboracaoTab({ sessionId }) {
                   <option key={col} value={col}>{col}</option>
                 ))}
               </select>
-              <button
-                type="button"
-                onClick={onAplicarVariavelDependente}
-                disabled={loading || !dependentePendente}
+            </div>
+            <div className="row section5-apply-row">
+              <span
+                className={`button-tooltip-wrap${semAlteracaoDependente ? ' is-disabled-hint' : ''}`}
+                title={semAlteracaoDependente ? semAlteracaoTooltipText : ''}
+                onMouseEnter={(event) => onDisabledHintEnter(event, semAlteracaoDependente, semAlteracaoTooltipText)}
+                onMouseLeave={hideDisabledHint}
               >
-                Aplicar variável dependente
-              </button>
+                <button
+                  type="button"
+                  onClick={onAplicarVariavelDependente}
+                  disabled={loading || !dependentePendente}
+                >
+                  Aplicar
+                </button>
+              </span>
               {dependentePendente ? <span className="pending-apply-note">{pendingWarningText}</span> : null}
             </div>
+            <div className="section1-empty-hint">Selecionado: {colunaYDraft || '-'}</div>
           </SectionBlock>
 
           <SectionBlock step="6" title="Selecionar Variáveis Independentes" subtitle="Escolha regressoras e grupos de tipologia.">
@@ -2307,77 +2416,151 @@ export default function ElaboracaoTab({ sessionId }) {
                 Aplique a variável dependente na etapa anterior para liberar as opções de variáveis independentes.
               </div>
             ) : null}
-            <div className="compact-option-group compact-option-group-x">
-              <h4>Variáveis Independentes (X)</h4>
-              <div className="checkbox-inline-wrap checkbox-inline-wrap-tools">
-                <label className="compact-checkbox compact-checkbox-toggle-all">
-                  <input
-                    ref={marcarTodasXRef}
-                    type="checkbox"
-                    checked={todasXMarcadas}
-                    onChange={onToggleTodasX}
-                    disabled={colunasXDisponiveis.length === 0}
-                  />
-                  {todasXMarcadas ? 'Desmarcar todas' : 'Marcar todas'}
-                </label>
-                <span className="compact-selection-count">
-                  {colunasX.length}/{colunasXDisponiveis.length} selecionadas
-                </span>
-              </div>
-              <div className="checkbox-inline-wrap">
-                {colunasXDisponiveis.map((col) => (
-                  <label key={`x-${col}`} className="compact-checkbox">
-                    <input
-                      type="checkbox"
-                      checked={colunasX.includes(col)}
-                      onChange={() => onToggleColunaX(col)}
-                    />
-                    {col}
-                  </label>
-                ))}
+            {colunaY ? (
+              <div className="manual-transform-toggle section6-toggle-wrap">
+                <button
+                  type="button"
+                  className={section6EditOpen ? 'btn-manual-toggle active' : 'btn-manual-toggle'}
+                  onClick={() => setSection6EditOpen((prev) => !prev)}
+                >
+                  {section6EditOpen ? 'Ocultar edição de variáveis independentes' : 'Alterar variáveis independentes'}
+                </button>
               </div>
-            </div>
+            ) : null}
+            {colunaY && section6EditOpen ? (
+              <>
+                <div className="compact-option-group compact-option-group-x">
+                  <h4>Variáveis Independentes (X)</h4>
+                  <div className="checkbox-inline-wrap checkbox-inline-wrap-tools">
+                    <label className="compact-checkbox compact-checkbox-toggle-all">
+                      <input
+                        ref={marcarTodasXRef}
+                        type="checkbox"
+                        checked={todasXMarcadas}
+                        onChange={onToggleTodasX}
+                        disabled={colunasXDisponiveis.length === 0}
+                      />
+                      {todasXMarcadas ? 'Desmarcar todas' : 'Marcar todas'}
+                    </label>
+                    <span className="compact-selection-count">
+                      {colunasX.length}/{colunasXDisponiveis.length} selecionadas
+                    </span>
+                  </div>
+                  <div className="checkbox-inline-wrap">
+                    {colunasXDisponiveis.map((col) => (
+                      <label key={`x-${col}`} className="compact-checkbox">
+                        <input
+                          type="checkbox"
+                          checked={colunasX.includes(col)}
+                          onChange={() => onToggleColunaX(col)}
+                        />
+                        {col}
+                      </label>
+                    ))}
+                  </div>
+                </div>
 
-            <div className="compact-option-group compact-option-group-dicotomicas">
-              <h4>Variáveis Dicotômicas (0/1)</h4>
-              <div className="checkbox-inline-wrap">
-                {colunasX.map((col) => (
-                  <label key={`d-${col}`} className="compact-checkbox">
-                    <input type="checkbox" checked={dicotomicas.includes(col)} onChange={() => toggleSelection(setDicotomicas, col)} />
-                    {col}
-                  </label>
-                ))}
-              </div>
-            </div>
+                <div className="compact-option-group compact-option-group-dicotomicas">
+                  <h4>Variáveis Dicotômicas (0/1)</h4>
+                  <div className="checkbox-inline-wrap">
+                    {colunasX.map((col) => (
+                      <label key={`d-${col}`} className="compact-checkbox">
+                        <input type="checkbox" checked={dicotomicas.includes(col)} onChange={() => toggleSelection(setDicotomicas, col)} />
+                        {col}
+                      </label>
+                    ))}
+                  </div>
+                </div>
 
-            <div className="compact-option-group compact-option-group-codigo">
-              <h4>Variáveis de Código Alocado/Ajustado</h4>
-              <div className="checkbox-inline-wrap">
-                {colunasX.map((col) => (
-                  <label key={`c-${col}`} className="compact-checkbox">
-                    <input type="checkbox" checked={codigoAlocado.includes(col)} onChange={() => toggleSelection(setCodigoAlocado, col)} />
-                    {col}
-                  </label>
-                ))}
-              </div>
-            </div>
+                <div className="compact-option-group compact-option-group-codigo">
+                  <h4>Variáveis de Código Alocado/Ajustado</h4>
+                  <div className="checkbox-inline-wrap">
+                    {colunasX.map((col) => (
+                      <label key={`c-${col}`} className="compact-checkbox">
+                        <input type="checkbox" checked={codigoAlocado.includes(col)} onChange={() => toggleSelection(setCodigoAlocado, col)} />
+                        {col}
+                      </label>
+                    ))}
+                  </div>
+                </div>
 
-            <div className="compact-option-group compact-option-group-percentuais">
-              <h4>Variáveis Percentuais (0 a 1)</h4>
-              <div className="checkbox-inline-wrap">
-                {colunasX.map((col) => (
-                  <label key={`p-${col}`} className="compact-checkbox">
-                    <input type="checkbox" checked={percentuais.includes(col)} onChange={() => toggleSelection(setPercentuais, col)} />
-                    {col}
-                  </label>
-                ))}
-              </div>
-            </div>
+                <div className="compact-option-group compact-option-group-percentuais">
+                  <h4>Variáveis Percentuais (0 a 1)</h4>
+                  <div className="checkbox-inline-wrap">
+                    {colunasX.map((col) => (
+                      <label key={`p-${col}`} className="compact-checkbox">
+                        <input type="checkbox" checked={percentuais.includes(col)} onChange={() => toggleSelection(setPercentuais, col)} />
+                        {col}
+                      </label>
+                    ))}
+                  </div>
+                </div>
 
-            <div className="row">
-              <button onClick={onApplySelection} disabled={loading || dependentePendente || !colunaY || colunasX.length === 0}>Aplicar seleção</button>
-              {selecaoPendente ? <span className="pending-apply-note">{pendingWarningText}</span> : null}
-            </div>
+                <div className="row">
+                  <span
+                    className={`button-tooltip-wrap${semAlteracaoSelecao ? ' is-disabled-hint' : ''}`}
+                    title={semAlteracaoSelecao ? semAlteracaoTooltipText : ''}
+                    onMouseEnter={(event) => onDisabledHintEnter(event, semAlteracaoSelecao, semAlteracaoTooltipText)}
+                    onMouseLeave={hideDisabledHint}
+                  >
+                    <button onClick={onApplySelection} disabled={loading || !podeAplicarSelecao}>Aplicar seleção</button>
+                  </span>
+                  {selecaoPendente ? <span className="pending-apply-note">{pendingWarningText}</span> : null}
+                </div>
+              </>
+            ) : null}
+            {colunaY ? (
+              <div className="section6-selected-summary">
+                <div className="section6-summary-group">
+                  <div className="section6-summary-label">Independentes:</div>
+                  {colunasX.length > 0 ? (
+                    <div className="checkbox-inline-wrap">
+                      {colunasX.map((coluna) => (
+                        <span key={`selected-x-${coluna}`} className="compact-chip">{coluna}</span>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="section1-empty-hint">Nenhuma.</div>
+                  )}
+                </div>
+                <div className="section6-summary-group">
+                  <div className="section6-summary-label">Dicotômicas:</div>
+                  {dicotomicas.length > 0 ? (
+                    <div className="checkbox-inline-wrap">
+                      {dicotomicas.map((coluna) => (
+                        <span key={`selected-d-${coluna}`} className="compact-chip">{coluna}</span>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="section1-empty-hint">Nenhuma.</div>
+                  )}
+                </div>
+                <div className="section6-summary-group">
+                  <div className="section6-summary-label">Código alocado/ajustado:</div>
+                  {codigoAlocado.length > 0 ? (
+                    <div className="checkbox-inline-wrap">
+                      {codigoAlocado.map((coluna) => (
+                        <span key={`selected-c-${coluna}`} className="compact-chip">{coluna}</span>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="section1-empty-hint">Nenhuma.</div>
+                  )}
+                </div>
+                <div className="section6-summary-group">
+                  <div className="section6-summary-label">Percentuais:</div>
+                  {percentuais.length > 0 ? (
+                    <div className="checkbox-inline-wrap">
+                      {percentuais.map((coluna) => (
+                        <span key={`selected-p-${coluna}`} className="compact-chip">{coluna}</span>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="section1-empty-hint">Nenhuma.</div>
+                  )}
+                </div>
+              </div>
+            ) : null}
             {selection?.aviso_multicolinearidade?.visible ? (
               <div dangerouslySetInnerHTML={{ __html: selection.aviso_multicolinearidade.html }} />
             ) : null}
@@ -2571,7 +2754,14 @@ export default function ElaboracaoTab({ sessionId }) {
                 </div>
 
                 <div className="row row-fit-transformacoes">
-                  <button className="btn-fit-model" onClick={onFitModel} disabled={loading}>Aplicar transformações e ajustar modelo</button>
+                  <span
+                    className={`button-tooltip-wrap${semAlteracaoTransformacaoManual ? ' is-disabled-hint' : ''}`}
+                    title={semAlteracaoTransformacaoManual ? semAlteracaoTooltipText : ''}
+                    onMouseEnter={(event) => onDisabledHintEnter(event, semAlteracaoTransformacaoManual, semAlteracaoTooltipText)}
+                    onMouseLeave={hideDisabledHint}
+                  >
+                    <button className="btn-fit-model" onClick={onFitModel} disabled={loading || !podeAplicarTransformacaoManual}>Aplicar transformações e ajustar modelo</button>
+                  </span>
                   {manualTransformPendente ? <span className="pending-apply-note">{pendingWarningText}</span> : null}
                 </div>
               </>
@@ -2980,6 +3170,14 @@ export default function ElaboracaoTab({ sessionId }) {
         </>
       ) : null}
 
+      {disabledHint ? (
+        <div
+          className="disabled-change-tooltip"
+          style={{ left: `${disabledHint.left}px`, top: `${disabledHint.top}px`, width: `${disabledHint.width}px` }}
+        >
+          {disabledHint.text}
+        </div>
+      ) : null}
       <LoadingOverlay show={loading} label="Processando dados..." />
       {error ? <div className="error-line">{error}</div> : null}
     </div>

frontend/src/styles.css

@@ -1860,6 +1860,10 @@ button.btn-upload-select {
   margin: 8px 0 10px;
 }
 
+.section6-toggle-wrap {
+  margin-bottom: 12px;
+}
+
 .btn-manual-toggle {
   min-width: 320px;
 }
@@ -1872,6 +1876,64 @@ button.btn-upload-select {
   --btn-shadow-strong: rgba(86, 105, 122, 0.24);
 }
 
+.section6-selected-summary {
+  margin-top: 8px;
+  display: grid;
+  gap: 8px;
+}
+
+.section6-summary-group {
+  display: grid;
+  gap: 5px;
+}
+
+.section6-summary-label {
+  font-size: 0.79rem;
+  font-weight: 700;
+  color: #4d647b;
+}
+
+.compact-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 7px;
+  border: 1px solid #dfe8f1;
+  border-radius: 8px;
+  background: #fbfdff;
+  font-size: 0.83rem;
+  font-weight: 600;
+  color: #3a4f64;
+  line-height: 1.15;
+}
+
+.button-tooltip-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.button-tooltip-wrap.is-disabled-hint {
+  cursor: not-allowed;
+}
+
+.button-tooltip-wrap.is-disabled-hint > button:disabled {
+  pointer-events: none;
+}
+
+.disabled-change-tooltip {
+  position: fixed;
+  z-index: 3500;
+  pointer-events: none;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: #3f5368;
+  color: #fff;
+  font-size: 0.76rem;
+  line-height: 1.25;
+  text-align: left;
+  box-shadow: 0 8px 18px rgba(28, 46, 66, 0.26);
+}
+
 .transform-suggestion-item {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto auto;
@@ -2328,19 +2390,25 @@ button.btn-upload-select {
 }
 
 .market-date-actions-row {
-  align-items: center;
-  justify-content: space-between;
+  align-items: flex-start;
+  justify-content: flex-start;
   gap: 10px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  flex-direction: column;
 }
 
-.market-date-actions-row .resumo-outliers-box {
+.market-date-period-row {
   margin-top: 0;
   min-height: 38px;
   display: inline-flex;
   align-items: center;
 }
 
+.market-date-apply-row,
+.section5-apply-row {
+  margin-bottom: 0;
+}
+
 .pending-apply-note {
   display: inline-flex;
   align-items: center;