// ═══════════════════════════════════════════════════════════════
// SCREEN · Completar Cadastro (modelo Caju, progressivo)
//
// 3 secoes:
//  1. Pessoal      -> LS (escalab_dados_org_<id>) + foto em escalab_foto
//  2. Documentos   -> Supabase (tabela documentos, pgcrypto, so dono+admin)
//  3. Diversidade  -> Supabase (tabela diversidade, pgcrypto, SO o dono)
//
// Acessivel por todos exceto admin. Banner persistente no topo do app
// quando pct<100. Helpers de progresso em data.jsx (window.getCadastroProgresso).
// ═══════════════════════════════════════════════════════════════

const CAMPOS_PESSOAIS = [
  { key: 'dataNascimento', label: 'Data de nascimento',  tipo: 'date',     required: true  },
  { key: 'telefone',       label: 'Telefone (com DDD)',  tipo: 'tel',      required: true,  placeholder: '(31) 9 9999-9999' },
  { key: 'endereco',       label: 'Endereço completo',   tipo: 'textarea', required: true,  placeholder: 'Rua, número, bairro, cidade/UF, CEP' },
];

const CAMPOS_DOCUMENTOS = [
  { key: 'cpf', label: 'CPF',  tipo: 'text', required: true,  placeholder: '000.000.000-00', maxLength: 14 },
  { key: 'rg',  label: 'RG',   tipo: 'text', required: false, placeholder: 'Identidade (opcional)' },
];

const CAMPOS_DIVERSIDADE = [
  { key: 'genero',      label: 'Gênero',                 opcoes: ['Mulher cisgênero','Homem Cisgênero','Mulher Transgênero','Homem Transgênero','Não-binário','Gênero fluido','Prefiro não declarar'] },
  { key: 'etnia',       label: 'Cor/Raça (IBGE)',        opcoes: ['Branca','Parda','Preta','Amarela','Indígena','Prefiro não declarar'] },
  { key: 'orientacao',  label: 'Orientação sexual',      opcoes: ['Heterossexual','Homossexual','Bissexual','Assexual','Prefiro não me classificar','Prefiro não declarar'] },
  { key: 'religiao',    label: 'Religião',               opcoes: ['Sem religião','Católica','Evangélica','Espírita','Umbanda/Candomblé','Prefiro não declarar'] },
  { key: 'pcd',         label: 'Pessoa com deficiência', opcoes: ['Não possuo','Visual','Auditiva','Física','Intelectual','Múltipla','Prefiro não declarar'] },
  { key: 'estadoCivil', label: 'Estado civil',           opcoes: ['Solteiro(a)','Casado(a)','União estável','Divorciado(a)','Viúvo(a)','Prefiro não declarar'] },
];

function _maskCPF(v) {
  const d = (v || '').replace(/\D/g, '').slice(0, 11);
  if (d.length <= 3) return d;
  if (d.length <= 6) return `${d.slice(0,3)}.${d.slice(3)}`;
  if (d.length <= 9) return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6)}`;
  return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6,9)}-${d.slice(9)}`;
}

function _validarCPF(cpf) {
  const d = (cpf || '').replace(/\D/g, '');
  if (d.length !== 11 || /^(\d)\1+$/.test(d)) return false;
  let s = 0;
  for (let i = 0; i < 9; i++) s += Number(d[i]) * (10 - i);
  let v1 = (s * 10) % 11; if (v1 === 10) v1 = 0;
  if (v1 !== Number(d[9])) return false;
  s = 0;
  for (let i = 0; i < 10; i++) s += Number(d[i]) * (11 - i);
  let v2 = (s * 10) % 11; if (v2 === 10) v2 = 0;
  return v2 === Number(d[10]);
}

