// ============================================================
// App "Manejo de Pasto" — Assistente de registro (campo)
// Modelo (rev. 5): fluxo enxuto e UMA categoria por piquete — sem divisão de
// lote entre piquetes. As etapas são só as ESCOLHAS de
// navegação (seção → módulo → [ação] → [destino]); categoria, quantidade e
// data ficam na REVISÃO como linhas editáveis por toque (abrem um seletor de
// baixo), pré-preenchidas a partir do lote atual. Sem etapa "Lote" e sem
// botão "Editar": tocar na linha abre o seletor; brincar o dedo não altera.
//   • módulo VAZIO   → ENTRADA (categoria + quantidade na revisão).
//   • módulo OCUPADO → ação: Mover (SAÍDA+ENTRADA) ou Registrar saída (só SAÍDA).
//   • Evento         → agronômico, piquete opcional, não altera lotação.
// Seleções avançam ao toque (sem "Continuar"). Salva offline (fila/sucesso).
// ============================================================
const TIPO_BADGE_W = { entrada: 'primary', saida: 'danger', evento: 'neutral' }
const TIPO_LABEL_W = { entrada: 'Entrada', saida: 'Saída', evento: 'Evento' }

function MovWizard({ tipoInicial, prefill, onClose, onConfirm, fazenda, gps }) {
  const { Icon, Card, Button, Badge, Input } = DS()
  const Pa = P()
  const { useState, useEffect } = React
  const eventoShort = window.PastEventoShort
  const EVENTO_TIPOS = window.PastEventoTipos

  const USER_FAZENDA = fazenda || 'Mateira'
  const secoes = Pa.secoesDe(USER_FAZENDA)
  const isEvento = tipoInicial === 'evento'

  // ---- datas ----
  const pad = (n) => String(n).padStart(2, '0')
  const isoOf = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
  const brOf = (iso) => { const [y, m, d] = iso.split('-'); return `${d}/${m}/${y}` }
  const ISO_HOJE = isoOf(Pa.HOJE)
  const brToISO = (br) => { if (!br) return ISO_HOJE; const [d, m, y] = br.split('/'); return `${y}-${m}-${d}` }
  const edit = !!(prefill && prefill.edit)
  const fromNearby = !!(prefill && prefill.nearby)
  const prefMover = !!(prefill && prefill.modId != null && !prefill.edit && !prefill.nearby)

  // ---- estado ----
  const [secaoNome, setSecaoNome] = useState(prefill ? (prefill.secao || '') : '')
  const [modId, setModId] = useState(prefill && prefill.modId != null ? String(prefill.modId) : '')
  const [acao, setAcao] = useState((edit && prefill.acao) || 'mover') // 'mover' (padrão) | 'saida' (só em edição de registro antigo)
  const [destMode, setDestMode] = useState(edit && prefill.destMode ? prefill.destMode : 'mesmo')
  const [destStage, setDestStage] = useState(edit ? 'piquete' : 'secao')
  const [destSecaoNome, setDestSecaoNome] = useState(edit && prefill.destSecao ? prefill.destSecao : '')
  const [destModId, setDestModId] = useState(edit && prefill.destModId ? String(prefill.destModId) : '')
  const [piqDest, setPiqDest] = useState(edit && prefill.piqDest ? prefill.piqDest : '')
  // 1 categoria por piquete: o lote é uma categoria + uma quantidade.
  const [cat, setCat] = useState(edit && prefill && prefill.cat ? prefill.cat : '')
  const [qtd, setQtd] = useState(edit && prefill && prefill.qtd != null ? String(prefill.qtd) : '')
  const [piquete, setPiquete] = useState(edit && prefill.piquete ? prefill.piquete : '') // evento (opcional)
  const [eventoTipo, setEventoTipo] = useState(edit && prefill.eventoTipo ? prefill.eventoTipo : '')
  const [busca, setBusca] = useState('')
  const [dataISO, setDataISO] = useState(edit && prefill.data ? brToISO(prefill.data) : ISO_HOJE)
  const [sheet, setSheet] = useState(null) // seletor aberto: {k:'cat'|'qtd'|'data'|'piq'|'destmod', i?, chain?}
  const [piqMov, setPiqMov] = useState(prefill && prefill.piquete ? prefill.piquete : '') // piquete escolhido (nível piquete)
  const [manual, setManual] = useState(false) // oculta a sugestão "perto de você" e cai na escolha manual

  const secao = secoes.find(s => s.nome === secaoNome)
  const mod = Pa.MODULOS.find(m => String(m.id) === modId)
  const destSecao = secoes.find(s => s.nome === destSecaoNome)
  const destMod = Pa.MODULOS.find(m => String(m.id) === destModId)
  const piqSelLote = mod && piqMov ? Pa.loteNoPiquete(mod, piqMov) : null   // lote no piquete escolhido (ou null)
  const piqVazio = !!(mod && piqMov && !piqSelLote)                          // piquete escolhido sem lote → ENTRADA
  const piqOrig = piqMov                                                     // origem do movimento = piquete escolhido

  // ---- lote (1 categoria) ----
  // O lote do piquete é uma categoria e uma quantidade. Na saída, a quantidade pode
  // ser menor que a existente — o resto fica no piquete.
  const totalCab = parseInt(qtd) || 0
  const totalUA = totalCab * (Pa.FATOR[cat] || 0)
  const itensOk = !!cat && totalCab > 0
  const existente = piqSelLote ? piqSelLote.qtd : 0
  const restaNoPiquete = Math.max(0, existente - totalCab)

  // Proximidade por centroide (mesma métrica da Home) — ordena listas de módulo quando o GPS permite.
  const gpsOk = gps === 'ok' || gps === 'vazio'
  const DIST_SEQ = [130, 240, 380, 560, 690, 880, 1150, 1600, 2200, 2900, 3600, 4300]
  const _allMods = secoes.flatMap((s) => s.modulos)
  const distMap = {}; _allMods.forEach((m, i) => { distMap[m.id] = (DIST_SEQ[i] != null ? DIST_SEQ[i] : 5000 + (i - 12) * 650) + (gps === 'vazio' ? 900 : 0) })
  const fmtDist = (d) => d < 1000 ? `${d} m` : `${(d / 1000).toFixed(1).replace('.', ',')} km`
  const sortByDist = (arr) => gpsOk ? [...arr].sort((a, b) => (distMap[a.id] || 0) - (distMap[b.id] || 0)) : arr

  // pré-preenche a composição a partir do piquete escolhido (lotes presentes) ou limpa (entrada)
  useEffect(() => {
    if (edit) return
    const l = mod && piqMov ? Pa.loteNoPiquete(mod, piqMov) : null
    if (l) { setCat(l.categoria); setQtd(String(l.qtd)) }
    else { setCat(''); setQtd('') }
  }, [modId, piqMov])

  // ---- etapas dinâmicas (só as escolhas de navegação) ----
  const steps = (() => {
    // Evento: primeiro O QUE foi feito, depois ONDE (seção → módulo → piquete).
    if (isEvento) return ['tipoEvento', 'secao', 'modulo', 'piquete', 'revisao']
    const base = ['secao', 'modulo', 'piqSel']
    if (!piqMov) return base
    if (piqVazio) return [...base, 'revisao']                         // ENTRADA (piquete vazio)
    if (acao === 'saida') return [...base, 'revisao']                 // SAÍDA (só via edição de registro antigo)
    return [...base, 'destino', 'revisao']                            // MOVER — único caminho no campo
  })()

  const initStep = edit ? steps.length - 1 : isEvento ? 0 : (prefill && prefill.piquete) ? 3 : (prefill && prefill.modId != null) ? 2 : 0
  const [step, setStep] = useState(initStep < 0 ? 0 : initStep)
  const cur = steps[step]
  // Aberto por um módulo próximo: a contagem começa na escolha de piquete (seção e módulo já resolvidos)
  const nearOff = fromNearby ? Math.max(0, steps.indexOf('piqSel')) : 0
  // Módulo de destino: default é a própria origem; trocável no topo via bottom sheet.
  const destModoOutro = !!(destMod && String(destMod.id) !== modId)
  const destModSel = destModoOutro ? destMod : mod
  const moverOutro = !isEvento && acao === 'mover' && destModoOutro

  const cabNoPiquete = (m, p) => { const l = Pa.loteNoPiquete(m, p); return l ? l.qtd : 0 }
  const qtdPorPiquete = (m) => Object.fromEntries(Pa.lotesDoMod(m).map(l => [l.piquete, l.qtd]))

  const go = () => setStep(step + 1)

  const back = () => {
    if (sheet) return setSheet(null)
    if (cur === 'revisao' && acao === 'saida' && !edit && !piqVazio) return setAcao('mover')  // volta ao destino
    if (fromNearby && step <= nearOff) return onClose()   // veio do "Perto de você": volta para Registrar
    if (step > 0) return setStep(step - 1)
    onClose()
  }

  // validade para salvar (revisão)
  const podeSalvar = isEvento ? !!(mod && eventoTipo) : !!(mod && itensOk)

  const confirmar = () => {
    if (!podeSalvar) return
    const data = brOf(dataISO)
    let records = [], toast = {}
    if (isEvento) {
      records = [{ tipo: 'evento', secao: secaoNome, modNome: mod.nome, fazenda: USER_FAZENDA, eventoTipo, piquete: piquete || null, data }]
      toast = { tone: 'info', title: 'Evento registrado', msg: `${eventoShort(eventoTipo)} · módulo ${mod.nome}. Salvo no aparelho.` }
    } else if (piqVazio) {
      const piq = piqMov || mod.piquetes[0]
      records = [{ tipo: 'entrada', secao: secaoNome, modNome: mod.nome, fazenda: USER_FAZENDA, cat, qtd: totalCab, piquete: piq, data }]
      toast = { tone: 'success', title: 'Entrada salva', msg: `${Pa.fmt(totalCab)} ${cat} no módulo ${mod.nome}, piquete ${piq}. Salvo no aparelho.` }
    } else if (acao === 'saida') {
      const piq = piqMov || piqOrig
      records = [{ tipo: 'saida', secao: secaoNome, modNome: mod.nome, fazenda: USER_FAZENDA, cat, qtd: totalCab, piquete: piq, data }]
      toast = { tone: 'alert', title: 'Saída registrada', msg: `${Pa.fmt(totalCab)} ${cat} · módulo ${mod.nome}, piquete ${piq} deixou o sistema. Salvo no aparelho.` }
    } else {
      const g = 'g' + Date.now()
      const dm = (moverOutro && destMod) ? destMod : mod
      records = [
        { tipo: 'saida', grupoId: g, secao: secaoNome, modNome: mod.nome, fazenda: USER_FAZENDA, cat, qtd: totalCab, piquete: piqOrig, data },
        { tipo: 'entrada', grupoId: g, secao: dm.secao, modNome: dm.nome, fazenda: USER_FAZENDA, cat, qtd: totalCab, piquete: piqDest, data },
      ]
      toast = moverOutro
        ? { tone: 'info', title: 'Lote movido', msg: `Módulo ${mod.nome} → ${dm.nome} · ${Pa.fmt(totalCab)} cabeças. Saída + entrada salvas no aparelho.` }
        : { tone: 'info', title: 'Lote movido', msg: `Módulo ${mod.nome} · ${Pa.fmt(totalCab)} cabeças do piquete ${piqOrig} para o ${piqDest}. Salvo no aparelho.` }
    }
    onConfirm({ records, toast, tipo: tipoInicial })
  }

  // ============= componentes internos (DS) =============
  const SecLabel = ({ children, style }) => (
    <div style={{ fontSize: 'var(--font-size-xsm)', fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish)',
      textTransform: 'uppercase', letterSpacing: 'var(--letter-space-xs)', margin: '4px 0 10px 4px', ...style }}>{children}</div>
  )

  const SelCard = ({ selected, onClick, children }) => (
    <Card onClick={onClick} padding="16px 16px" style={{ flexDirection: 'row', alignItems: 'center', gap: 12, cursor: 'pointer',
      borderColor: selected ? 'var(--color-primary)' : 'var(--color-neutral-200)',
      background: selected ? 'var(--color-primary-30)' : 'var(--color-neutral-light-100)' }}>
      <div style={{ flex: 1, minWidth: 0 }}>{children}</div>
      <Icon name={selected ? 'checkmark-circle-outline' : 'chevron-forward'} size={22} color={selected ? 'var(--color-primary)' : 'var(--color-neutral-300)'} />
    </Card>
  )

  const SecaoRow = ({ s, selected, onClick }) => (
    <SelCard selected={selected} onClick={onClick}>
      <div style={{ fontSize: 18, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)' }}>{s.nome}</div>
      <div style={{ fontSize: 14, color: 'var(--color-grayish)', marginTop: 3 }}>{s.modulos.length} módulos</div>
    </SelCard>
  )

  const ModTag = ({ vazio }) => (
    <span style={{ fontSize: 12, fontWeight: 'var(--font-weight-bold)', textTransform: 'uppercase', letterSpacing: 'var(--letter-space-xs)',
      padding: '2px 8px', borderRadius: 99, whiteSpace: 'nowrap', flexShrink: 0,
      background: vazio ? 'var(--color-neutral-light-500)' : 'var(--color-primary-30)',
      color: vazio ? 'var(--color-grayish)' : 'var(--color-success-dark)' }}>{vazio ? 'Sem lote' : 'Com lote'}</span>
  )

  const ModRow = ({ m, selected, onClick, tag }) => (
    <SelCard selected={selected} onClick={onClick}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ fontSize: 18, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)' }}>Módulo {m.nome}</div>
        {tag && <window.PastStatusTag status={m.status} />}
      </div>
      <div style={{ fontSize: 14, color: 'var(--color-grayish)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: 3 }}>
        {`${Pa.fmt(m.area)} ha`}
      </div>
    </SelCard>
  )

  // Grid de piquetes — escolha primária. O piquete de origem ("lote aqui") é marcado
  // com borda tracejada; piquetes que JÁ têm lote aparecem como "com lote" e não são
  // tocáveis (1 lote por piquete). Livres ficam disponíveis para receber o lote.
  // qtdMap: piquete → cabeças presentes. Quando vem preenchido, o piquete ocupado
  // aparece em azul com a quantidade ("F / 96 cab") em vez do genérico "com lote".
  const PiqGrid = ({ piquetes, atual, value, disabled, ocupados = [], juntar, onPick, qtdMap }) => (

    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
      {piquetes.map(p => {
        const on = value === p
        const isAtual = atual === p
        const isOcup = !isAtual && ocupados.includes(p)
        const dis = disabled === p || (isOcup && !juntar)
        const nOcup = qtdMap && isOcup ? qtdMap[p] : 0
        const azul = !!nOcup
        return (
          <Card key={p} onClick={dis ? undefined : () => onPick(p)} padding="12px 4px 9px" style={{ alignItems: 'center', textAlign: 'center', minHeight: 44, cursor: dis ? 'default' : 'pointer',
            borderWidth: (on || isAtual) ? 2 : 1,
            borderStyle: (isAtual && !on) ? 'dashed' : 'solid',
            borderColor: on ? 'var(--color-primary)' : isAtual ? 'var(--color-grayish)' : azul ? 'var(--color-info)' : isOcup ? 'var(--color-primary-30)' : 'var(--color-neutral-200)',
            background: on ? 'var(--color-primary)' : isAtual ? 'var(--color-neutral-light-300)' : azul ? 'var(--color-info-light-100)' : isOcup ? 'var(--color-primary-30)' : 'var(--color-neutral-light-100)' }}>
            <div style={{ fontSize: 22, fontWeight: 'var(--font-weight-bold)', color: on ? '#fff' : azul ? 'var(--color-info-dark)' : isOcup ? 'var(--color-success-dark)' : 'var(--color-grayish-dark)', lineHeight: 1 }}>{p}</div>
            <div style={{ fontSize: 11, fontWeight: ((isAtual || isOcup) && !on) ? 'var(--font-weight-bold)' : 'var(--font-weight-semibold)', marginTop: 5, whiteSpace: 'nowrap',
              color: on ? 'rgba(255,255,255,0.9)' : isAtual ? 'var(--color-grayish-dark)' : azul ? 'var(--color-info-dark)' : isOcup ? 'var(--color-success-dark)' : 'var(--color-grayish)' }}>
              {isAtual ? 'lote aqui' : azul ? `${Pa.fmt(nOcup)} cab` : isOcup ? 'com lote' : 'livre'}
            </div>
          </Card>
        )
      })}
    </div>
  )

  const Connector = () => (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '7px 0' }}>
      <span style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--color-neutral-light-500)', border: '2px solid var(--color-neutral-light-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <Icon name="chevron-down" size={15} color="var(--color-info)" />
      </span>
    </div>
  )

  const EmptyBox = ({ children }) => (
    <div style={{ border: '1px dashed var(--color-neutral-200)', borderRadius: 'var(--border-radius-default)', padding: '24px 16px', textAlign: 'center', color: 'var(--color-grayish)', fontSize: 14 }}>{children}</div>
  )

  // ---- revisão: faixa de contexto (só leitura) + card único de linhas ----
  const LBL = { fontSize: 'var(--font-size-xsm)', fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish)', textTransform: 'uppercase', letterSpacing: 'var(--letter-space-xs)', flexShrink: 0 }
  // Faixa escaneável, só leitura, no topo da revisão.
  const CtxStrip = ({ children }) => (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, minHeight: 44, padding: '12px 16px', marginTop: 12, marginBottom: 14, borderRadius: 'var(--border-radius-default)', background: 'var(--color-neutral-light-300)', fontSize: 15, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)' }}>{children}</div>
  )
  const Arrow = () => (
    <span style={{ display: 'inline-flex', width: 24, height: 24, borderRadius: '50%', flexShrink: 0, background: 'var(--color-primary-30)', alignItems: 'center', justifyContent: 'center' }}><Icon name="chevron-forward" size={14} color="var(--color-primary)" /></span>
  )
  // Linha rótulo/valor: linha inteira tocável, feedback de toque, controle de edição visível à direita.
  // emphasis (Categoria/Quantidade) = acento fino: barra vertical em --color-primary + tag "confira", sem fundo.
  // Obrigatório vazio → placeholder claro ("Toque para…"). read-only remove toque e controle.
  const RevRow = ({ label, value, placeholder, onClick, emphasis, first, readOnly }) => {
    const empty = !value
    const press = (bg) => (e) => { if (!readOnly) e.currentTarget.style.background = bg }
    return (
      <div onClick={readOnly ? undefined : onClick}
        onPointerDown={press('var(--color-neutral-light-300)')} onPointerUp={press('transparent')} onPointerLeave={press('transparent')}
        style={{ display: 'flex', alignItems: 'center', gap: 12, minHeight: 60, padding: '12px 16px', cursor: readOnly ? 'default' : 'pointer', WebkitTapHighlightColor: 'transparent', transition: 'background .1s ease',
        borderTop: first ? 'none' : 'var(--border-neutral-light)',
        boxShadow: emphasis ? 'inset 3px 0 0 var(--color-primary)' : 'none' }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={LBL}>{label}</div>
          <div style={{ fontSize: 20, fontWeight: 'var(--font-weight-bold)', marginTop: 4, lineHeight: 1.15, color: empty ? 'var(--color-grayish-light)' : 'var(--color-grayish-dark)' }}>{value || placeholder}</div>
        </div>
        {!readOnly && (
          <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 36, height: 36, borderRadius: 'var(--border-radius-default)', background: 'var(--color-neutral-light-300)', flexShrink: 0 }}>
            <Icon name="pencil" size={17} color="var(--color-grayish)" />
          </span>
        )}
      </div>
    )
  }

  const dataRow = (first) => <RevRow first={first} label="Data" value={brOf(dataISO)} onClick={() => setSheet({ k: 'data' })} />
  // piquete editável da entrada/saída (nível piquete) — default vem pré-preenchido
  const piqRow = (first) => <RevRow first={first} label="Piquete" value={piqMov} placeholder="Toque para escolher piquete" onClick={() => setSheet({ k: 'piq' })} />

  // ---- LOTE (1 categoria) ----------------------------------------------------
  // Categoria e quantidade são duas linhas editáveis por toque. Na saída, reduzir a
  // quantidade deixa o resto no piquete.
  const LoteBloco = ({ saida }) => (
    <>
      <div style={{ margin: '14px 2px 8px', fontSize: 'var(--font-size-xsm)', fontWeight: 'var(--font-weight-bold)', textTransform: 'uppercase', letterSpacing: 'var(--letter-space-xs)', color: 'var(--color-grayish)' }}>
        {saida ? 'O que sai do piquete' : 'Confira os dados do lote'}
      </div>
      <Card padding="0">
        <RevRow first emphasis label="Categoria" value={cat} placeholder="Toque para escolher a categoria" onClick={() => setSheet({ k: 'cat' })} />
        <RevRow emphasis label="Quantidade" value={totalCab > 0 ? `${Pa.fmt(totalCab)} cabeças` : ''} placeholder="Toque para informar a quantidade" onClick={() => setSheet({ k: 'qtd' })} />
      </Card>
      {saida && restaNoPiquete > 0 && (
        <div style={{ fontSize: 12.5, color: 'var(--color-grayish)', margin: '8px 2px 0' }}>Ficam {Pa.fmt(restaNoPiquete)} cabeças no piquete {piqOrig}.</div>
      )}
      {totalCab > 0 && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minHeight: 48, marginTop: 8, padding: '9px 14px', borderRadius: 'var(--border-radius-default)', background: 'var(--color-neutral-light-300)' }}>
          <span style={{ flex: 1, minWidth: 0, fontSize: 14, color: 'var(--color-grayish)' }}>{saida ? 'Sai do piquete' : 'Carga do lote'}</span>
          <span style={{ flexShrink: 0, fontSize: 16, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)', whiteSpace: 'nowrap' }}>{Pa.fmt(Math.round(totalUA))} UA</span>
        </div>
      )}
    </>
  )

  // ---- seletores (bottom sheet) ----
  const SheetShell = ({ title, children }) => (
    <div onClick={() => setSheet(null)} style={{ position: 'absolute', inset: 0, zIndex: 60, background: 'rgba(0,0,0,0.4)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: '#fff', borderRadius: '18px 18px 0 0', padding: '12px 20px 26px', minHeight: '46%', maxHeight: '82%', overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
        <div style={{ width: 40, height: 4, borderRadius: 99, background: 'var(--color-neutral-200)', margin: '0 auto 16px', flexShrink: 0 }} />
        <div style={{ fontSize: 'var(--font-size-xsm)', fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish)', textTransform: 'uppercase', letterSpacing: 'var(--letter-space-xs)', margin: '0 0 12px 2px', flexShrink: 0 }}>{title}</div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>{children}</div>
      </div>
    </div>
  )

  const MON = ['janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro']
  const DOW = ['domingo', 'segunda-feira', 'terça-feira', 'quarta-feira', 'quinta-feira', 'sexta-feira', 'sábado']

  let sheetNode = null
  const sk = sheet ? sheet.k : null
  if (sk === 'piq') {
    sheetNode = (
      <SheetShell title={piqVazio ? 'Piquete de entrada' : 'Piquete de saída'}>
        <PiqGrid piquetes={mod ? mod.piquetes : []} atual={mod && mod.atual ? mod.atual.piquete : null} value={piqMov} onPick={(p) => { setPiqMov(p); setSheet(null) }} />
      </SheetShell>
    )
  } else if (sk === 'cat') {
    sheetNode = (
      <SheetShell title="Categoria do lote">
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {Pa.CATEGORIAS.map((c, i) => {
            const on = cat === c.nome
            return (
              <div key={c.nome} onClick={() => { setCat(c.nome); (sheet.chain || !totalCab) ? setSheet({ k: 'qtd' }) : setSheet(null) }}
                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '15px 4px', cursor: 'pointer', borderBottom: i < Pa.CATEGORIAS.length - 1 ? 'var(--border-neutral-light)' : 'none' }}>
                <span style={{ fontSize: 16, fontWeight: on ? 'var(--font-weight-bold)' : 'var(--font-weight-semibold)', color: on ? 'var(--color-primary)' : 'var(--color-grayish-dark)' }}>{c.nome}</span>
                {on && <Icon name="checkmark-circle-outline" size={22} color="var(--color-primary)" />}
              </div>
            )
          })}
        </div>
      </SheetShell>
    )
  } else if (sk === 'qtd') {
    const nq = totalCab
    const setN = (v) => setQtd(String(Math.max(0, v)))
    sheetNode = (
      <SheetShell title={cat ? `Quantidade · ${cat}` : 'Quantidade (cabeças)'}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 6 }}>
          <button onClick={() => setN(nq - 1)} disabled={nq <= 0} style={{ width: 60, height: 76, flexShrink: 0, borderRadius: 'var(--border-radius-default)', border: '1px solid var(--color-neutral-200)', background: 'var(--color-neutral-light-100)', cursor: nq <= 0 ? 'not-allowed' : 'pointer', opacity: nq <= 0 ? 0.4 : 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="remove" size={26} color="var(--color-grayish-dark)" />
          </button>
          <input type="number" inputMode="numeric" autoFocus value={qtd} placeholder="0"
            onChange={(e) => setQtd(e.target.value.replace(/\D/g, ''))}
            style={{ flex: 1, minWidth: 0, height: 76, padding: '0 12px', borderRadius: 'var(--border-radius-input)', border: '1px solid var(--color-neutral-200)',
              fontSize: 40, fontWeight: 'var(--font-weight-bold)', fontFamily: 'var(--font-family)', color: 'var(--color-grayish-dark)', textAlign: 'center', background: 'var(--color-neutral-light-100)' }} />
          <button onClick={() => setN(nq + 1)} style={{ width: 60, height: 76, flexShrink: 0, borderRadius: 'var(--border-radius-default)', border: '1px solid var(--color-primary)', background: 'var(--color-primary-30)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="add" size={26} color="var(--color-primary)" />
          </button>
        </div>
        {/* atalhos +10/+25… removidos; espaço reservado mantém a altura do sheet */}
        <div style={{ height: 56, flexShrink: 0 }}></div>
        <window.MButton disabled={nq <= 0} onClick={() => setSheet(null)} style={{ marginTop: 'auto', paddingTop: 0 }}>Confirmar</window.MButton>
      </SheetShell>
    )
  } else if (sk === 'data') {
    const dias = [0, 1, 2, 3].map((off) => {
      const d = Pa.addDays(Pa.HOJE, -off)
      return { iso: isoOf(d), dia: d.getDate(), mes: MON[d.getMonth()], rotulo: off === 0 ? 'Hoje' : off === 1 ? 'Ontem' : DOW[d.getDay()] }
    })
    sheetNode = (
      <SheetShell title="Data">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {dias.map((o) => {
            const on = dataISO === o.iso
            return (
              <div key={o.iso} onClick={() => { setDataISO(o.iso); setSheet(null) }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', borderRadius: 'var(--border-radius-default)', cursor: 'pointer',
                border: '1px solid ' + (on ? 'var(--color-primary)' : 'var(--color-neutral-200)'), background: on ? 'var(--color-primary-30)' : 'var(--color-neutral-light-100)' }}>
                <div>
                  <div style={{ fontSize: 16, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)' }}>{o.dia} de {o.mes}</div>
                  <div style={{ fontSize: 12, color: 'var(--color-grayish)', marginTop: 1 }}>{o.rotulo}</div>
                </div>
                {on && <Icon name="checkmark-circle-outline" size={20} color="var(--color-primary)" />}
              </div>
            )
          })}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 4 }}>
            <span style={{ fontSize: 14, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish)', flexShrink: 0 }}>Outra data</span>
            <input type="date" value={dataISO} max={ISO_HOJE} onChange={(e) => { setDataISO(e.target.value || ISO_HOJE) }}
              style={{ flex: 1, height: 48, padding: '0 12px', borderRadius: 'var(--border-radius-input)', border: '1px solid var(--color-neutral-200)',
                fontSize: 16, fontFamily: 'var(--font-family)', color: 'var(--color-grayish-dark)', background: 'var(--color-neutral-light-100)' }} />
          </div>
        </div>
      </SheetShell>
    )
  } else if (sk === 'destmod') {
    // Reaproveita o mesmo card de módulo da Home/Consultar; ordenado por distância quando o GPS permite.
    const todosMods = secoes.flatMap(s => s.modulos)
    sheetNode = (
      <SheetShell title="Módulo de destino">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          {sortByDist(todosMods).map(m => (
            <ModRow key={m.id} m={m} tag selected={String(destModSel.id) === String(m.id)}
              onClick={() => { setDestModId(String(m.id) === modId ? '' : String(m.id)); setPiqDest(''); setSheet(null) }} />
          ))}
        </div>
      </SheetShell>
    )
  }
  const AUTO = ['secao', 'modulo', 'piqSel', 'destino', 'piquete', 'tipoEvento']
  let footer = null
  if (cur === 'revisao') footer = (<>
    <window.MButton disabled={!podeSalvar} onClick={confirmar}>{edit ? 'Salvar alterações' : 'Salvar'}</window.MButton>
    <window.MButton variant="ghost" onClick={onClose} style={{ marginTop: 6 }}>Cancelar</window.MButton>
  </>)
  else if (cur === 'destino') footer = (
    <button onClick={() => { setPiqDest(''); setAcao('saida') }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, width: '100%', minHeight: 52, cursor: 'pointer', fontFamily: 'var(--font-family)', fontSize: 15, fontWeight: 'var(--font-weight-bold)', borderRadius: 'var(--border-radius-default)', border: '1px solid var(--color-danger)', background: 'transparent', color: 'var(--color-danger)' }}>
      Saiu da fazenda
    </button>
  )
  else if (!AUTO.includes(cur)) footer = <window.MButton onClick={go}>Continuar</window.MButton>

  // título adaptativo
  let tituloTela = 'Movimentar lote'
  if (edit) tituloTela = 'Editar lançamento'
  else if (isEvento) tituloTela = 'Registrar evento'
  else if (piqVazio) tituloTela = 'Entrada de lote'
  else if (acao === 'saida') tituloTela = 'Saída de lote'
  else if (acao === 'mover') tituloTela = 'Mover lote'
  if (fromNearby && cur === 'piqSel' && mod) tituloTela = `Módulo ${mod.nome}`

  // ============= conteúdo =============
  let body
  const precisaMod = ['piqSel', 'destino', 'piquete', 'revisao'].includes(cur)
  if (precisaMod && !mod) {
    body = (<>
      <window.MHeading>Escolha o módulo primeiro</window.MHeading>
      <window.MSub>Volte uma etapa e toque no módulo.</window.MSub>
    </>)
  } else if (cur === 'secao') {
    const showSug = gpsOk && !edit && !prefill && !manual
    if (showSug) {
      const perto = sortByDist(_allMods).slice(0, 6)
      body = (<>
        <window.MHeading>Perto de você</window.MHeading>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          {perto.map(m => (
            <ModRow key={m.id} m={m} tag
              onClick={() => { setSecaoNome(m.secao); setModId(String(m.id)); setPiqDest(''); setDestMode('mesmo'); setAcao('mover'); setPiqMov(''); setStep(steps.indexOf(isEvento ? 'piquete' : 'piqSel')) }} />
          ))}
        </div>
        <div onClick={() => setManual(true)} role="button" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, minHeight: 48, marginTop: 16, cursor: 'pointer', color: 'var(--color-primary)', fontWeight: 'var(--font-weight-bold)', fontSize: 15 }}>
          <Icon name="list-outline" size={18} color="var(--color-primary)" />Escolher manualmente
        </div>
      </>)
    } else {
      body = (<>
        <window.MHeading>{isEvento ? 'Onde foi feito?' : 'Qual seção?'}</window.MHeading>
        <window.MSub>{isEvento && eventoTipo ? eventoShort(eventoTipo) + ' · ' : ''}Fazenda {USER_FAZENDA}</window.MSub>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {secoes.map(s => (
            <SecaoRow key={s.nome} s={s} selected={secaoNome === s.nome}
              onClick={() => { setSecaoNome(s.nome); setModId(''); setAcao('mover'); go() }} />
          ))}
        </div>
      </>)
    }
  } else if (cur === 'modulo') {
    const lista = secao ? secao.modulos : []
    body = (<>
      <window.MHeading>{isEvento ? 'Em qual módulo?' : 'Qual módulo?'}</window.MHeading>
      {isEvento && eventoTipo && <window.MSub>{eventoShort(eventoTipo)}</window.MSub>}
      {lista.length ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          {sortByDist(lista).map(m => (
            <ModRow key={m.id} m={m} tag selected={modId === String(m.id)}
              onClick={() => { setModId(String(m.id)); setPiqDest(''); setDestMode('mesmo'); setAcao('mover'); go() }} />
          ))}
        </div>
      ) : <EmptyBox>Nenhum módulo ativo nesta seção.</EmptyBox>}
    </>)
  } else if (cur === 'piqSel') {
    const lotesMod = Pa.lotesDoMod(mod)
    const loteEm = (p) => lotesMod.find(l => l.piquete === p) || null
    const nComLote = lotesMod.length
    body = (<>
      <window.MHeading>Qual piquete?</window.MHeading>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
        {mod.piquetes.map(p => {
          const l = loteEm(p)
          const on = piqMov === p
          return (
            <Card key={p} onClick={() => { setPiqMov(p); setAcao('mover'); go() }} padding="13px 14px" style={{ flexDirection: 'row', alignItems: 'center', gap: 12, cursor: 'pointer', borderColor: on ? 'var(--color-primary)' : 'var(--color-neutral-200)', background: on ? 'var(--color-primary-30)' : 'var(--color-neutral-light-100)' }}>
              <span style={{ width: 44, height: 44, borderRadius: 12, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 'var(--font-weight-bold)', background: l ? 'var(--color-primary-30)' : 'var(--color-neutral-light-500)', color: l ? 'var(--color-primary)' : 'var(--color-grayish)' }}>{p}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontSize: 16, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)' }}>Piquete {p}</span>
                  <ModTag vazio={!l} />
                </div>
                <div style={{ fontSize: 13, color: 'var(--color-grayish)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {l ? (() => {
                    const dias = `há ${l.diasPiquete} ${l.diasPiquete === 1 ? 'dia' : 'dias'}`
                    return `${Pa.fmt(l.qtd)} ${l.categoria} · ${dias}`
                  })() : (() => {
                    const d = window.PastDiasDescanso ? window.PastDiasDescanso(USER_FAZENDA, mod, p) : 0
                    return d > 0 ? `${Pa.fmt(d)} ${d === 1 ? 'dia' : 'dias'} de descanso` : 'Disponível para entrada'
                  })()}
                </div>
              </div>
              <Icon name="chevron-forward" size={20} color="var(--color-neutral-300)" />
            </Card>
          )
        })}
      </div>
    </>)
    } else if (cur === 'destino') {
    const mesmoMod = !destModoOutro
    // Escolher o piquete de destino move o lote inteiro — 1 categoria por piquete.
    body = (<>
      <window.MHeading>Para onde vai o lote?</window.MHeading>
      <div style={{ fontSize: 'var(--font-size-xsm)', fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish)', textTransform: 'uppercase', letterSpacing: 'var(--letter-space-xs)', margin: '14px 2px 8px' }}>
        Saindo de módulo {mod.nome} · piquete {piqOrig}
      </div>
      <div style={{ padding: '12px 14px 13px', marginBottom: 22, borderRadius: 'var(--border-radius-default)', background: 'var(--color-neutral-light-300)' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
          <span style={{ minWidth: 0, fontSize: 22, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)', lineHeight: 1.1 }}>{Pa.fmt(totalCab)} cabeças</span>
          <span style={{ flexShrink: 0, fontSize: 15, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish)', whiteSpace: 'nowrap' }}>{Pa.fmt(Math.round(totalUA))} UA</span>
        </div>
        <div style={{ fontSize: 13, color: 'var(--color-grayish)', marginTop: 5, lineHeight: 1.35 }}>{cat}</div>
      </div>

      <SecLabel style={{ marginTop: 0, marginBottom: 10 }}>Piquete de destino</SecLabel>
      <button onClick={() => setSheet({ k: 'destmod' })} style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', minHeight: 52, padding: '10px 12px 10px 14px', marginBottom: 14, cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-family)', borderRadius: 'var(--border-radius-default)', border: '1px solid var(--color-neutral-200)', background: 'var(--color-neutral-light-100)' }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 16, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)', lineHeight: 1.2 }}>Módulo {destModSel.nome}</div>
          <div style={{ fontSize: 12, color: 'var(--color-grayish)', marginTop: 2 }}>{mesmoMod ? 'mesmo módulo' : 'Seção ' + destModSel.secao}</div>
        </div>
        <span style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 13, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-primary)' }}>
          Trocar<Icon name="chevron-down" size={15} color="var(--color-primary)" />
        </span>
      </button>
      <PiqGrid piquetes={destModSel.piquetes} atual={mesmoMod ? piqOrig : null} value={piqDest} disabled={mesmoMod ? piqOrig : null} ocupados={Pa.lotesDoMod(destModSel).map(l => l.piquete).filter(p => !(mesmoMod && p === piqOrig))} juntar qtdMap={qtdPorPiquete(destModSel)} onPick={(p) => { setPiqDest(p); go() }} />

    </>)
  } else if (cur === 'piquete') {
    body = (<>
      <window.MHeading>Onde foi?</window.MHeading>
      {/* Preview do que já foi escolhido — evento + módulo em foco. */}
      <Card padding="0.85em 1em" style={{ flexDirection: 'row', alignItems: 'center', gap: 12, marginTop: 4, marginBottom: 18, background: 'var(--color-neutral-light-300)' }}>
        <span style={{ width: 38, height: 38, borderRadius: 'var(--border-radius-default)', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--color-warning-light-100)' }}>
          <Icon name="clipboard" size={18} color="var(--color-warning)" />
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 16, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)', lineHeight: 1.2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{eventoTipo ? eventoShort(eventoTipo) : 'Evento'}</div>
          <div style={{ fontSize: 13, color: 'var(--color-grayish)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>Módulo {mod.nome} · Seção {secaoNome}</div>
        </div>
      </Card>
      <SecLabel style={{ marginBottom: 8 }}>Aplicar em</SecLabel>
      <Card onClick={() => { setPiquete(''); go() }} padding="0.95em 1em" style={{ flexDirection: 'row', alignItems: 'center', gap: 12, cursor: 'pointer', marginBottom: 14, borderColor: 'var(--color-neutral-200)', background: 'var(--color-neutral-light-100)' }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 16, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)' }}>Módulo {mod.nome} inteiro</div>
          <div style={{ fontSize: 13, color: 'var(--color-grayish)', marginTop: 2 }}>Todos os {mod.piquetes.length} piquetes</div>
        </div>
      </Card>
      <SecLabel style={{ marginBottom: 8 }}>Ou um piquete</SecLabel>
      <PiqGrid piquetes={mod.piquetes} atual={mod.atual ? mod.atual.piquete : null} value={piquete} onPick={(p) => { setPiquete(p); go() }} />
    </>)
  } else if (cur === 'tipoEvento') {
    const q = busca.trim().toLowerCase()
    const filtrados = EVENTO_TIPOS.filter(e => e.nome.toLowerCase().includes(q))
    body = (<>
      <window.MHeading>O que foi feito?</window.MHeading>
      <window.MSub>Fazenda {USER_FAZENDA}</window.MSub>
      <div style={{ marginBottom: 16 }}>
        <Input icon="search" value={busca} onChange={(e) => setBusca(e.target.value)} placeholder="Buscar (adubo, roçada…)" />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {filtrados.map(e => {
          const on = eventoTipo === e.nome
          return (
            <Card key={e.nome} onClick={() => { setEventoTipo(e.nome); go() }} padding="0.85em 1em" style={{ flexDirection: 'row', alignItems: 'center', gap: 12, cursor: 'pointer', borderColor: on ? 'var(--color-warning)' : 'var(--color-neutral-200)', background: on ? 'var(--color-warning-light-100)' : 'var(--color-neutral-light-100)' }}>
              <Icon name="clipboard" size={17} color="var(--color-warning)" />
              <div style={{ flex: 1, fontSize: 14, fontWeight: 'var(--font-weight-semibold)', color: 'var(--color-grayish-dark)' }}>{eventoShort(e.nome)}</div>
              {on && <Icon name="checkmark-circle-outline" size={20} color="var(--color-warning)" />}
            </Card>
          )
        })}
        {!filtrados.length && <EmptyBox>Nenhum evento encontrado.</EmptyBox>}
      </div>
    </>)
  } else if (cur === 'revisao') {
    const dm = (moverOutro && destMod) ? destMod : mod
    body = (<>
      <window.MHeading>{isEvento ? 'Registrar evento' : piqVazio ? 'Registrar entrada' : acao === 'saida' ? 'Registrar saída' : acao === 'mover' ? 'Revisar movimentação' : 'Confira e salve'}</window.MHeading>

      {isEvento && (<>
        <CtxStrip>Evento · Módulo {mod.nome} · Seção {secaoNome}</CtxStrip>
        <Card padding="0">
          <RevRow first readOnly label="Evento" value={eventoShort(eventoTipo)} />
          <RevRow readOnly label="Local" value={piquete ? `Módulo ${mod.nome} · piquete ${piquete}` : `Módulo ${mod.nome} inteiro`} />
          {dataRow(false)}
        </Card>
      </>)}

      {!isEvento && piqVazio && (<>
        <CtxStrip>Entrada · Módulo {mod.nome} · Seção {secaoNome}</CtxStrip>
        <LoteBloco />
        <Card padding="0" style={{ marginTop: 12 }}>
          {piqRow(true)}
          {dataRow(false)}
        </Card>
      </>)}

      {!isEvento && !piqVazio && acao === 'saida' && (<>
        <CtxStrip>Saída · Módulo {mod.nome} · piquete {piqMov || piqOrig}</CtxStrip>
        <LoteBloco saida />
        <Card padding="0" style={{ marginTop: 12 }}>
          {piqRow(true)}
          {dataRow(false)}
        </Card>
      </>)}

      {!isEvento && !piqVazio && acao === 'mover' && (<>
        <CtxStrip>
          <span style={{ color: 'var(--color-grayish)', fontWeight: 'var(--font-weight-semibold)' }}>Módulo {mod.nome} · piquete {piqOrig}</span>
          <Arrow />
          <span style={{ color: 'var(--color-primary)', fontWeight: 'var(--font-weight-bold)' }}>{moverOutro ? `Módulo ${dm.nome} · piquete ${piqDest}` : `piquete ${piqDest}`}</span>
        </CtxStrip>
        {/* Vai o lote inteiro: nada editável aqui além da data. */}
        <Card padding="14px 16px">
          <div style={{ fontSize: 'var(--font-size-xsm)', fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish)', textTransform: 'uppercase', letterSpacing: 'var(--letter-space-xs)' }}>Vai o lote inteiro</div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginTop: 6 }}>
            <span style={{ minWidth: 0, fontSize: 26, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish-dark)', lineHeight: 1.1 }}>{Pa.fmt(totalCab)} cabeças</span>
            <span style={{ flexShrink: 0, fontSize: 16, fontWeight: 'var(--font-weight-bold)', color: 'var(--color-grayish)', whiteSpace: 'nowrap' }}>{Pa.fmt(Math.round(totalUA))} UA</span>
          </div>
          <div style={{ fontSize: 13.5, color: 'var(--color-grayish)', marginTop: 10 }}>{cat}</div>
        </Card>
        {(() => {
          const lDest = Pa.loteNoPiquete(dm, piqDest)
          if (!lDest) return null
          return (
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginTop: 10, padding: '11px 14px', borderRadius: 'var(--border-radius-default)', background: 'var(--color-info-light-100)' }}>
              <Icon name="information-circle-outline" size={16} color="var(--color-info-dark)" />
              <span style={{ flex: 1, fontSize: 13, color: 'var(--color-info-dark)', lineHeight: 1.4 }}>
                O piquete {piqDest} já tem {Pa.fmt(lDest.qtd)} cabeças ({lDest.categoria}). Os dois lotes ficam juntos no piquete.
              </span>
            </div>
          )
        })()}
        <Card padding="0" style={{ marginTop: 12 }}>
          {dataRow(true)}
        </Card>
      </>)}

    </>)
  }

  return (
    <window.MPhone title={tituloTela} onBack={back} footer={footer} modal={sheetNode}>
      <window.MStepProgress step={step - nearOff + 1} total={fromNearby ? Math.max(2, steps.length - nearOff) : steps.length} />
      {body}
    </window.MPhone>
  )
}

window.PastMovWizard = MovWizard