const SecaoCard = ({ titulo, descricao, icon, aviso, pct, total, preenchidos, children, onSalvar, salvando, salvo, erro }) => (
  <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, overflow: 'hidden' }}>
    <div style={{ padding: '18px 22px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', alignItems: 'flex-start', gap: 14 }}>
      <div style={{ width: 44, height: 44, borderRadius: 11, background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name={icon} size={20} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
          <h3 style={{ fontSize: 15.5, fontWeight: 700, margin: 0, color: 'var(--escalab-ink)' }}>{titulo}</h3>
          <span style={{ fontSize: 11.5, fontWeight: 700, color: pct === 100 ? '#00836B' : 'var(--escalab-mute)', background: pct === 100 ? '#E6F5F1' : 'var(--escalab-paper)', borderRadius: 999, padding: '2px 9px', letterSpacing: '.04em' }}>
            {preenchidos}/{total} {pct === 100 ? '· completo' : ''}
          </span>
        </div>
        <p style={{ fontSize: 12.5, color: 'var(--escalab-slate)', margin: '4px 0 0', lineHeight: 1.5 }}>{descricao}</p>
        {aviso && (
          <div style={{ marginTop: 8, padding: '8px 12px', background: '#FFF7EB', border: '1px solid #F0CE6A', borderRadius: 8, fontSize: 12, color: '#7A4A00', display: 'flex', gap: 7, alignItems: 'center' }}>
            <Icon name="lock" size={12} /> {aviso}
          </div>
        )}
      </div>
    </div>
    <div style={{ padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {children}
    </div>
    <div style={{ padding: '14px 22px', borderTop: '1px solid var(--escalab-line)', background: 'var(--escalab-paper)', display: 'flex', alignItems: 'center', gap: 12, justifyContent: 'flex-end' }}>
      {erro && <span style={{ fontSize: 12.5, color: '#B3261E', flex: 1 }}>{erro}</span>}
      {salvo && !erro && <span style={{ fontSize: 12.5, color: '#00836B', flex: 1, display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={12} /> Salvo</span>}
      <button onClick={onSalvar} disabled={salvando}
        style={{ border: 0, background: salvando ? '#A8B8B2' : 'var(--escalab-brand)', color: '#fff', borderRadius: 9, padding: '9px 18px', cursor: salvando ? 'not-allowed' : 'pointer', fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-sans)', display: 'inline-flex', alignItems: 'center', gap: 7 }}>
        {salvando ? 'Salvando…' : 'Salvar esta seção'}
      </button>
    </div>
  </div>
);

const InputCampo = ({ campo, valor, onChange }) => {
  const inp = { width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 'none', boxSizing: 'border-box', background: '#fff' };
  if (campo.tipo === 'textarea') {
    return <textarea value={valor || ''} onChange={e => onChange(e.target.value)} placeholder={campo.placeholder || ''} style={{ ...inp, minHeight: 70, resize: 'vertical', fontFamily: 'inherit' }} />;
  }
  if (campo.opcoes) {
    return (
      <select value={valor || ''} onChange={e => onChange(e.target.value)} style={inp}>
        <option value="">·</option>
        {campo.opcoes.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    );
  }
  if (campo.key === 'cpf') {
    return <input value={_maskCPF(valor)} onChange={e => onChange(_maskCPF(e.target.value))} placeholder={campo.placeholder || ''} maxLength={campo.maxLength} style={inp} />;
  }
  return <input type={campo.tipo || 'text'} value={valor || ''} onChange={e => onChange(e.target.value)} placeholder={campo.placeholder || ''} maxLength={campo.maxLength} style={inp} />;
};

// ── Secao Pessoal (LS) ───────────────────────────────────────────
const SecaoPessoal = ({ user, onMudou }) => {
  const [draft, setDraft] = useState(() => {
    try { return JSON.parse(localStorage.getItem(`escalab_dados_org_${user.id}`) || '{}'); }
    catch { return {}; }
  });
  const [foto, setFoto] = useState(() => (typeof getFoto === 'function' ? getFoto(user.id) : null));
  const [salvando, setSalvando] = useState(false);
  const [salvo, setSalvo] = useState(false);
  const [erro, setErro] = useState('');

  const set = (k, v) => setDraft(d => ({ ...d, [k]: v }));
  const preenchidos = CAMPOS_PESSOAIS.filter(c => (draft[c.key] || '').toString().trim()).length + (foto ? 1 : 0);
  const total = CAMPOS_PESSOAIS.length + 1;
  const pct = Math.round((preenchidos / total) * 100);

  function handleFoto(e) {
    const f = e.target.files?.[0]; if (!f) return;
    const reader = new FileReader();
    reader.onload = ev => setFoto(ev.target.result);
    reader.readAsDataURL(f);
  }

  async function salvar() {
    setErro(''); setSalvando(true);
    try {
      // LS sempre (instantaneo, fonte do frontend)
      localStorage.setItem(`escalab_dados_org_${user.id}`, JSON.stringify(draft));
      if (foto && typeof salvarFoto === 'function') salvarFoto(user.id, foto);
      // Supabase best-effort (dados_org: data_nascimento, telefone, endereco)
      if (typeof salvarDadosOrgSupabase === 'function') {
        const r = await salvarDadosOrgSupabase(user.id, draft);
        if (!r?.ok) {
          // Nao bloqueia - LS ja foi salvo. Mostra warning suave.
          setErro('Salvo localmente. Sincronizacao com servidor falhou: ' + (r?.erro || 'desconhecida') + '. Tente novamente em breve.');
          setSalvando(false);
          return;
        }
      }
      setSalvo(true); setTimeout(() => setSalvo(false), 3000);
      onMudou?.();
    } catch (err) {
      setErro('Nao consegui salvar: ' + (err?.message || 'erro desconhecido'));
    } finally { setSalvando(false); }
  }

  return (
    <SecaoCard titulo="Dados pessoais" icon="user" total={total} preenchidos={preenchidos} pct={pct}
      descricao="Informações básicas usadas em aniversariantes, contato e identidade visual do seu perfil."
      onSalvar={salvar} salvando={salvando} salvo={salvo} erro={erro}>
      <div>
        <label style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--escalab-slate)', display: 'block', marginBottom: 6, letterSpacing: '.06em', textTransform: 'uppercase' }}>Foto de perfil</label>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          {foto ? (
            <img src={foto} alt="" style={{ width: 64, height: 64, borderRadius: '50%', objectFit: 'cover', border: '1px solid var(--escalab-line)' }} />
          ) : (
            <Avatar nome={user.nome} cor={user.cor} iniciais={user.iniciais} size={64} />
          )}
          <label style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '7px 14px', cursor: 'pointer', fontSize: 12.5, fontWeight: 600, color: 'var(--escalab-slate)', background: '#fff', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon name="plus" size={12} /> {foto ? 'Trocar foto' : 'Adicionar foto'}
            <input type="file" accept="image/*" onChange={handleFoto} style={{ display: 'none' }} />
          </label>
        </div>
      </div>
      {CAMPOS_PESSOAIS.map(c => (
        <div key={c.key}>
          <label style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--escalab-slate)', display: 'block', marginBottom: 6, letterSpacing: '.06em', textTransform: 'uppercase' }}>
            {c.label} {c.required && <span style={{ color: '#B3261E' }}>*</span>}
          </label>
          <InputCampo campo={c} valor={draft[c.key]} onChange={v => set(c.key, v)} />
        </div>
      ))}
    </SecaoCard>
  );
};

// ── Secao Documentos (Supabase, pgcrypto) ─────────────────────────
const SecaoDocumentos = ({ user, onMudou }) => {
  const [draft, setDraft] = useState({ cpf: '', rg: '' });
  const [salvando, setSalvando] = useState(false);
  const [salvo, setSalvo] = useState(false);
  const [erro, setErro] = useState('');
  const [carregando, setCarregando] = useState(true);

  useEffect(() => {
    let cancelado = false;
    (async () => {
      try {
        if (typeof carregarDocumentosColab === 'function') {
          const d = await carregarDocumentosColab(user.id);
          if (!cancelado && d) setDraft({ cpf: d.cpf || '', rg: d.rg || '' });
        }
      } catch {} finally { if (!cancelado) setCarregando(false); }
    })();
    return () => { cancelado = true; };
  }, [user.id]);

  const preenchidos = CAMPOS_DOCUMENTOS.filter(c => (draft[c.key] || '').toString().trim()).length;
  const total = CAMPOS_DOCUMENTOS.length;
  const pct = Math.round((preenchidos / total) * 100);

  async function salvar() {
    setErro(''); setSalvando(true); setSalvo(false);
    if (draft.cpf && !_validarCPF(draft.cpf)) {
      setErro('CPF inválido. Confira os dígitos.'); setSalvando(false); return;
    }
    try {
      if (typeof salvarDocumentosColab !== 'function') {
        throw new Error('Função salvarDocumentosColab não carregada. Recarregue a página.');
      }
      const r = await salvarDocumentosColab(user.id, draft);
      if (r?.ok) { setSalvo(true); setTimeout(() => setSalvo(false), 3000); onMudou?.(); }
      else throw new Error(r?.erro || 'falha ao salvar');
    } catch (err) {
      setErro('Não consegui salvar: ' + (err?.message || 'erro desconhecido') + '. Conferir login no Supabase.');
    } finally { setSalvando(false); }
  }

  if (carregando) return <div style={{ padding: 20, color: 'var(--escalab-mute)', fontSize: 13 }}>Carregando documentos…</div>;

  return (
    <SecaoCard titulo="Documentos" icon="lock" total={total} preenchidos={preenchidos} pct={pct}
      descricao="CPF e RG ficam criptografados no banco. Só você e o time de GC têm acesso, com auditoria de quem leu."
      aviso="Confidencial · armazenado com pgcrypto + Vault"
      onSalvar={salvar} salvando={salvando} salvo={salvo} erro={erro}>
      {CAMPOS_DOCUMENTOS.map(c => (
        <div key={c.key}>
          <label style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--escalab-slate)', display: 'block', marginBottom: 6, letterSpacing: '.06em', textTransform: 'uppercase' }}>
            {c.label} {c.required && <span style={{ color: '#B3261E' }}>*</span>}
          </label>
          <InputCampo campo={c} valor={draft[c.key]} onChange={v => setDraft(d => ({ ...d, [c.key]: v }))} />
        </div>
      ))}
    </SecaoCard>
  );
};

// ── Secao Diversidade (Supabase, so dono ve) ──────────────────────
const SecaoDiversidade = ({ user, onMudou }) => {
  const [draft, setDraft] = useState({});
  const [salvando, setSalvando] = useState(false);
  const [salvo, setSalvo] = useState(false);
  const [erro, setErro] = useState('');
  const [carregando, setCarregando] = useState(true);

  useEffect(() => {
    let cancelado = false;
    (async () => {
      try {
        if (typeof carregarDiversidadeColab === 'function') {
          const d = await carregarDiversidadeColab(user.id);
          if (!cancelado && d) setDraft(d);
        }
      } catch {} finally { if (!cancelado) setCarregando(false); }
    })();
    return () => { cancelado = true; };
  }, [user.id]);

  const preenchidos = CAMPOS_DIVERSIDADE.filter(c => (draft[c.key] || '').toString().trim()).length;
  const total = CAMPOS_DIVERSIDADE.length;
  const pct = Math.round((preenchidos / total) * 100);

  async function salvar() {
    setErro(''); setSalvando(true); setSalvo(false);
    try {
      if (typeof salvarDiversidadeColab !== 'function') {
        throw new Error('Função salvarDiversidadeColab não carregada. Recarregue a página.');
      }
      const r = await salvarDiversidadeColab(user.id, draft);
      if (r?.ok) { setSalvo(true); setTimeout(() => setSalvo(false), 3000); onMudou?.(); }
      else throw new Error(r?.erro || 'falha ao salvar');
    } catch (err) {
      setErro('Não consegui salvar: ' + (err?.message || 'erro desconhecido'));
    } finally { setSalvando(false); }
  }

  if (carregando) return <div style={{ padding: 20, color: 'var(--escalab-mute)', fontSize: 13 }}>Carregando…</div>;

  return (
    <SecaoCard titulo="Diversidade · auto-declaração" icon="users" total={total} preenchidos={preenchidos} pct={pct}
      descricao="Esses campos alimentam apenas o Censo agregado da empresa. Resposta voluntária. Você pode marcar 'Prefiro não declarar' em qualquer um."
      aviso="100% privado · NEM o time de GC vê sua resposta individual, só números agregados"
      onSalvar={salvar} salvando={salvando} salvo={salvo} erro={erro}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        {CAMPOS_DIVERSIDADE.map(c => (
          <div key={c.key}>
            <label style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--escalab-slate)', display: 'block', marginBottom: 6, letterSpacing: '.06em', textTransform: 'uppercase' }}>{c.label}</label>
            <InputCampo campo={c} valor={draft[c.key]} onChange={v => setDraft(d => ({ ...d, [c.key]: v }))} />
          </div>
        ))}
      </div>
    </SecaoCard>
  );
};

// ── Modal: Alterar minha senha ────────────────────────────────────
const ModalAlterarSenha = ({ onClose }) => {
  const [senha1, setSenha1] = useState('');
  const [senha2, setSenha2] = useState('');
  const [salvando, setSalvando] = useState(false);
  const [erro, setErro] = useState('');
  const [ok, setOk] = useState(false);

  async function submit() {
    setErro('');
    if (senha1.length < 6) { setErro('Senha deve ter ao menos 6 caracteres.'); return; }
    if (senha1 !== senha2) { setErro('As senhas não conferem.'); return; }
    setSalvando(true);
    const r = await alterarMinhaSenha(senha1);
    setSalvando(false);
    if (r?.ok) { setOk(true); setTimeout(onClose, 1800); }
    else setErro(r?.erro || 'Falha ao alterar.');
  }

  const inp = { width:'100%', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'10px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:'none', boxSizing:'border-box' };
  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(10,15,18,.6)', zIndex:9999, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
      <div onClick={e => e.stopPropagation()} style={{ background:'#fff', borderRadius:14, padding:'24px 26px', width:'100%', maxWidth:420, boxShadow:'0 24px 60px rgba(0,0,0,.35)' }}>
        <h3 style={{ margin:'0 0 6px', fontSize:18, fontWeight:700 }}>Alterar minha senha</h3>
        <p style={{ fontSize:13, color:'var(--escalab-mute)', margin:'0 0 16px' }}>Digite a nova senha. Ao salvar, o login antigo deixa de funcionar.</p>
        {ok ? (
          <div style={{ background:'#E6F5F1', border:'1px solid #B3D9CB', borderRadius:9, padding:'12px 14px', color:'#00614D', fontSize:13.5, display:'flex', alignItems:'center', gap:7 }}>
            <Icon name="check" size={14} /> Senha alterada com sucesso!
          </div>
        ) : (
          <>
            <label style={{ fontSize:11.5, fontWeight:700, color:'var(--escalab-slate)', display:'block', marginBottom:6, letterSpacing:'.06em', textTransform:'uppercase' }}>Nova senha</label>
            <input type="password" value={senha1} onChange={e => setSenha1(e.target.value)} style={{ ...inp, marginBottom: 12 }} placeholder="ao menos 6 caracteres" />
            <label style={{ fontSize:11.5, fontWeight:700, color:'var(--escalab-slate)', display:'block', marginBottom:6, letterSpacing:'.06em', textTransform:'uppercase' }}>Confirmar nova senha</label>
            <input type="password" value={senha2} onChange={e => setSenha2(e.target.value)} style={inp} placeholder="repita" />
            {erro && <div style={{ marginTop:12, fontSize:13, color:'#B3261E', background:'#FDECEC', border:'1px solid #F4C7C3', padding:'9px 12px', borderRadius:8 }}>{erro}</div>}
            <div style={{ display:'flex', gap:8, justifyContent:'flex-end', marginTop:18 }}>
              <button onClick={onClose} style={{ border:'1px solid var(--escalab-line)', background:'#fff', color:'var(--escalab-slate)', borderRadius:8, padding:'9px 16px', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)', fontWeight:600 }}>Cancelar</button>
              <button onClick={submit} disabled={salvando} style={{ border:0, background: salvando ? '#A8B8B2' : 'var(--escalab-brand)', color:'#fff', borderRadius:8, padding:'9px 18px', cursor: salvando ? 'not-allowed' : 'pointer', fontSize:13, fontFamily:'var(--font-sans)', fontWeight:600 }}>{salvando ? 'Salvando…' : 'Salvar nova senha'}</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

// ── Tela principal ────────────────────────────────────────────────
const ScreenCompletarCadastro = ({ user, onNavigate }) => {
  const [progresso, setProgresso] = useState(() => (typeof getCadastroProgresso === 'function' ? getCadastroProgresso(user.id) : { pct: 0, preenchidos: 0, total: 0, faltando: [] }));
  const [modalSenha, setModalSenha] = useState(false);

  function refresh() {
    if (typeof getCadastroProgresso === 'function') setProgresso(getCadastroProgresso(user.id));
  }

  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
      {/* Header */}
      <div style={{ marginBottom: 22, display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:14, flexWrap:'wrap' }}>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Meu Perfil</div>
          <h2 style={{ fontSize: 22, fontWeight: 700, margin: 0, letterSpacing: '-.015em' }}>Completar Cadastro</h2>
          <p style={{ fontSize: 13.5, color: 'var(--escalab-slate)', margin: '6px 0 0' }}>
            Mantenha seus dados atualizados. Suas informações pessoais ficam protegidas conforme a LGPD.
          </p>
        </div>
        <button onClick={() => setModalSenha(true)} style={{ border:'1px solid var(--escalab-line)', background:'#fff', color:'var(--escalab-slate)', borderRadius:9, padding:'9px 16px', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)', fontWeight:600, display:'inline-flex', alignItems:'center', gap:7, flexShrink:0 }}>
          <Icon name="lock" size={13} /> Alterar minha senha
        </button>
      </div>

      {modalSenha && <ModalAlterarSenha onClose={() => setModalSenha(false)} />}

      {/* Barra de progresso */}
      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '18px 22px', marginBottom: 20 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <div>
            <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>Progresso geral</div>
            <div style={{ fontSize: 24, fontWeight: 800, color: progresso.pct === 100 ? '#00836B' : 'var(--escalab-brand-deep)', lineHeight: 1.1, marginTop: 4 }}>{progresso.pct}% completo</div>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)' }}>{progresso.preenchidos} de {progresso.total} campos preenchidos</div>
        </div>
        <div style={{ height: 10, background: 'var(--escalab-line)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ width: progresso.pct + '%', height: '100%', background: progresso.pct === 100 ? 'linear-gradient(90deg,#00967B,#00836B)' : 'linear-gradient(90deg,#00967B,#5EE9C4)', borderRadius: 999, transition: 'width .5s var(--ease-out)' }} />
        </div>
        {progresso.pct === 100 ? (
          <div style={{ marginTop: 12, padding: '10px 12px', background: '#E6F5F1', border: '1px solid #B3D9CB', borderRadius: 9, fontSize: 12.5, color: '#00614D', display: 'flex', alignItems: 'center', gap: 7 }}>
            <Icon name="check" size={13} /> Cadastro completo. Obrigado por manter seus dados atualizados!
          </div>
        ) : progresso.faltando?.length > 0 && (
          <div style={{ marginTop: 12, fontSize: 12, color: 'var(--escalab-mute)' }}>
            Faltam: <strong style={{ color: 'var(--escalab-slate)' }}>{progresso.faltando.join(', ')}</strong>
          </div>
        )}
      </div>

      {/* Secoes */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <SecaoPessoal user={user} onMudou={refresh} />
        <SecaoDocumentos user={user} onMudou={refresh} />
        <SecaoDiversidade user={user} onMudou={refresh} />
      </div>
    </div>
  );
};

window.ScreenCompletarCadastro = ScreenCompletarCadastro;
window.getCadastroProgresso_CAMPOS = { CAMPOS_PESSOAIS, CAMPOS_DOCUMENTOS, CAMPOS_DIVERSIDADE };