// ═══════════════════════════════════════════════════════════════
// SCREEN · Perfil do Colaborador
// ═══════════════════════════════════════════════════════════════

const ScreenPerfil = ({ colaborador, onVoltar, user, podeVerNotas, onRefresh }) => {
  const [aba, setAba] = useState('geral');
  const [editandoBio, setEditandoBio] = useState(false);
  const [bioEdit, setBioEdit] = useState('');
  const [bloqueadas, setBloqueadas] = useState(() => new Set(getPaginasBloqueadas(colaborador.id)));
  const c = colaborador;

  const avaliacoes = getAvaliacoesColaborador(c.id);
  const feedbacks  = getFeedbacksColaborador(c.id);
  const [conquistas, setConquistas] = useState(() => getConquistas(c.id));
  const [historico, setHistorico]   = useState(() => getHistorico(c.id));
  const [editandoConq, setEditandoConq] = useState(false);
  const [editandoHist, setEditandoHist] = useState(false);
  const [novaConq, setNovaConq] = useState({ ano: new Date().getFullYear(), texto: '' });
  const [novoHist, setNovoHist] = useState({ data: '', evento: '', tipo: 'promocao', cargoAntigo: '', cargoNovo: '', salarioAnterior: '', salarioNovo: '' });

  const TIPOS_MOV = [
    { id: 'promocao',     label: 'Promoção',          cor: '#00836B', icon: 'trend_up' },
    { id: 'lateral',      label: 'Movimentação lateral', cor: '#1F4A8A', icon: 'org'     },
    { id: 'merito',       label: 'Aumento por mérito',cor: '#E89B3B', icon: 'star'      },
    { id: 'enquadramento',label: 'Enquadramento',     cor: '#6B3FA0', icon: 'clipboard' },
    { id: 'transferencia',label: 'Transferência',     cor: '#B56500', icon: 'users'     },
    { id: 'mudanca_projeto', label: 'Mudança de projeto', cor: '#0A7E8C', icon: 'briefcase' },
    { id: 'rebaixamento', label: 'Rebaixamento',      cor: '#B3261E', icon: 'lock'      },
  ];
  const tipoCfg = id => TIPOS_MOV.find(t => t.id === id) || TIPOS_MOV[0];
  const fmtSal = v => v ? `R$ ${Number(v).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : null;

  function addConquista() {
    if (!novaConq.texto.trim()) return;
    const arr = [{ ano: Number(novaConq.ano) || new Date().getFullYear(), texto: novaConq.texto.trim() }, ...conquistas];
    setConquistas(arr); salvarConquistas(c.id, arr);
    setNovaConq({ ano: new Date().getFullYear(), texto: '' });
  }
  function removerConquista(i) {
    const arr = conquistas.filter((_, idx) => idx !== i);
    setConquistas(arr); salvarConquistas(c.id, arr);
  }
  function addMovimentacao() {
    if (!novoHist.evento.trim() || !novoHist.data) return;
    const item = {
      data: novoHist.data,
      evento: novoHist.evento.trim(),
      tipo: novoHist.tipo || 'promocao',
      cargoAntigo: novoHist.cargoAntigo?.trim() || null,
      cargoNovo: novoHist.cargoNovo?.trim() || null,
      salarioAnterior: novoHist.salarioAnterior ? Number(novoHist.salarioAnterior) : null,
      salarioNovo: novoHist.salarioNovo ? Number(novoHist.salarioNovo) : null,
    };
    const arr = [item, ...historico];
    setHistorico(arr); salvarHistorico(c.id, arr);
    setNovoHist({ data: '', evento: '', tipo: 'promocao', cargoAntigo: '', cargoNovo: '', salarioAnterior: '', salarioNovo: '' });
  }
  function removerMovimentacao(i) {
    const arr = historico.filter((_, idx) => idx !== i);
    setHistorico(arr); salvarHistorico(c.id, arr);
  }

  const verNota = podeVerNotas ? podeVerNotas(c.id) : (user?.perfil === 'admin');

  const ultimaAv = avaliacoes.sort((a, b) => (b.data || '').localeCompare(a.data || ''))[0];
  const mediaGeral = verNota && avaliacoes.length
    ? (avaliacoes.reduce((s, a) => s + (a.nota || 0), 0) / avaliacoes.length).toFixed(1)
    : null;
  const ultimaNota = verNota && ultimaAv && ultimaAv.nota != null
    ? Number(ultimaAv.nota).toFixed(1)
    : null;

  const anosEmp = Math.floor(c.tempoEmpresa / 12);
  const mesesEmp = c.tempoEmpresa % 12;
  const tempoStr = anosEmp >= 1
    ? `${anosEmp} ano${anosEmp > 1 ? 's' : ''}${mesesEmp > 0 ? ` e ${mesesEmp} meses` : ''}`
    : `${c.tempoEmpresa} meses`;

  const nivelLabel = { diretor: 'Diretor(a)', lider: 'Líder', liderado: 'Colaborador' }[c.nivel] || c.nivel;
  const nivelTone  = { diretor: 'dark', lider: 'brand', liderado: 'neutral' }[c.nivel];

  const TIPO_LABEL_PERFIL = { projetos: 'Assoc. Projetos', editais: 'Assoc. Editais', redes: 'Assoc. Redes', vb: 'VB' };
  const { categoria, tipoAssociado } = getCategoriaColaborador(c.id);
  const catLabel = categoria === 'fixo' ? 'Fixo' : (TIPO_LABEL_PERFIL[tipoAssociado] || 'Associado');
  const catTone  = categoria === 'fixo' ? 'brand' : 'neutral';

  const isAdmin = user?.perfil === 'admin';
  const isGestor = user?.perfil === 'gestor';
  const podeEditarBio = isAdmin || (isGestor && user?.setor === c.setor);
  const podeVerArquivos = isAdmin || user?.perfil === 'financeiro' || user?.id === c.id || c.gestorNome === user?.nome;
  const cargoDisplay = getCargoDisplay(c, isAdmin);

  function salvarBio() {
    atualizarColaborador(c.id, { bio: bioEdit });
    Object.assign(c, { bio: bioEdit });
    setEditandoBio(false);
    onRefresh?.();
  }

  function toggleAcesso(pid) {
    setBloqueadas(new Set(togglePaginaBloqueada(c.id, pid)));
  }

  // Permissões: RH (admin) vê tudo do próprio colab. Gestor respeita config.
  // Colaborador comum, ao ver perfil de outro, vê apenas Geral + Sobre mim
  // (tempo, foto e bio são exibidos no card lateral / aba Geral).
  const ehProprio = user?.id === c.id;
  const ehColaboradorComum = user?.perfil === 'colaborador' && !ehProprio;
  const gestorPerms = (user?.perfil === 'gestor' && !ehProprio) ? (typeof getGestorPerms === 'function' ? getGestorPerms(user.id) : null) : null;
  const podeVerSecao = (sec) => {
    if (isAdmin || ehProprio) return true;
    if (ehColaboradorComum) return sec === 'verSobreMim';
    if (!gestorPerms) return true;
    return gestorPerms[sec] !== false;
  };

  // Gestor desse colab vê uma aba extra "Feedback" com notas privadas + preparação.
  // Critério oficial (16/06 · G&C): é gestor de fato do liderado (gestorNome do c bate com nome do user).
  const ehGestorDoColab = isGestor && c.gestorNome === user?.nome && user?.id !== c.id;

  const tabs = [
    { id: 'geral',         label: 'Geral',              icon: 'user' },
    ...(podeVerSecao('verSobreMim')     ? [{ id: 'sobre_mim',      label: 'Sobre mim',             icon: 'star' }] : []),
    ...(podeVerSecao('verAvaliacoes')   ? [{ id: 'avaliacoes',     label: 'Avaliações',            icon: 'clipboard', count: avaliacoes.length }] : []),
    ...(podeVerSecao('verFeedbacks')    ? [{ id: 'feedbacks',      label: 'Feedbacks',             icon: 'message',   count: feedbacks.length }] : []),
    ...(ehGestorDoColab                 ? [{ id: 'feedback_gestor',label: 'Feedback (gestor)',     icon: 'message' }] : []),
    { id: 'treinamentos',  label: 'Treinamentos',          icon: 'star' },
    ...(podeVerSecao('verHistorico')    ? [{ id: 'historico',      label: 'Histórico',             icon: 'trend_up' }] : []),
    ...(podeVerSecao('verDadosPessoais')? [{ id: 'dados_pessoais', label: 'Dados Pessoais',        icon: 'file' }] : []),
    ...(podeVerSecao('verDadosOrg')     ? [{ id: 'dados_org',      label: 'Dados Organizacionais', icon: 'org' }] : []),
    ...(isAdmin ? [{ id: 'acesso', label: 'Acesso', icon: 'lock' }] : []),
  ];

  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
      {/* Back */}
      <button onClick={onVoltar} style={{ border: 0, background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, color: 'var(--escalab-slate)', fontSize: 13, padding: 0, marginBottom: 20 }}>
        <Icon name="chev_left" size={15} /> Colaboradores
      </button>

      {/* Hero card */}
      <Card pad={28} style={{ marginBottom: 20 }}>
        <div style={{ display: 'flex', gap: 22, alignItems: 'flex-start', flexWrap: 'wrap' }}>
          <PhotoAvatar colaborador={c} size={68} canEdit={isAdmin || user?.id === c.id} />
          <div style={{ flex: 1, minWidth: 200 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6, flexWrap: 'wrap' }}>
              <h3 style={{ fontSize: 20, fontWeight: 700, margin: 0 }}>{c.nome}</h3>
              <Tag tone={nivelTone}>{nivelLabel}</Tag>
              <Tag tone={catTone}>{catLabel}</Tag>
              <Tag tone="neutral">{c.setor}</Tag>
            </div>
            <div style={{ fontSize: 14, color: 'var(--escalab-slate)', marginBottom: 10 }}>{cargoDisplay}</div>
            {editandoBio ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <textarea value={bioEdit} onChange={e => setBioEdit(e.target.value)} rows={3}
                  style={{ fontSize: 13.5, fontFamily: 'var(--font-sans)', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 12px', outline: 0, resize: 'vertical', lineHeight: 1.6, maxWidth: 520 }} />
                <div style={{ display: 'flex', gap: 8 }}>
                  <Button size="sm" variant="primary" onClick={salvarBio}>Salvar</Button>
                  <Button size="sm" variant="ghost" onClick={() => setEditandoBio(false)}>Cancelar</Button>
                </div>
              </div>
            ) : (
              <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                <p style={{ fontSize: 13.5, color: 'var(--escalab-mute)', margin: 0, lineHeight: 1.6, maxWidth: 520 }}>{c.bio}</p>
                {podeEditarBio && (
                  <button onClick={() => { setBioEdit(c.bio || ''); setEditandoBio(true); }}
                    style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)', padding: 2, flexShrink: 0 }} title="Editar bio">
                    <Icon name="settings" size={14} />
                  </button>
                )}
              </div>
            )}
          </div>
          {/* Stats */}
          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
            {[
              { label: 'Tempo empresa', val: tempoStr },
              { label: 'No cargo',      val: mesesParaTempo(c.tempoCargo) },
              { label: 'Nota média',    val: !verNota ? 'N/D' : mediaGeral ? `${mediaGeral}/5` : '·' },
              { label: 'Última nota',   val: !verNota ? 'N/D' : ultimaNota ? `${ultimaNota}/5` : '·' },
              { label: 'Feedbacks',     val: feedbacks.length },
            ].map(s => (
              <div key={s.label} style={{ textAlign: 'center', minWidth: 68 }}>
                <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--escalab-brand-deep)', letterSpacing: '-.02em' }}>{s.val}</div>
                <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginTop: 2, fontWeight: 500, letterSpacing: '.06em', textTransform: 'uppercase' }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </Card>

      {/* Tabs */}
      <Tabs tabs={tabs} active={aba} onChange={setAba} />
      <div style={{ paddingTop: 22 }}>

        {/* ── ACESSO (apenas admin) ── */}
        {aba === 'acesso' && isAdmin && (
          <div style={{ animation: 'fadeIn .2s', maxWidth: 560 }}>
            <Card pad={26}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 8 }}>Acesso a páginas</div>
              <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginBottom: 18, lineHeight: 1.55 }}>Desmarque as páginas que esta pessoa <b>não</b> deve ver. As bloqueadas somem do menu · ela não vê que existem. A Intranet fica sempre disponível.</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {PAGINAS_APP.map(p => {
                  const permitido = !bloqueadas.has(p.id);
                  return (
                    <button key={p.id} onClick={() => toggleAcesso(p.id)} style={{ display: 'flex', alignItems: 'center', gap: 10, border: '1px solid var(--escalab-line)', borderRadius: 9, padding: '10px 13px', background: permitido ? '#fff' : 'var(--escalab-paper)', cursor: 'pointer', fontFamily: 'var(--font-sans)', textAlign: 'left', width: '100%' }}>
                      <div style={{ width: 18, height: 18, borderRadius: 5, border: `2px solid ${permitido ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`, background: permitido ? 'var(--escalab-brand)' : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: '#fff' }}>
                        {permitido && <Icon name="check" size={12} />}
                      </div>
                      <span style={{ fontSize: 13.5, color: permitido ? 'var(--escalab-ink)' : 'var(--escalab-mute)', textDecoration: permitido ? 'none' : 'line-through' }}>{p.label}</span>
                    </button>
                  );
                })}
              </div>
            </Card>
          </div>
        )}

        {/* ── GERAL ── */}
        {aba === 'geral' && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16, animation: 'fadeIn .2s' }}>
            <Card pad={22}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 16 }}>Dados Pessoais</div>
              {[
                { label: 'E-mail',           val: c.email },
                { label: 'Nível Acadêmico',  val: c.academico },
                { label: 'Tempo de empresa', val: tempoStr },
                { label: 'Tempo no cargo',   val: mesesParaTempo(c.tempoCargo) },
                { label: 'Cargo atual',      val: cargoDisplay },
                { label: 'Categoria',        val: catLabel },
                { label: 'Setor',            val: c.setor },
              ].map(r => (
                <div key={r.label} style={{ display: 'flex', gap: 12, paddingBottom: 12, marginBottom: 12, borderBottom: '1px solid var(--escalab-line)' }}>
                  <span style={{ fontSize: 12.5, color: 'var(--escalab-mute)', minWidth: 130 }}>{r.label}</span>
                  <span style={{ fontSize: 13, color: 'var(--escalab-ink)', fontWeight: 500 }}>{r.val}</span>
                </div>
              ))}
            </Card>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {(conquistas.length > 0 || isAdmin) && (
                <Card pad={22}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                    <Icon name="trophy" size={15} />
                    <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', flex: 1 }}>Conquistas</div>
                    {isAdmin && (
                      <button onClick={() => setEditandoConq(v => !v)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: editandoConq ? 'var(--escalab-brand)' : 'var(--escalab-mute)', fontSize: 12, fontWeight: 600, padding: 2, fontFamily: 'var(--font-sans)', display: 'flex', alignItems: 'center', gap: 4 }}>
                        <Icon name="settings" size={12} /> {editandoConq ? 'Concluir' : 'Editar'}
                      </button>
                    )}
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {conquistas.map((q, i) => (
                      <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                        <span style={{ background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', borderRadius: 6, padding: '2px 8px', fontSize: 11, fontWeight: 700, flexShrink: 0 }}>{q.ano}</span>
                        <span style={{ flex: 1, fontSize: 13, color: 'var(--escalab-slate)', lineHeight: 1.5 }}>{q.texto}</span>
                        {editandoConq && isAdmin && (
                          <button onClick={() => removerConquista(i)} title="Remover" style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 2 }}>
                            <Icon name="close" size={12} />
                          </button>
                        )}
                      </div>
                    ))}
                    {conquistas.length === 0 && !editandoConq && (
                      <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Nenhuma conquista registrada.</div>
                    )}
                  </div>
                  {editandoConq && isAdmin && (
                    <div style={{ marginTop: 12, padding: '12px 14px', background: 'var(--escalab-paper)', borderRadius: 9, border: '1px dashed var(--escalab-line)', display: 'flex', flexDirection: 'column', gap: 8 }}>
                      <div style={{ display: 'flex', gap: 8 }}>
                        <input type="number" value={novaConq.ano} onChange={e => setNovaConq(s => ({ ...s, ano: e.target.value }))} min="2000" max="2099"
                          style={{ width: 80, border: '1px solid var(--escalab-line)', borderRadius: 7, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0 }} />
                        <input value={novaConq.texto} onChange={e => setNovaConq(s => ({ ...s, texto: e.target.value }))} placeholder="Descrição da conquista…"
                          onKeyDown={e => { if (e.key === 'Enter') addConquista(); }}
                          style={{ flex: 1, border: '1px solid var(--escalab-line)', borderRadius: 7, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0 }} />
                        <Button size="sm" variant="primary" icon="plus" onClick={addConquista} disabled={!novaConq.texto.trim()}>OK</Button>
                      </div>
                    </div>
                  )}
                </Card>
              )}
              {/* Movimentações Internas · sempre visível no Geral · igual ao que o GC vê */}
              {(
                <Card pad={22}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                    <Icon name="trend_up" size={15} />
                    <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', flex: 1 }}>Movimentações Internas</div>
                    {isAdmin && (
                      <button onClick={() => setEditandoHist(v => !v)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: editandoHist ? 'var(--escalab-brand)' : 'var(--escalab-mute)', fontSize: 12, fontWeight: 600, padding: 2, fontFamily: 'var(--font-sans)', display: 'flex', alignItems: 'center', gap: 4 }}>
                        <Icon name="settings" size={12} /> {editandoHist ? 'Concluir' : 'Editar'}
                      </button>
                    )}
                  </div>
                  {historico.length > 0 ? (
                    <div style={{ position: 'relative', paddingLeft: 18 }}>
                      <div style={{ position: 'absolute', left: 6, top: 6, bottom: 0, width: 1, background: 'var(--escalab-line)' }} />
                      {historico.map((h, i) => {
                        const tCfg = tipoCfg(h.tipo);
                        const sa = fmtSal(h.salarioAnterior);
                        const sn = fmtSal(h.salarioNovo);
                        const diff = h.salarioAnterior && h.salarioNovo ? h.salarioNovo - h.salarioAnterior : null;
                        const diffPct = diff != null && h.salarioAnterior ? Math.round(diff / h.salarioAnterior * 100) : null;
                        return (
                          <div key={i} style={{ position: 'relative', marginBottom: 16, display: 'flex', justifyContent: 'space-between', gap: 10 }}>
                            <div style={{ flex: 1, minWidth: 0 }}>
                              <div style={{ position: 'absolute', left: -16, top: 5, width: 9, height: 9, borderRadius: '50%', background: tCfg.cor, border: '2px solid #fff' }} />
                              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 4 }}>
                                <span style={{ fontSize: 11, color: tCfg.cor, fontWeight: 700 }}>{h.data}</span>
                                {h.tipo && (
                                  <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.04em', textTransform: 'uppercase', background: tCfg.cor + '18', color: tCfg.cor, borderRadius: 4, padding: '1px 7px' }}>{tCfg.label}</span>
                                )}
                              </div>
                              <div style={{ fontSize: 13.5, color: 'var(--escalab-ink)', fontWeight: 500, marginBottom: (h.cargoAntigo || h.cargoNovo || sa || sn) ? 6 : 0 }}>{h.evento}</div>
                              {(h.cargoAntigo || h.cargoNovo) && (
                                <div style={{ fontSize: 12, color: 'var(--escalab-slate)', display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', marginBottom: (sa || sn) ? 3 : 0 }}>
                                  {h.cargoAntigo && <span style={{ textDecoration: 'line-through', opacity: .7 }}>{h.cargoAntigo}</span>}
                                  {h.cargoAntigo && h.cargoNovo && <Icon name="chev_right" size={11} />}
                                  {h.cargoNovo && <strong style={{ color: tCfg.cor }}>{h.cargoNovo}</strong>}
                                </div>
                              )}
                              {(sa || sn) && (isAdmin || user?.id === c.id || user?.perfil === 'financeiro') && (
                                <div style={{ fontSize: 12, color: 'var(--escalab-slate)', display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                                  <Icon name="trophy" size={11} />
                                  {sa && <span style={{ opacity: .7 }}>{sa}</span>}
                                  {sa && sn && <Icon name="chev_right" size={10} />}
                                  {sn && <strong style={{ color: '#00836B' }}>{sn}</strong>}
                                  {diff != null && diff !== 0 && (
                                    <span style={{ fontSize: 11, fontWeight: 700, color: diff > 0 ? '#00836B' : '#B3261E', background: diff > 0 ? '#E6F5F1' : '#FDECEC', borderRadius: 4, padding: '1px 6px' }}>
                                      {diff > 0 ? '+' : ''}{diffPct}%
                                    </span>
                                  )}
                                </div>
                              )}
                            </div>
                            {editandoHist && isAdmin && (
                              <button onClick={() => removerMovimentacao(i)} title="Remover" style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 2, alignSelf: 'flex-start' }}>
                                <Icon name="close" size={12} />
                              </button>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  ) : !editandoHist && (
                    <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Nenhuma movimentação registrada.</div>
                  )}
                  {editandoHist && isAdmin && (
                    <div style={{ marginTop: 14, padding: '14px 16px', background: 'var(--escalab-paper)', borderRadius: 10, border: '1px dashed var(--escalab-line)', display: 'flex', flexDirection: 'column', gap: 10 }}>
                      <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr', gap: 8 }}>
                        <input type="date" value={novoHist.data} onChange={e => setNovoHist(s => ({ ...s, data: e.target.value }))}
                          style={{ border: '1px solid var(--escalab-line)', borderRadius: 7, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0 }} />
                        <select value={novoHist.tipo} onChange={e => setNovoHist(s => ({ ...s, tipo: e.target.value }))}
                          style={{ border: '1px solid var(--escalab-line)', borderRadius: 7, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0, background: '#fff' }}>
                          {TIPOS_MOV.map(t => <option key={t.id} value={t.id}>{t.label}</option>)}
                        </select>
                      </div>
                      <input value={novoHist.evento} onChange={e => setNovoHist(s => ({ ...s, evento: e.target.value }))} placeholder="Descrição (ex: Promoção a Líder/Especialista II)"
                        style={{ border: '1px solid var(--escalab-line)', borderRadius: 7, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0 }} />
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                        <input value={novoHist.cargoAntigo} onChange={e => setNovoHist(s => ({ ...s, cargoAntigo: e.target.value }))} placeholder="Cargo antigo (opcional)"
                          style={{ border: '1px solid var(--escalab-line)', borderRadius: 7, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0 }} />
                        <input value={novoHist.cargoNovo} onChange={e => setNovoHist(s => ({ ...s, cargoNovo: e.target.value }))} placeholder="Cargo novo (opcional)"
                          style={{ border: '1px solid var(--escalab-line)', borderRadius: 7, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0 }} />
                      </div>
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                        <input type="number" step="0.01" value={novoHist.salarioAnterior} onChange={e => setNovoHist(s => ({ ...s, salarioAnterior: e.target.value }))} placeholder="Salário anterior (R$)"
                          style={{ border: '1px solid var(--escalab-line)', borderRadius: 7, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0 }} />
                        <input type="number" step="0.01" value={novoHist.salarioNovo} onChange={e => setNovoHist(s => ({ ...s, salarioNovo: e.target.value }))} placeholder="Salário novo (R$)"
                          style={{ border: '1px solid var(--escalab-line)', borderRadius: 7, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0 }} />
                      </div>
                      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
                        <Button size="sm" variant="primary" icon="plus" onClick={addMovimentacao} disabled={!novoHist.evento.trim() || !novoHist.data}>Adicionar movimentação</Button>
                      </div>
                    </div>
                  )}
                </Card>
              )}
            </div>
          </div>
        )}

        {/* ── AVALIAÇÕES · visão consolidada ────────────────────────────────
            COLABORADOR vê: média geral + autoavaliação + média combinada (líder + pares),
            sem distinção entre quem deu cada nota.
            GESTOR / RH vê o mesmo resumo + breakdown 360° por fonte. */}
        {aba === 'avaliacoes' && (() => {
          if (!verNota) {
            return (
              <div style={{ animation: 'fadeIn .2s', textAlign: 'center', padding: '48px 24px' }}>
                <div style={{ color: 'var(--escalab-mute)', marginBottom: 12 }}><Icon name="lock" size={36} /></div>
                <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--escalab-ink)', marginBottom: 8 }}>Notas bloqueadas</div>
                <div style={{ fontSize: 13.5, color: 'var(--escalab-mute)', maxWidth: 360, margin: '0 auto' }}>
                  As notas de avaliação ainda não foram liberadas pelo GC.
                </div>
              </div>
            );
          }
          if (avaliacoes.length === 0) {
            return <div style={{ animation: 'fadeIn .2s' }}><Banner tone="info">Nenhuma avaliação registrada para este colaborador.</Banner></div>;
          }

          const podeVerDetalheFonte = isAdmin || ehGestorDoColab;
          const avg = arr => arr.length ? arr.reduce((s, n) => s + n, 0) / arr.length : null;
          const colecionar = (tipos, pickerOuKey) => {
            const valores = avaliacoes
              .filter(a => tipos.includes(a.tipo))
              .map(a => typeof pickerOuKey === 'function' ? pickerOuKey(a) : a.blocos?.[pickerOuKey])
              .filter(v => v != null);
            return avg(valores);
          };
          const BLOCOS = [
            { key: 'tecnico',        label: 'Técnico',         cor: '#1F4A8A' },
            { key: 'comportamental', label: 'Comportamental',  cor: '#7A4A00' },
            { key: 'metas',          label: 'Metas',           cor: '#005E4D' },
          ];
          const TIPOS_AUTO        = ['auto'];
          // Combina TODAS as avaliacoes recebidas — lider (liderado), pares e
          // liderados (superior, quando a pessoa e lider). Pro colaborador a
          // origem nao aparece; quem ve breakdown e so RH e o gestor direto.
          const TIPOS_COMBINADOS  = ['liderado', 'pares', 'superior'];
          const TIPOS_TODOS       = ['auto', 'liderado', 'pares', 'superior'];

          const mediaGeral     = colecionar(TIPOS_TODOS,      a => a.nota);
          const mediaAuto      = colecionar(TIPOS_AUTO,       a => a.nota);
          const mediaCombinada = colecionar(TIPOS_COMBINADOS, a => a.nota);
          const blocosAuto      = Object.fromEntries(BLOCOS.map(b => [b.key, colecionar(TIPOS_AUTO,       b.key)]));
          const blocosCombinado = Object.fromEntries(BLOCOS.map(b => [b.key, colecionar(TIPOS_COMBINADOS, b.key)]));
          const blocosGeral     = Object.fromEntries(BLOCOS.map(b => [b.key, colecionar(TIPOS_TODOS,      b.key)]));

          const cicloAtivo = CICLOS.find(cy => cy.status === 'ativo');

          const CardResumo = ({ titulo, descricao, media, blocos, acento }) => (
            <Card pad={22}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18, gap: 12 }}>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--escalab-ink)', marginBottom: 3 }}>{titulo}</div>
                  <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>{descricao}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 28, fontWeight: 800, color: acento, letterSpacing: '-.02em', lineHeight: 1 }}>{media != null ? media.toFixed(1) : '·'}</div>
                  <div style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>de 5.0</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {BLOCOS.map(b => blocos[b.key] != null
                  ? <ScoreBar key={b.key} nota={blocos[b.key]} label={b.label} />
                  : null
                )}
                {BLOCOS.every(b => blocos[b.key] == null) && (
                  <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Sem detalhamento por bloco neste recorte ainda.</div>
                )}
              </div>
            </Card>
          );

          return (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, animation: 'fadeIn .2s' }}>
              {/* Banner Média Geral */}
              <Card pad={24}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap', justifyContent: 'space-between' }}>
                  <div>
                    <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 4 }}>Média geral</div>
                    <div style={{ fontSize: 13.5, color: 'var(--escalab-slate)' }}>Autoavaliação + todas as avaliações recebidas · ciclo {cicloAtivo?.nome || 'atual'}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 40, fontWeight: 800, color: 'var(--escalab-brand-deep)', letterSpacing: '-.02em', lineHeight: 1 }}>{mediaGeral != null ? mediaGeral.toFixed(1) : '·'}</div>
                    <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>de 5.0</div>
                  </div>
                </div>
                <div style={{ height: 1, background: 'var(--escalab-line)', margin: '16px 0' }} />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                  {BLOCOS.map(b => blocosGeral[b.key] != null
                    ? <ScoreBar key={b.key} nota={blocosGeral[b.key]} label={b.label} />
                    : null
                  )}
                </div>
              </Card>

              {/* Autoavaliação + Média Combinada (líder + pares) */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14 }}>
                <CardResumo
                  titulo="Autoavaliação"
                  descricao="Como o(a) colaborador(a) avalia o próprio desempenho"
                  media={mediaAuto}
                  blocos={blocosAuto}
                  acento="#1F4A8A"
                />
                <CardResumo
                  titulo="Média combinada"
                  descricao="Média das avaliações recebidas — sem identificar quem deu cada nota"
                  media={mediaCombinada}
                  blocos={blocosCombinado}
                  acento="var(--escalab-brand-deep)"
                />
              </div>

              {/* Avaliação 360° detalhada · apenas RH / gestor do colab */}
              {podeVerDetalheFonte && (() => {
                const mediaLider     = colecionar(['liderado'], a => a.nota);
                const mediaPares     = colecionar(['pares'],    a => a.nota);
                const mediaLiderados = colecionar(['superior'], a => a.nota); // notas que a equipe dele deu, quando ele e lider
                const nota = typeof getNotaColab === 'function' ? getNotaColab(c.id) : null;
                const mediaInter = nota?.intersetorial ?? null;
                const itens = [
                  { key: 'lider',     label: 'Avaliação do(a) líder',     desc: 'Apenas para gestão e GC · não exposto ao colaborador', cor: '#6B3FA0', valor: mediaLider,     max: 5,  blocos: Object.fromEntries(BLOCOS.map(b => [b.key, colecionar(['liderado'], b.key)])) },
                  { key: 'pares',     label: 'Avaliação pelos pares',     desc: 'Apenas para gestão e GC · não exposto ao colaborador', cor: '#0A7E8C', valor: mediaPares,     max: 5,  blocos: Object.fromEntries(BLOCOS.map(b => [b.key, colecionar(['pares'],    b.key)])) },
                  ...(mediaLiderados != null ? [{ key: 'liderados', label: 'Avaliação pelos liderados', desc: 'Apenas para gestão e GC · não exposto ao colaborador', cor: '#B56500', valor: mediaLiderados, max: 5, blocos: Object.fromEntries(BLOCOS.map(b => [b.key, colecionar(['superior'], b.key)])) }] : []),
                  ...(mediaInter != null ? [{ key: 'inter',         label: 'Avaliação intersetorial',   desc: 'Avaliação por colaboradores de outros setores',         cor: '#005E4D', valor: mediaInter,     max: 10, blocos: nota?.blocos || {} }] : []),
                ];
                if (itens.every(i => i.valor == null)) return null;
                return (
                  <>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
                      <Icon name="lock" size={13} />
                      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>Detalhamento por fonte · restrito ao GC e à liderança</div>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 14 }}>
                      {itens.map(item => (
                        <Card key={item.key} pad={20}>
                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12, gap: 10 }}>
                            <div>
                              <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--escalab-ink)', marginBottom: 3 }}>{item.label}</div>
                              <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{item.desc}</div>
                            </div>
                            {item.valor != null
                              ? <div style={{ textAlign: 'right' }}>
                                  <div style={{ fontSize: 24, fontWeight: 800, color: item.cor, letterSpacing: '-.02em', lineHeight: 1 }}>{item.valor.toFixed(1)}</div>
                                  <div style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>de {item.max}.0</div>
                                </div>
                              : <Tag tone="neutral">Pendente</Tag>
                            }
                          </div>
                          {item.valor != null && Object.keys(item.blocos || {}).length > 0 && (
                            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                              {BLOCOS.map(b => item.blocos[b.key] != null
                                ? <div key={b.key} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                                    <span style={{ fontSize: 12, color: 'var(--escalab-slate)', minWidth: 110 }}>{b.label}</span>
                                    <div style={{ flex: 1, height: 6, background: 'var(--escalab-line)', borderRadius: 999 }}>
                                      <div style={{ width: (item.blocos[b.key] / item.max * 100) + '%', height: '100%', background: item.cor, borderRadius: 999, transition: 'width .4s' }} />
                                    </div>
                                    <span style={{ fontSize: 12, fontWeight: 700, color: item.cor, minWidth: 28 }}>{item.blocos[b.key].toFixed(1)}</span>
                                  </div>
                                : null
                              )}
                            </div>
                          )}
                        </Card>
                      ))}
                    </div>
                  </>
                );
              })()}
            </div>
          );
        })()}

        {/* ── FEEDBACKS ── */}
        {aba === 'feedbacks' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            {feedbacks.length === 0 ? (
              <Banner tone="info">Nenhum feedback registrado para este colaborador.</Banner>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {feedbacks.sort((a, b) => b.data.localeCompare(a.data)).map(f => (
                  <Card key={f.id} pad={20}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12, flexWrap: 'wrap', gap: 8 }}>
                      <div>
                        <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 3 }}>
                          <Tag tone="neutral">{f.trimestre}</Tag>
                          {f.arquivo ? <Tag tone="success">Arquivo anexado</Tag> : <Tag tone="warn">Sem arquivo</Tag>}
                        </div>
                        <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)' }}>{f.data} · Responsável: <strong style={{ color: 'var(--escalab-slate)' }}>{f.responsavel}</strong></div>
                      </div>
                      {f.arquivo && <Button variant="outline" size="sm" icon="download">{f.arquivo}</Button>}
                    </div>
                    {f.comentarios.length > 0 && (
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                        {f.comentarios.map((com, i) => (
                          <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 13, color: 'var(--escalab-slate)' }}>
                            <div style={{ color: 'var(--escalab-brand)', marginTop: 3, flexShrink: 0 }}><Icon name="dot" size={8} /></div>
                            {com}
                          </div>
                        ))}
                      </div>
                    )}
                  </Card>
                ))}
              </div>
            )}
          </div>
        )}

        {/* ── HISTÓRICO COMPLETO ── */}
        {aba === 'treinamentos' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <AbaTreinamentosColab colaborador={c} />
          </div>
        )}

        {aba === 'historico' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <Card pad={24}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 20 }}>Timeline completa</div>
              <div style={{ position: 'relative', paddingLeft: 24 }}>
                <div style={{ position: 'absolute', left: 8, top: 8, bottom: 0, width: 2, background: 'var(--escalab-line)' }} />
                {[
                  ...historico.map(h => ({ ...h, tipo: 'movimentacao' })),
                  ...avaliacoes.filter(a => a.data).map(a => ({ data: a.data, evento: verNota ? `Avaliação ${a.tipo} · Nota ${a.nota?.toFixed(1) ?? '·'}` : `Avaliação ${a.tipo} · nota bloqueada`, tipo: 'avaliacao' })),
                  ...feedbacks.map(f => ({ data: f.data, evento: `Feedback ${f.trimestre} · ${f.responsavel}`, tipo: 'feedback' })),
                  ...(conquistas.map(q => ({ data: `${q.ano}-01-01`, evento: q.texto, tipo: 'conquista' }))),
                ].sort((a, b) => (b.data || '').localeCompare(a.data || '')).map((item, i) => {
                  const iconMap  = { movimentacao: 'trend_up', avaliacao: 'clipboard', feedback: 'message', conquista: 'trophy' };
                  const colorMap = { movimentacao: 'var(--escalab-brand)', avaliacao: '#1F4A8A', feedback: '#7A4A00', conquista: '#6B3FA0' };
                  return (
                    <div key={i} style={{ position: 'relative', marginBottom: 18 }}>
                      <div style={{ position: 'absolute', left: -19, top: 3, width: 20, height: 20, borderRadius: '50%', background: colorMap[item.tipo], display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <Icon name={iconMap[item.tipo]} size={10} />
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginBottom: 2 }}>{item.data}</div>
                      <div style={{ fontSize: 13.5, color: 'var(--escalab-ink)', lineHeight: 1.4 }}>{item.evento}</div>
                      <Tag tone={item.tipo === 'conquista' ? 'info' : item.tipo === 'avaliacao' ? 'brand' : item.tipo === 'feedback' ? 'amber' : 'neutral'} size="xs">{item.tipo}</Tag>
                    </div>
                  );
                })}
              </div>
            </Card>
          </div>
        )}

        {/* ── DADOS PESSOAIS (renomeado de Arquivos) ── */}
        {aba === 'dados_pessoais' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            {!podeVerArquivos ? (
              <div style={{ textAlign: 'center', padding: '48px 24px' }}>
                <div style={{ color: 'var(--escalab-mute)', marginBottom: 12 }}><Icon name="lock" size={36} /></div>
                <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--escalab-ink)', marginBottom: 8 }}>Acesso restrito</div>
                <div style={{ fontSize: 13.5, color: 'var(--escalab-mute)', maxWidth: 360, margin: '0 auto' }}>
                  Somente o próprio colaborador, seu líder direto e o GC podem acessar esta aba.
                </div>
              </div>
            ) : (
              <AbaArquivos colaborador={c} user={user} isAdmin={isAdmin} />
            )}
          </div>
        )}

        {/* ── DADOS ORGANIZACIONAIS (RH-only edit, âmbar em mudanças — sem vermelho) ── */}
        {aba === 'dados_org' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <AbaDadosOrganizacionais colaborador={c} user={user} isAdmin={isAdmin} onRefresh={onRefresh} />
          </div>
        )}

        {/* ── SOBRE MIM + FAZ NO ESCALAB ── */}
        {aba === 'sobre_mim' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <AbaSobreMim colaborador={c} user={user} />
          </div>
        )}

        {/* ── FEEDBACK DO GESTOR · notas privadas + preparação ── */}
        {aba === 'feedback_gestor' && ehGestorDoColab && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <AbaFeedbackGestor colaborador={c} user={user} />
          </div>
        )}

      </div>
    </div>
  );
};

// ── Aba do colaborador · histórico de treinamentos (presenças + NPS dado) ─────
const AbaTreinamentosColab = ({ colaborador }) => {
  const lerLS = (k, fallback) => { try { const r = JSON.parse(localStorage.getItem(k) || 'null'); return r ?? fallback; } catch { return fallback; } };
  const treinos = (typeof getTreinamentos === 'function' ? getTreinamentos() : (lerLS('escalab_treinamentos_v2', null) || lerLS('escalab_treinamentos', [])));
  const chamadas = lerLS('escalab_chamadas', {});
  const nps = lerLS('escalab_nps_respostas', []);
  const concluidos = (treinos || []).filter(t => t.status === 'concluido');
  const linhas = concluidos.map(t => {
    const presente = !!(chamadas?.[t.id]?.[colaborador.id]);
    const meuNps = nps.find(r => r.treinoId === t.id && r.colaboradorId === colaborador.id);
    return { ...t, presente, npsDado: meuNps?.nota ?? null };
  }).sort((a, b) => (b.data || '').localeCompare(a.data || ''));
  const presentes = linhas.filter(l => l.presente);
  const npsMedio = (() => {
    const dados = linhas.filter(l => l.npsDado != null).map(l => Number(l.npsDado));
    if (!dados.length) return null;
    return (dados.reduce((s, n) => s + n, 0) / dados.length).toFixed(1);
  })();
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <Card pad={20}>
        <div style={{ display: 'flex', gap: 26, flexWrap: 'wrap' }}>
          {[
            { label: 'Treinos participados', val: presentes.length },
            { label: 'Concluídos no período', val: linhas.length },
            { label: 'Ausências',             val: linhas.length - presentes.length },
            { label: 'NPS médio que deu',     val: npsMedio ?? '·' },
          ].map(s => (
            <div key={s.label} style={{ textAlign: 'center', minWidth: 110 }}>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--escalab-brand-deep)', letterSpacing: '-.02em' }}>{s.val}</div>
              <div style={{ fontSize: 11, color: 'var(--escalab-mute)', marginTop: 4, fontWeight: 500, letterSpacing: '.06em', textTransform: 'uppercase' }}>{s.label}</div>
            </div>
          ))}
        </div>
      </Card>
      <Card pad={22}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 14 }}>Histórico</div>
        {linhas.length === 0 ? (
          <div style={{ fontSize: 13, color: 'var(--escalab-mute)' }}>Sem treinamentos concluídos ainda.</div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {linhas.map(l => (
              <div key={l.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', border: '1px solid var(--escalab-line)', borderRadius: 9 }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: l.presente ? 'var(--escalab-brand)' : 'var(--escalab-line)', flexShrink: 0 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, color: 'var(--escalab-ink)', fontWeight: 600, marginBottom: 2 }}>{l.titulo}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{l.data} · {l.responsavel || '—'} · {l.local || 's/ local'}</div>
                </div>
                <Tag tone={l.presente ? 'success' : 'neutral'} size="xs">{l.presente ? 'Presente' : 'Ausente'}</Tag>
                {l.npsDado != null && <Tag tone="brand" size="xs">NPS {l.npsDado}</Tag>}
              </div>
            ))}
          </div>
        )}
      </Card>
    </div>
  );
};

// ── Aba do gestor · notas privadas (docs) + preparação pro feedback ───────────
const NOTAS_GESTOR_KEY = (liderId, colabId) => `escalab_notas_gestor_${liderId}_${colabId}`;
const PREPARO_FB_KEY_PERFIL = 'escalab_feedback_preparo';
const PREPARO_PERGUNTAS_PERFIL = [
  { id: 'clareza',       label: 'Clareza dos objetivos' },
  { id: 'tecnico',       label: 'Evolução técnica' },
  { id: 'comportamento', label: 'Atitude e comportamento' },
  { id: 'autonomia',     label: 'Autonomia e iniciativa' },
  { id: 'colaboracao',   label: 'Colaboração com o time' },
];

const AbaFeedbackGestor = ({ colaborador, user }) => {
  const [subAba, setSubAba] = useState('notas');
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <Banner tone="info">
        Esta aba é <strong>privada do gestor</strong>. O colaborador {colaborador.nome.split(' ')[0]} não vê o que está aqui.
        Use as <strong>Notas pontuais</strong> como um diário para registrar momentos do dia a dia e a <strong>Preparação pro feedback</strong> antes de cada conversa formal.
      </Banner>
      <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--escalab-line)' }}>
        {[
          { id: 'notas',   label: 'Notas pontuais', icon: 'message' },
          { id: 'preparo', label: 'Preparação pro feedback', icon: 'clipboard' },
        ].map(t => (
          <button key={t.id} onClick={() => setSubAba(t.id)}
            style={{ border: 0, background: 'transparent', cursor: 'pointer', padding: '10px 16px', fontSize: 13, fontFamily: 'var(--font-sans)', fontWeight: 600,
              color: subAba === t.id ? 'var(--escalab-brand)' : 'var(--escalab-mute)',
              borderBottom: subAba === t.id ? '2px solid var(--escalab-brand)' : '2px solid transparent', marginBottom: -1,
              display: 'flex', gap: 6, alignItems: 'center' }}>
            <Icon name={t.icon} size={13} /> {t.label}
          </button>
        ))}
      </div>
      {subAba === 'notas' && <NotasGestor colaborador={colaborador} user={user} />}
      {subAba === 'preparo' && <PreparoFeedbackPerfil colaborador={colaborador} user={user} />}
    </div>
  );
};

const NotasGestor = ({ colaborador, user }) => {
  const STORAGE = NOTAS_GESTOR_KEY(user.id, colaborador.id);
  const [notas, setNotas] = useState(() => {
    try { return JSON.parse(localStorage.getItem(STORAGE) || '[]'); } catch { return []; }
  });
  const [nova, setNova] = useState('');
  const [editingId, setEditingId] = useState(null);
  const [editTexto, setEditTexto] = useState('');

  function persist(lista) {
    setNotas(lista);
    try { localStorage.setItem(STORAGE, JSON.stringify(lista)); } catch {}
  }
  function adicionar() {
    const t = nova.trim();
    if (!t) return;
    persist([{ id: 'n' + Date.now(), texto: t, em: new Date().toISOString() }, ...notas]);
    setNova('');
  }
  function salvarEdit(id) {
    persist(notas.map(n => n.id === id ? { ...n, texto: editTexto.trim(), editadoEm: new Date().toISOString() } : n));
    setEditingId(null); setEditTexto('');
  }
  function remover(id) {
    if (!confirm('Excluir esta nota?')) return;
    persist(notas.filter(n => n.id !== id));
  }

  const fmt = iso => new Date(iso).toLocaleString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <Card pad={18}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 8 }}>Nova nota</div>
        <textarea value={nova} onChange={e => setNova(e.target.value)} rows={3}
          placeholder={`Ex: hoje fiz uma reunião com ${colaborador.nome.split(' ')[0]} e ela deve melhorar a comunicação de dados.`}
          style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '10px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
          <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>Salvo só para você · vira histórico para montar o próximo feedback.</span>
          <Button variant="primary" size="sm" icon="plus" onClick={adicionar} disabled={!nova.trim()}>Adicionar nota</Button>
        </div>
      </Card>

      <Card pad={18}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 12 }}>
          Histórico · {notas.length} {notas.length === 1 ? 'nota' : 'notas'}
        </div>
        {notas.length === 0 ? (
          <div style={{ fontSize: 13, color: 'var(--escalab-mute)', textAlign: 'center', padding: '24px 0', fontStyle: 'italic' }}>Sem notas ainda · comece registrando o que conversaram hoje.</div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {notas.map(n => (
              <div key={n.id} style={{ borderLeft: '3px solid var(--escalab-brand)', background: 'var(--escalab-paper)', borderRadius: 8, padding: '10px 14px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6, gap: 8 }}>
                  <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)', fontWeight: 600 }}>{fmt(n.em)}{n.editadoEm ? ' · editado' : ''}</span>
                  <div style={{ display: 'flex', gap: 6 }}>
                    {editingId !== n.id && (
                      <button onClick={() => { setEditingId(n.id); setEditTexto(n.texto); }} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)', fontSize: 11, padding: 2 }}>Editar</button>
                    )}
                    <button onClick={() => remover(n.id)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', fontSize: 11, padding: 2 }}>Excluir</button>
                  </div>
                </div>
                {editingId === n.id ? (
                  <>
                    <textarea value={editTexto} onChange={e => setEditTexto(e.target.value)} rows={3}
                      style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
                    <div style={{ display: 'flex', gap: 8, marginTop: 8, justifyContent: 'flex-end' }}>
                      <Button size="sm" variant="ghost" onClick={() => { setEditingId(null); setEditTexto(''); }}>Cancelar</Button>
                      <Button size="sm" variant="primary" onClick={() => salvarEdit(n.id)} disabled={!editTexto.trim()}>Salvar</Button>
                    </div>
                  </>
                ) : (
                  <div style={{ fontSize: 13.5, color: 'var(--escalab-ink)', lineHeight: 1.55, whiteSpace: 'pre-wrap' }}>{n.texto}</div>
                )}
              </div>
            ))}
          </div>
        )}
      </Card>
    </div>
  );
};

const PreparoFeedbackPerfil = ({ colaborador, user }) => {
  const hoje = new Date();
  const trimestre = `${hoje.getFullYear()}-T${Math.ceil((hoje.getMonth() + 1) / 3)}`;
  const [trim, setTrim] = useState(trimestre);
  const chave = `${trim}_${user.id}_${colaborador.id}`;

  const carregar = () => {
    try {
      const all = JSON.parse(localStorage.getItem(PREPARO_FB_KEY_PERFIL) || '{}');
      return all[chave] || { notas: {}, destaque: '', desenvolver: '', expectativas: '' };
    } catch { return { notas: {}, destaque: '', desenvolver: '', expectativas: '' }; }
  };
  const [form, setForm] = useState(carregar);
  const [salvo, setSalvo] = useState(false);

  // Reset quando troca trimestre
  React.useEffect(() => { setForm(carregar()); setSalvo(false); }, [trim]);

  function setNota(id, n) { setForm(f => ({ ...f, notas: { ...f.notas, [id]: n } })); }
  function setCampo(k, v) { setForm(f => ({ ...f, [k]: v })); }

  function salvar() {
    try {
      const all = JSON.parse(localStorage.getItem(PREPARO_FB_KEY_PERFIL) || '{}');
      all[chave] = { ...form, preenchidoEm: new Date().toISOString() };
      localStorage.setItem(PREPARO_FB_KEY_PERFIL, JSON.stringify(all));
      setSalvo(true);
      setTimeout(() => setSalvo(false), 2500);
    } catch {}
  }

  const trimestresDisponiveis = [];
  for (let y = hoje.getFullYear(); y >= hoje.getFullYear() - 1; y--) {
    for (let t = 4; t >= 1; t--) trimestresDisponiveis.push(`${y}-T${t}`);
  }
  const notasOk = PREPARO_PERGUNTAS_PERFIL.every(p => form.notas[p.id]);
  const podeSalvar = notasOk && form.destaque.trim() && form.desenvolver.trim();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <Card pad={18}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap', marginBottom: 10 }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>Preparação para o feedback</div>
            <div style={{ fontSize: 13.5, color: 'var(--escalab-slate)', marginTop: 4 }}>Estruture sua conversa antes do feedback formal · avalie cada eixo e descreva pontos positivos e construtivos.</div>
          </div>
          <select value={trim} onChange={e => setTrim(e.target.value)}
            style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0, background: '#fff' }}>
            {trimestresDisponiveis.map(t => <option key={t} value={t}>{t}</option>)}
          </select>
        </div>

        <div style={{ marginTop: 6, marginBottom: 14 }}>
          <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 8 }}>Notas (1 a 5)</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {PREPARO_PERGUNTAS_PERFIL.map(p => (
              <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: 'var(--escalab-paper)', borderRadius: 8 }}>
                <span style={{ flex: 1, fontSize: 13.5, color: 'var(--escalab-ink)' }}>{p.label}</span>
                <div style={{ display: 'flex', gap: 4 }}>
                  {[1,2,3,4,5].map(n => (
                    <button key={n} onClick={() => setNota(p.id, n)}
                      style={{ width: 30, height: 30, borderRadius: 6, border: `2px solid ${form.notas[p.id] === n ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`, background: form.notas[p.id] === n ? 'var(--escalab-brand)' : '#fff', color: form.notas[p.id] === n ? '#fff' : 'var(--escalab-slate)', cursor: 'pointer', fontWeight: 700, fontSize: 13, fontFamily: 'var(--font-sans)' }}>
                      {n}
                    </button>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        <Field label="Pontos positivos · o que vou destacar *">
          <textarea value={form.destaque} onChange={e => setCampo('destaque', e.target.value)} rows={3}
            placeholder="Conquistas, comportamentos exemplares, pontos fortes…"
            style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
        </Field>
        <div style={{ height: 10 }} />
        <Field label="Pontos construtivos · o que pode evoluir *">
          <textarea value={form.desenvolver} onChange={e => setCampo('desenvolver', e.target.value)} rows={3}
            placeholder="Pontos de atenção, áreas de desenvolvimento, comportamentos a ajustar…"
            style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
        </Field>
        <div style={{ height: 10 }} />
        <Field label="Expectativas para o próximo trimestre">
          <textarea value={form.expectativas} onChange={e => setCampo('expectativas', e.target.value)} rows={3}
            placeholder="Metas, projetos esperados, comportamentos a desenvolver…"
            style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
        </Field>

        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 14, alignItems: 'center' }}>
          {salvo && <span style={{ fontSize: 12.5, color: '#00836B', fontWeight: 600 }}>✓ Preparação salva</span>}
          <Button variant="primary" icon="check" onClick={salvar} disabled={!podeSalvar}>Salvar preparação</Button>
        </div>
        {!podeSalvar && (
          <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 6, textAlign: 'right' }}>Preencha todas as notas e os pontos positivos e construtivos para liberar o salvar.</div>
        )}
      </Card>

      {/* Upload do arquivo de feedback formal · pode ser feito aqui no perfil OU na aba AVD/Feedback */}
      <UploadFeedbackEscrito colaborador={colaborador} user={user} trim={trim} />
    </div>
  );
};

// ── Upload do arquivo de feedback · gestor sobe PDF/DOCX após a conversa ─────
// Compartilha storage com a aba AVD/Feedback (key escalab_feedbacks_arquivos)
// e formato: { [colaboradorId]: [{id, data (YYYY-MM-DD), responsavel, gestorId,
// nota, arquivo (nome), arquivoData (base64), status, trim }] }
const FB_AVD_KEY = 'escalab_feedbacks_arquivos';
function _getFbAVD(colabId) {
  try {
    const all = JSON.parse(localStorage.getItem(FB_AVD_KEY) || '{}');
    return all[colabId] || [];
  } catch { return []; }
}
function _setFbAVD(colabId, lista) {
  try {
    const all = JSON.parse(localStorage.getItem(FB_AVD_KEY) || '{}');
    all[colabId] = lista;
    localStorage.setItem(FB_AVD_KEY, JSON.stringify(all));
  } catch {}
}

const UploadFeedbackEscrito = ({ colaborador, user, trim }) => {
  const todos = _getFbAVD(colaborador.id);
  // Mostra somente os arquivos que ESSE gestor subiu (privacidade entre gestores)
  // Itens antigos sem gestorId aparecem para o admin.
  const [lista, setLista] = useState(() => todos.filter(f => f.gestorId === user.id || (!f.gestorId && user?.perfil === 'admin')));
  const [erro, setErro] = useState('');

  function refresh() {
    const all = _getFbAVD(colaborador.id);
    setLista(all.filter(f => f.gestorId === user.id || (!f.gestorId && user?.perfil === 'admin')));
  }

  function handleArquivo(e) {
    const f = e.target.files?.[0];
    if (!f) return;
    if (f.size > 5 * 1024 * 1024) { setErro('Arquivo muito grande (máx 5MB)'); return; }
    const r = new FileReader();
    r.onload = ev => {
      const novo = {
        id: 'FB' + Date.now(),
        data: new Date().toISOString().slice(0, 10),
        responsavel: user.nome || user.cargo || 'Gestor',
        gestorId: user.id,
        nota: '',
        arquivo: f.name,
        arquivoData: ev.target.result,
        status: 'realizado',
        trim,
      };
      const all = _getFbAVD(colaborador.id);
      _setFbAVD(colaborador.id, [novo, ...all]);
      setErro('');
      refresh();
    };
    r.readAsDataURL(f);
  }

  function remover(id) {
    if (!window.confirm('Remover este arquivo de feedback?')) return;
    const all = _getFbAVD(colaborador.id);
    _setFbAVD(colaborador.id, all.filter(x => x.id !== id));
    refresh();
  }

  return (
    <Card pad={18}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap', marginBottom: 10 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>Feedback escrito · arquivo</div>
          <div style={{ fontSize: 13, color: 'var(--escalab-slate)', marginTop: 4 }}>Suba aqui o documento que registra o feedback formal entregue ao colaborador (PDF, DOCX, foto). Este mesmo arquivo aparece também na aba <strong>AVD &amp; Feedback</strong>.</div>
        </div>
        <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6, border: '1px solid var(--escalab-brand)', background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', borderRadius: 8, padding: '7px 14px', cursor: 'pointer', fontSize: 12.5, fontWeight: 700, fontFamily: 'var(--font-sans)' }}>
          <Icon name="upload" size={12} /> Enviar arquivo
          <input type="file" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" onChange={handleArquivo} style={{ display: 'none' }} />
        </label>
      </div>
      {erro && <div style={{ fontSize: 12, color: '#B3261E', marginBottom: 8 }}>{erro}</div>}
      {lista.length === 0 ? (
        <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Nenhum arquivo de feedback enviado ainda.</div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
          {lista.map(a => (
            <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '9px 12px', background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 9 }}>
              <Icon name="file" size={14} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--escalab-ink)' }}>{a.arquivo || '(sem nome)'}</div>
                <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{a.trim ? `Ciclo ${a.trim} · ` : ''}{a.data ? new Date(a.data + 'T00:00:00').toLocaleDateString('pt-BR') : ''}</div>
              </div>
              {a.arquivoData ? (
                <a href={a.arquivoData} download={a.arquivo} style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 7, padding: '5px 11px', fontSize: 12, color: 'var(--escalab-slate)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 5 }}>
                  <Icon name="download" size={12} /> Baixar
                </a>
              ) : (
                <span style={{ fontSize: 11, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>sem conteúdo</span>
              )}
              <button onClick={() => remover(a.id)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 4 }}>
                <Icon name="close" size={13} />
              </button>
            </div>
          ))}
        </div>
      )}
    </Card>
  );
};

// ── Formação · atualizada pelo colaborador ────────────────────────────────────

const TIPOS_FORM = ['Curso','Pós-graduação','MBA','Certificação','Workshop','Graduação','Mestrado','Doutorado','Treinamento'];
const _fKey = id => `escalab_form_${id}`;
function getFormacao(id) { try { return JSON.parse(localStorage.getItem(_fKey(id)) || '[]'); } catch { return []; } }
function addFormacao(id, e) { const l = getFormacao(id); l.unshift(e); localStorage.setItem(_fKey(id), JSON.stringify(l)); }
function marcarVistoRH(id, fid) { localStorage.setItem(_fKey(id), JSON.stringify(getFormacao(id).map(f => f.id===fid ? {...f,vistoRH:true} : f))); }

const SecaoFormacao = ({ colaborador, user, isAdmin }) => {
  const ehProprio = user?.id === colaborador.id;
  const [lista, setLista]     = useState(() => getFormacao(colaborador.id));
  const [showForm, setShow]   = useState(false);
  const [f, setF]             = useState({ nome:'', instituicao:'', tipo:'Curso', dataConclusao:'', cargaHoraria:'', certificado:false });
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const inp = { border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:'none', width:'100%', boxSizing:'border-box' };
  const reload = () => setLista(getFormacao(colaborador.id));

  function salvar(e) {
    e.preventDefault();
    if (!f.nome || !f.dataConclusao) return;
    addFormacao(colaborador.id, { id:'CF'+Date.now(), ...f, criadoEm:new Date().toISOString(), vistoRH:false });
    reload(); setShow(false); setF({ nome:'', instituicao:'', tipo:'Curso', dataConclusao:'', cargaHoraria:'', certificado:false });
  }

  const novos = lista.filter(i => !i.vistoRH).length;
  return (
    <Card pad={22}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:16 }}>
        <Icon name="trophy" size={15}/>
        <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', flex:1 }}>Formação & Certificações</div>
        {isAdmin && novos > 0 && <span style={{ background:'#B56500', color:'#fff', borderRadius:999, padding:'2px 8px', fontSize:11, fontWeight:700 }}>{novos} novo{novos>1?'s':''}</span>}
        {ehProprio && !showForm && <button onClick={() => setShow(true)} style={{ border:0, borderRadius:7, padding:'5px 12px', background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontSize:12, fontWeight:600 }}>+ Adicionar</button>}
      </div>

      {showForm && (
        <form onSubmit={salvar} style={{ background:'var(--escalab-paper)', borderRadius:10, padding:14, marginBottom:14, display:'flex', flexDirection:'column', gap:10 }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
            <label style={{ display:'flex', flexDirection:'column', gap:4 }}><span style={{ fontSize:11, fontWeight:600, color:'var(--escalab-slate)' }}>Nome do curso *</span><input value={f.nome} onChange={e=>set('nome',e.target.value)} style={inp} required/></label>
            <label style={{ display:'flex', flexDirection:'column', gap:4 }}><span style={{ fontSize:11, fontWeight:600, color:'var(--escalab-slate)' }}>Instituição</span><input value={f.instituicao} onChange={e=>set('instituicao',e.target.value)} style={inp}/></label>
            <label style={{ display:'flex', flexDirection:'column', gap:4 }}><span style={{ fontSize:11, fontWeight:600, color:'var(--escalab-slate)' }}>Tipo</span><select value={f.tipo} onChange={e=>set('tipo',e.target.value)} style={inp}>{TIPOS_FORM.map(t=><option key={t}>{t}</option>)}</select></label>
            <label style={{ display:'flex', flexDirection:'column', gap:4 }}><span style={{ fontSize:11, fontWeight:600, color:'var(--escalab-slate)' }}>Data de conclusão *</span><input type="date" value={f.dataConclusao} onChange={e=>set('dataConclusao',e.target.value)} style={inp} required/></label>
            <label style={{ display:'flex', flexDirection:'column', gap:4 }}><span style={{ fontSize:11, fontWeight:600, color:'var(--escalab-slate)' }}>Carga horária</span><input value={f.cargaHoraria} onChange={e=>set('cargaHoraria',e.target.value)} placeholder="ex: 40h" style={inp}/></label>
            <label style={{ display:'flex', alignItems:'center', gap:8, cursor:'pointer', paddingTop:18 }}><input type="checkbox" checked={f.certificado} onChange={e=>set('certificado',e.target.checked)}/><span style={{ fontSize:13 }}>Tenho certificado</span></label>
          </div>
          <div style={{ display:'flex', gap:8, justifyContent:'flex-end' }}>
            <button type="button" onClick={()=>setShow(false)} style={{ padding:'6px 14px', border:'1px solid var(--escalab-line)', borderRadius:7, background:'#fff', cursor:'pointer', fontSize:12 }}>Cancelar</button>
            <button type="submit" style={{ padding:'6px 14px', border:0, borderRadius:7, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:12 }}>Salvar</button>
          </div>
        </form>
      )}

      {lista.length === 0
        ? <div style={{ fontSize:13, color:'var(--escalab-mute)', fontStyle:'italic' }}>{ehProprio ? 'Adicione seus cursos e certificações clicando em "+ Adicionar".' : 'Nenhuma formação registrada ainda.'}</div>
        : <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {lista.map(item => (
              <div key={item.id} onClick={() => isAdmin && !item.vistoRH && (marcarVistoRH(colaborador.id, item.id), reload())} style={{ padding:'10px 12px', borderRadius:10, border:`1px solid ${!item.vistoRH && isAdmin ? '#FFD6A3' : 'var(--escalab-line)'}`, background:!item.vistoRH && isAdmin ? '#FFF7EB' : '#fff', cursor:isAdmin && !item.vistoRH ? 'pointer' : 'default' }}>
                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:2 }}>
                  <span style={{ fontSize:13.5, fontWeight:600 }}>{item.nome}</span>
                  {!item.vistoRH && isAdmin && <span style={{ fontSize:10, background:'#B56500', color:'#fff', borderRadius:5, padding:'1px 6px', fontWeight:700 }}>Novo</span>}
                  {item.certificado && <span style={{ fontSize:10, color:'var(--escalab-brand-deep)', fontWeight:600 }}>· Certificado</span>}
                </div>
                <div style={{ fontSize:12, color:'var(--escalab-mute)' }}>{item.tipo}{item.instituicao ? ` · ${item.instituicao}` : ''}{item.dataConclusao ? ` · ${item.dataConclusao.split('-').reverse().join('/')}` : ''}{item.cargaHoraria ? ` · ${item.cargaHoraria}` : ''}</div>
              </div>
            ))}
          </div>
      }
    </Card>
  );
};

// ── Dados de Diversidade (auto-declarados) ───────────────────────────────────

const DIV_KEY = id => `escalab_diversidade_${id}`;
const DIV_CAMPOS = [
  { key:'genero',          label:'Gênero que se identifica',       opcoes: GENERO_OPCOES,
    descricoes: { 'Gênero fluido': 'Sente que seu gênero pode variar ao longo do tempo' } },
  { key:'estadoCivil',     label:'Estado civil',                   opcoes:['Solteiro(a)','Casado(a)','União estável','Divorciado(a)','Viúvo(a)','Prefiro não declarar'] },
  { key:'etnia',           label:'Etnia/Cor',                      opcoes:['Branca','Preta','Parda','Amarela','Indígena','Prefiro não declarar'] },
  { key:'orientacao',      label:'Orientação sexual',              opcoes: ORIENTACAO_OPCOES },
  { key:'religiao',        label:'Religião',                       opcoes:['Sem religião','Católica','Evangélica','Espírita','Umbanda/Candomblé','Budista','Judaica','Muçulmana','Prefiro não declarar','Outro'] },
  { key:'deficiencia',     label:'Deficiência (PCD)',              opcoes:['Não possuo','Física','Visual','Auditiva','Intelectual','Múltipla','Prefiro não declarar'] },
];

const SecaoDiversidade = ({ colaborador, user }) => {
  const ehProprio = user?.id === colaborador.id;
  const [dados, setDados] = useState(() => { try { return JSON.parse(localStorage.getItem(DIV_KEY(colaborador.id)) || '{}'); } catch { return {}; } });
  const [editando, setEditando] = useState(false);
  const [rascunho, setRascunho] = useState({});

  function iniciarEdicao() { setRascunho({...dados}); setEditando(true); }
  function cancelar() { setEditando(false); }
  function salvar() {
    localStorage.setItem(DIV_KEY(colaborador.id), JSON.stringify(rascunho));
    setDados({...rascunho}); setEditando(false);
  }
  const sel = (k,v) => { setRascunho(r => ({...r,[k]:v})); };
  const inp = { border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:'none', width:'100%' };
  const preenchidos = DIV_CAMPOS.filter(c => dados[c.key] && dados[c.key] !== 'Prefiro não declarar').length;

  return (
    <Card pad={22}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:16 }}>
        <Icon name="users" size={15}/>
        <div style={{ fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--escalab-mute)', flex:1 }}>Dados de Diversidade</div>
        <span style={{ fontSize:11.5, color:'var(--escalab-mute)' }}>{preenchidos}/{DIV_CAMPOS.length} preenchidos</span>
        {ehProprio && !editando && <button onClick={iniciarEdicao} style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'5px 12px', background:'#fff', cursor:'pointer', fontSize:12, fontFamily:'var(--font-sans)' }}>Editar</button>}
      </div>
      <div style={{ background:'#FFF7EB', border:'1px solid #FFD6A3', borderRadius:9, padding:'10px 14px', marginBottom:14, fontSize:12.5, color:'#7A4A00', display:'flex', gap:8, alignItems:'flex-start' }}>
        <Icon name="lock" size={13}/>
        <span>Informações sensíveis e auto-declaradas. Visíveis apenas para você e para o GC no contexto de relatórios de diversidade.</span>
      </div>

      {editando ? (
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
            {DIV_CAMPOS.map(c => {
              const valor = rascunho[c.key] || '';
              const descr = c.descricoes?.[valor];
              return (
                <label key={c.key} style={{ display:'flex', flexDirection:'column', gap:5 }}>
                  <span style={{ fontSize:12, fontWeight:600, color:'var(--escalab-slate)' }}>{c.label}</span>
                  <select value={valor} onChange={e=>sel(c.key,e.target.value)} style={inp}>
                    <option value="">· não declarado ·</option>
                    {c.opcoes.map(o=><option key={o}>{o}</option>)}
                  </select>
                  {descr && <span style={{ fontSize:11, color:'var(--escalab-mute)', fontStyle:'italic' }}>{descr}</span>}
                </label>
              );
            })}
          </div>
          <div style={{ display:'flex', gap:8, justifyContent:'flex-end', marginTop:4 }}>
            <button onClick={cancelar} style={{ padding:'7px 16px', border:'1px solid var(--escalab-line)', borderRadius:7, background:'#fff', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)' }}>Cancelar</button>
            <button onClick={salvar} style={{ padding:'7px 16px', border:0, borderRadius:7, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13, fontFamily:'var(--font-sans)' }}>Salvar</button>
          </div>
        </div>
      ) : (
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
          {DIV_CAMPOS.map(c => {
            const valor = dados[c.key];
            const descr = c.descricoes?.[valor];
            return (
              <div key={c.key} style={{ display:'flex', flexDirection:'column', gap:3 }}>
                <span style={{ fontSize:10.5, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--escalab-mute)' }}>{c.label}</span>
                <span style={{ fontSize:13.5, color:valor?'var(--escalab-ink)':'var(--escalab-mute)', fontStyle:valor?'normal':'italic' }}>{valor||'· não declarado ·'}</span>
                {descr && <span style={{ fontSize:11, color:'var(--escalab-mute)', fontStyle:'italic' }}>{descr}</span>}
              </div>
            );
          })}
        </div>
      )}
    </Card>
  );
};

// ── Aba: Sobre mim + Faz no Escalab (editável pelo próprio colaborador) ──────
const SOBRE_KEY = id => `escalab_sobre_${id}`;
const SUGESTOES_SOBRE = ['Hobbies', 'O que mais gosto de fazer no tempo livre', 'Área dentro da minha formação', 'O que me motiva', 'Um livro/filme que me marcou'];
const SUGESTOES_ESCALAB = ['Projetos que estou tocando', 'Áreas em que mais contribuo', 'O que mais curto no dia a dia', 'Próximos desafios'];

function getSobre(id) { try { return JSON.parse(localStorage.getItem(SOBRE_KEY(id)) || '{}'); } catch { return {}; } }
function salvarSobre(id, dados) { try { localStorage.setItem(SOBRE_KEY(id), JSON.stringify(dados)); } catch {} }

const AbaSobreMim = ({ colaborador, user }) => {
  const [aba, setAba] = useState('sobre');
  const [dados, setDados] = useState(() => getSobre(colaborador.id));
  const [salvo, setSalvo] = useState(false);
  const podeEditar = user?.id === colaborador.id || user?.perfil === 'admin';

  function setCampo(k, v) { setDados(d => ({ ...d, [k]: v })); }
  function salvar() {
    salvarSobre(colaborador.id, dados);
    setSalvo(true); setTimeout(() => setSalvo(false), 2500);
  }

  const abaConf = aba === 'sobre'
    ? { titulo: 'Sobre mim', campo: 'sobreMim', sugestoes: SUGESTOES_SOBRE, placeholder: 'Conte um pouco sobre você · interesses, hobbies, área de formação, o que te motiva…' }
    : { titulo: 'O que faço no Escalab', campo: 'fazNoEscalab', sugestoes: SUGESTOES_ESCALAB, placeholder: 'Conte o que você faz no Escalab · projetos, contribuições, áreas de atuação…' };

  return (
    <Card pad={22}>
      {/* Sub-tabs */}
      <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--escalab-line)', marginBottom: 16 }}>
        {['sobre', 'escalab'].map(id => {
          const ativa = aba === id;
          const label = id === 'sobre' ? 'Sobre mim' : 'Faz no Escalab';
          return (
            <button key={id} onClick={() => setAba(id)} style={{
              border: 0, background: 'transparent', cursor: 'pointer', padding: '8px 14px',
              fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: ativa ? 700 : 500,
              color: ativa ? 'var(--escalab-brand)' : 'var(--escalab-mute)',
              borderBottom: `2px solid ${ativa ? 'var(--escalab-brand)' : 'transparent'}`,
              marginBottom: -1, transition: 'all .15s',
            }}>{label}</button>
          );
        })}
      </div>

      <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--escalab-ink)', marginBottom: 6 }}>{abaConf.titulo}</div>
      {podeEditar ? (
        <>
          <textarea value={dados[abaConf.campo] || ''} onChange={e => setCampo(abaConf.campo, e.target.value)} rows={8}
            placeholder={abaConf.placeholder}
            style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 10, padding: '12px 14px', fontSize: 14, fontFamily: 'var(--font-sans)', resize: 'vertical', outline: 'none', boxSizing: 'border-box', lineHeight: 1.55 }} />
          <div style={{ marginTop: 10, padding: '10px 12px', background: 'var(--escalab-paper)', borderRadius: 8, fontSize: 12, color: 'var(--escalab-slate)' }}>
            <strong style={{ color: 'var(--escalab-brand-deep)' }}>Sugestões:</strong>{' '}
            {abaConf.sugestoes.join(' · ')}
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 9, marginTop: 12, alignItems: 'center' }}>
            {salvo && <span style={{ fontSize: 12, color: '#00836B', fontWeight: 600 }}>✓ Salvo</span>}
            <Button variant="primary" onClick={salvar}>Salvar</Button>
          </div>
        </>
      ) : (
        <div style={{ background: 'var(--escalab-paper)', borderRadius: 10, padding: '16px 18px', fontSize: 14, color: 'var(--escalab-ink)', lineHeight: 1.6, whiteSpace: 'pre-wrap', minHeight: 80 }}>
          {dados[abaConf.campo] || <span style={{ color: 'var(--escalab-mute)', fontStyle: 'italic' }}>O colaborador ainda não preencheu esta seção.</span>}
        </div>
      )}
    </Card>
  );
};

// ── Aba: Dados Organizacionais (RH-only edit, log com cor de mudança) ────────
const DADOS_ORG_KEY = id => `escalab_dados_org_${id}`;
const TIPOS_MOVIMENTACAO_ORG = [
  'Ajuste salarial',
  'Admissão',
  'Alteração de cargo',
  'Alteração de departamento',
  'Dissídio',
  'Mudança de step (mérito)',
  'Mudança de projeto',
  'Promoção',
  'Alteração de liderança',
];
// Catálogo padronizado de cargos e departamentos (configurável pelo GC em screen-admin)
const CARGOS_PADRAO_DEFAULT = [
  'CEO', 'Diretor(a) de Setor', 'Diretor(a) de Área', 'Diretor(a) Executivo',
  'Líder/Especialista I', 'Líder/Especialista II', 'Líder/Especialista III',
  'Coordenador(a) Técnico(a)', 'Coordenador(a) de Projetos',
  'Analista I', 'Analista II', 'Analista III', 'Analista em Crescimento',
  'Técnico/Assistente I', 'Técnico/Assistente II',
  'Associado(a)', 'Associado(a) de Projetos', 'Associado(a) de Editais',
  'Estagiário(a)', 'Aprendiz',
];
const CARGOS_KEY = 'escalab_cargos_padronizados';
const DEPTOS_KEY = 'escalab_deptos_padronizados';
function getCargosPadrao() { try { const r = localStorage.getItem(CARGOS_KEY); return r ? JSON.parse(r) : CARGOS_PADRAO_DEFAULT; } catch { return CARGOS_PADRAO_DEFAULT; } }
function salvarCargosPadrao(arr) { try { localStorage.setItem(CARGOS_KEY, JSON.stringify(arr)); } catch {} }
function getDeptosPadrao() {
  try {
    const r = localStorage.getItem(DEPTOS_KEY);
    if (r) return JSON.parse(r);
    return typeof SETORES !== 'undefined' ? [...SETORES] : [];
  } catch { return typeof SETORES !== 'undefined' ? [...SETORES] : []; }
}
function salvarDeptosPadrao(arr) { try { localStorage.setItem(DEPTOS_KEY, JSON.stringify(arr)); } catch {} }

if (typeof window !== 'undefined') {
  window.getCargosPadrao = getCargosPadrao;
  window.salvarCargosPadrao = salvarCargosPadrao;
  window.getDeptosPadrao = getDeptosPadrao;
  window.salvarDeptosPadrao = salvarDeptosPadrao;
}

const CAMPOS_DADOS_ORG = [
  { key: 'categoria',        label: 'Categoria',          tipo: 'select', opcoes: ['Fixo', 'Associado Projetos', 'Associado Editais', 'Associado VB', 'Associado Redes'] },
  { key: 'vinculo',         label: 'Vínculo',            tipo: 'select', opcoes: ['Contrato CLT', 'Contrato por tempo determinado', 'Prestador de serviço', 'Estágio', 'Aprendiz'] },
  { key: 'cargo',            label: 'Cargo',              tipo: 'select-padronizado', fonte: 'cargos' },
  { key: 'cargoLideranca',   label: 'Cargo de liderança', tipo: 'select', opcoes: ['Sim', 'Não'] },
  { key: 'cargoConfianca',   label: 'Cargo de confiança', tipo: 'select', opcoes: ['Sim', 'Não'] },
  { key: 'pessoaGestora',    label: 'Pessoa gestora',     tipo: 'multi-colab' },
  { key: 'departamento',     label: 'Departamento',       tipo: 'select-padronizado', fonte: 'deptos' },
  { key: 'centroCusto',      label: 'Centro de Custo',    tipo: 'text' },
  { key: 'salarioBruto',     label: 'Salário Bruto',      tipo: 'moeda' },
  { key: 'vt',               label: 'Vale-Transporte (R$/mês)', tipo: 'moeda', help: 'Valor mensal em R$. Deixe vazio se não aplicável.' },
  { key: 'decimoTerceiro',   label: '13º (R$ anual)',     tipo: 'moeda', help: 'Padrão = 1 salário. Use override em R$ se valor diferente.' },
  { key: 'plr',              label: 'PLR (R$ anual)',     tipo: 'moeda', help: 'Participação nos Lucros e Resultados. Valor anual em R$.' },
  { key: 'receitaAnual',     label: 'Receita gerada (R$ anual)', tipo: 'moeda', help: 'Quanto este colaborador gera de receita por ano. Usado p/ margem de contribuição.' },
  { key: 'jornadaTrabalho',  label: 'Jornada de trabalho',tipo: 'select', opcoes: ['Presencial', 'Híbrida', 'Remota'] },
  { key: 'horasMensais',     label: 'Carga horária mensal (h)', tipo: 'text' },
  { key: 'dataContratacao',  label: 'Data de contratação',tipo: 'date' },
  // Data de nascimento movida para Dados Pessoais (alimenta aniversariantes na intranet)
  { key: 'tipoMovimentacao', label: 'Tipo de movimentação',tipo: 'select', opcoes: TIPOS_MOVIMENTACAO_ORG },
  { key: 'comentario',       label: 'Comentário',         tipo: 'textarea' },
];

const CAMPO_POR_KEY = CAMPOS_DADOS_ORG.reduce((acc, c) => { acc[c.key] = c; return acc; }, {});

const GRUPOS_DADOS_ORG = [
  { titulo: 'Contratual',   icon: 'org',      campos: ['categoria', 'vinculo', 'cargo', 'departamento', 'pessoaGestora', 'centroCusto', 'jornadaTrabalho', 'horasMensais'] },
  { titulo: 'Remuneração',  icon: 'trophy',   campos: ['salarioBruto', 'vt', 'decimoTerceiro', 'plr', 'receitaAnual'] },
  { titulo: 'Datas',        icon: 'calendar', campos: ['dataContratacao'] },
  { titulo: 'Liderança',    icon: 'star',     campos: ['cargoLideranca', 'cargoConfianca'] },
  { titulo: 'Movimentação', icon: 'trend_up', campos: ['tipoMovimentacao', 'comentario'] },
];

function _fmtMoedaBR(v) {
  if (v === '' || v == null) return '';
  const n = Number(String(v).replace(/[^\d,.-]/g, '').replace(',', '.'));
  if (!isFinite(n)) return String(v);
  return n.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL', minimumFractionDigits: 2 });
}
function _fmtDataBR(iso) {
  if (!iso) return '';
  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(iso);
  if (!m) return iso;
  return `${m[3]}/${m[2]}/${m[1]}`;
}
function _anosEntre(iso, ref = new Date()) {
  if (!iso) return null;
  const d = new Date(iso);
  if (isNaN(d.getTime())) return null;
  let anos = ref.getFullYear() - d.getFullYear();
  const mDiff = ref.getMonth() - d.getMonth();
  if (mDiff < 0 || (mDiff === 0 && ref.getDate() < d.getDate())) anos--;
  return anos;
}
function _tempoLegivel(iso, sufixo) {
  const anos = _anosEntre(iso);
  if (anos == null) return '';
  if (anos < 1) {
    const d = new Date(iso);
    const meses = Math.max(0, Math.round((Date.now() - d.getTime()) / (1000 * 60 * 60 * 24 * 30)));
    return meses <= 1 ? `há ${meses} mês` : `há ${meses} meses`;
  }
  return anos === 1 ? `${sufixo || 'há 1 ano'}` : `${sufixo ? sufixo.replace('1', anos) : `há ${anos} anos`}`;
}

function getDadosOrg(id) { try { return JSON.parse(localStorage.getItem(DADOS_ORG_KEY(id)) || '{}'); } catch { return {}; } }
function salvarDadosOrg(id, dados, historico) {
  // LS sempre (sincrono, fonte da verdade pro frontend hoje).
  try {
    localStorage.setItem(DADOS_ORG_KEY(id), JSON.stringify(dados));
    if (historico) localStorage.setItem(DADOS_ORG_KEY(id) + '_log', JSON.stringify(historico));
  } catch {}
  // Supabase async best-effort. Nao bloqueia o salvar; se falhar, log silencioso
  // (componente que chama pode tratar promise pra mostrar status).
  if (typeof salvarDadosOrgSupabase === 'function') {
    return salvarDadosOrgSupabase(id, dados).catch(e => { console.warn('dados_org Supabase:', e); return { ok: false, erro: e?.message }; });
  }
  return Promise.resolve({ ok: false, erro: 'helper Supabase nao carregado' });
}
function getHistoricoOrg(id) { try { return JSON.parse(localStorage.getItem(DADOS_ORG_KEY(id) + '_log') || '[]'); } catch { return []; } }

const AbaDadosOrganizacionais = ({ colaborador, user, isAdmin, onRefresh }) => {
  const [dados, setDados] = useState(() => getDadosOrg(colaborador.id));
  const [editando, setEditando] = useState(false);
  const [draft, setDraft] = useState(dados);
  const [historico, setHistorico] = useState(() => getHistoricoOrg(colaborador.id));
  const [salvo, setSalvo] = useState(false);
  const [syncStatus, setSyncStatus] = useState('idle'); // 'idle' | 'syncing' | 'synced' | 'erro'
  const [syncErro, setSyncErro] = useState('');
  const [modalSenha, setModalSenha] = useState(false);
  const [senhaAdmin, setSenhaAdmin] = useState('');
  const [senhaAdminMsg, setSenhaAdminMsg] = useState('');
  const [senhaAdminSalvando, setSenhaAdminSalvando] = useState(false);

  // Hidrata do Supabase no mount: se houver dados mais frescos no banco,
  // sobrescreve o LS. Best-effort, silencioso se falhar.
  useEffect(() => {
    let cancelado = false;
    (async () => {
      if (typeof carregarDadosOrgSupabase !== 'function') return;
      const sb = await carregarDadosOrgSupabase(colaborador.id);
      if (cancelado || !sb || Object.keys(sb).length === 0) return;
      // Merge: campos do Supabase prevalecem sobre LS pra campos que vieram do banco.
      const merged = { ...dados, ...sb };
      // Se diferente, atualiza LS local pra ficar consistente.
      if (JSON.stringify(merged) !== JSON.stringify(dados)) {
        setDados(merged);
        try { localStorage.setItem(DADOS_ORG_KEY(colaborador.id), JSON.stringify(merged)); } catch {}
      }
    })();
    return () => { cancelado = true; };
  }, [colaborador.id]);

  const podeEditar = isAdmin; // Apenas GC (admin)

  function iniciarEdicao() {
    let pg = dados.pessoaGestora;
    if (!pg || (typeof pg === 'string' && !pg.trim())) pg = colaborador.gestorNome ? [colaborador.gestorNome] : [];
    if (typeof pg === 'string') pg = pg.split(',').map(s => s.trim()).filter(Boolean);
    const categoriaPre = dados.categoria
      || (typeof formatCategoriaLabel === 'function' && typeof getCategoriaColaborador === 'function'
        ? formatCategoriaLabel(getCategoriaColaborador(colaborador.id))
        : '');
    setDraft({ ...dados, cargo: dados.cargo || colaborador.cargo, departamento: dados.departamento || colaborador.setor, pessoaGestora: pg, categoria: categoriaPre });
    setEditando(true);
  }

  function salvar() {
    const norm = v => Array.isArray(v) ? v.join(', ') : (v || '');
    const mudancas = [];
    CAMPOS_DADOS_ORG.forEach(c => {
      const antes = norm(dados[c.key]);
      const depois = norm(draft[c.key]);
      if (antes !== depois) {
        mudancas.push({ campo: c.label, antes, depois });
      }
    });
    const novoHistorico = mudancas.length ? [
      { id: 'h' + Date.now(), data: new Date().toISOString(), por: user.nome, mudancas },
      ...historico,
    ] : historico;

    setDados(draft);
    setHistorico(novoHistorico);
    setSyncStatus('syncing'); setSyncErro('');
    // salvarDadosOrg faz LS sync + Supabase async (Promise).
    const p = salvarDadosOrg(colaborador.id, draft, novoHistorico);
    if (p && typeof p.then === 'function') {
      p.then(r => {
        if (r?.ok) { setSyncStatus('synced'); setTimeout(() => setSyncStatus('idle'), 4000); }
        else { setSyncStatus('erro'); setSyncErro(r?.erro || 'falha desconhecida'); }
      }).catch(e => { setSyncStatus('erro'); setSyncErro(e?.message || 'falha'); });
    } else {
      setSyncStatus('synced'); setTimeout(() => setSyncStatus('idle'), 4000);
    }
    setEditando(false); setSalvo(true); setTimeout(() => setSalvo(false), 3000);
    onRefresh?.();
  }

  // Última mudança por campo, p/ destaque vermelho
  const ultimaMudancaPorCampo = {};
  historico.forEach(h => h.mudancas.forEach(m => { if (!ultimaMudancaPorCampo[m.campo]) ultimaMudancaPorCampo[m.campo] = h.data; }));
  let pgExibir = dados.pessoaGestora;
  if (Array.isArray(pgExibir)) pgExibir = pgExibir.join(', ');
  else if (!pgExibir) pgExibir = colaborador.gestorNome;
  // Categoria: se nao salva ainda, pre-preenche com o que vem do CATEGORIA_MAP (fonte hardcoded) p/ admin nao salvar 'Fixo' por engano em todo mundo.
  const categoriaExibir = dados.categoria
    || (typeof formatCategoriaLabel === 'function' && typeof getCategoriaColaborador === 'function'
      ? formatCategoriaLabel(getCategoriaColaborador(colaborador.id))
      : '');
  const valoresExibir = editando ? draft : { ...dados, cargo: dados.cargo || colaborador.cargo, departamento: dados.departamento || colaborador.setor, pessoaGestora: pgExibir, categoria: categoriaExibir };

  // Estilos compartilhados
  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' };
  const lbl = { fontSize: 10.5, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-slate)' };

  function renderCampoEdicao(c, val) {
    if (c.tipo === 'select') {
      return (
        <select value={val} onChange={e => setDraft(d => ({ ...d, [c.key]: e.target.value }))} style={inp}>
          <option value="">·</option>
          {c.opcoes.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
      );
    }
    if (c.tipo === 'select-padronizado') {
      return (
        <div style={{ display: 'flex', gap: 6 }}>
          <select value={val} onChange={e => setDraft(d => ({ ...d, [c.key]: e.target.value }))} style={{ ...inp, flex: 1 }}>
            <option value="">·</option>
            {(c.fonte === 'cargos' ? getCargosPadrao() : getDeptosPadrao()).map(o => <option key={o} value={o}>{o}</option>)}
          </select>
          <button type="button" onClick={() => {
            const novo = prompt(`Adicionar novo ${c.fonte === 'cargos' ? 'cargo' : 'departamento'} ao catálogo:`);
            if (!novo || !novo.trim()) return;
            if (c.fonte === 'cargos') {
              const atuais = getCargosPadrao();
              if (atuais.includes(novo.trim())) return;
              salvarCargosPadrao([...atuais, novo.trim()]);
            } else {
              const atuais = getDeptosPadrao();
              if (atuais.includes(novo.trim())) return;
              salvarDeptosPadrao([...atuais, novo.trim()]);
            }
            setDraft(d => ({ ...d, [c.key]: novo.trim() }));
          }} title="Adicionar novo ao catálogo" style={{ border: '1px dashed var(--escalab-brand-soft)', background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', borderRadius: 8, padding: '6px 12px', cursor: 'pointer', fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap' }}>+ Novo</button>
        </div>
      );
    }
    if (c.tipo === 'textarea') {
      return (
        <textarea value={val} onChange={e => setDraft(d => ({ ...d, [c.key]: e.target.value }))} rows={3}
          style={{ ...inp, resize: 'vertical', lineHeight: 1.5 }} />
      );
    }
    if (c.tipo === 'multi-colab') {
      return (
        <div style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '6px 8px', background: '#fff' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 6 }}>
            {(Array.isArray(val) ? val : []).map(nome => (
              <span key={nome} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', borderRadius: 999, padding: '3px 9px', fontSize: 12, fontWeight: 600 }}>
                {nome}
                <button onClick={() => setDraft(d => ({ ...d, [c.key]: (Array.isArray(d[c.key]) ? d[c.key] : []).filter(x => x !== nome) }))} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-brand-deep)', padding: 0, fontWeight: 800 }}>×</button>
              </span>
            ))}
          </div>
          <select value="" onChange={e => {
            const nome = e.target.value;
            if (!nome) return;
            setDraft(d => {
              const atuais = Array.isArray(d[c.key]) ? d[c.key] : [];
              if (atuais.includes(nome)) return d;
              return { ...d, [c.key]: [...atuais, nome] };
            });
          }} style={{ width: '100%', border: 0, padding: '5px 4px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 'none', background: 'transparent' }}>
            <option value="">+ Adicionar gestor(a)…</option>
            {COLABORADORES.filter(co => !(Array.isArray(val) ? val : []).includes(co.nome)).map(co => (
              <option key={co.id} value={co.nome}>{co.nome} · {co.cargo}</option>
            ))}
          </select>
        </div>
      );
    }
    // moeda + text + date
    return (
      <input type={c.tipo === 'date' ? 'date' : 'text'} value={val}
        onChange={e => setDraft(d => ({ ...d, [c.key]: e.target.value }))}
        placeholder={c.tipo === 'moeda' ? 'R$ 0,00' : ''}
        style={inp} />
    );
  }

  function renderCampoLeitura(c, val) {
    const mudou = !!ultimaMudancaPorCampo[c.label];
    const cor = mudou ? '#B56500' : 'var(--escalab-ink)';

    // Salário: badge verde grande
    if (c.key === 'salarioBruto') {
      const formatado = _fmtMoedaBR(val);
      return (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          {formatado ? (
            <span style={{ display: 'inline-flex', alignItems: 'center', background: '#E6F5F1', color: '#005E4D', border: '1px solid #B5E3D7', borderRadius: 8, padding: '8px 14px', fontSize: 17, fontWeight: 700, letterSpacing: '-.01em' }}>
              {formatado}
            </span>
          ) : (
            <span style={{ fontSize: 13.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>·</span>
          )}
          {mudou && <span style={{ fontSize: 10, background: '#FFF7EB', color: '#B56500', border: '1px solid #FFD6A3', borderRadius: 999, padding: '2px 8px', fontWeight: 700 }}>alterado</span>}
        </div>
      );
    }

    // Moeda
    if (c.tipo === 'moeda') {
      const formatado = _fmtMoedaBR(val);
      return (
        <div style={{ fontSize: 13.5, color: cor, fontWeight: mudou ? 700 : 500, display: 'flex', alignItems: 'center', gap: 8 }}>
          {formatado || <span style={{ color: 'var(--escalab-mute)', fontStyle: 'italic' }}>·</span>}
          {mudou && <span style={{ fontSize: 10, background: '#FFF7EB', color: '#B56500', border: '1px solid #FFD6A3', borderRadius: 999, padding: '1px 7px', fontWeight: 700 }}>alterado</span>}
        </div>
      );
    }

    // Datas: dd/mm/yyyy + tempo legível
    if (c.tipo === 'date') {
      const fmt = _fmtDataBR(val);
      let extra = '';
      if (val) {
        const anos = _anosEntre(val);
        if (c.key === 'dataContratacao' && anos != null) {
          extra = anos === 0 ? _tempoLegivel(val) : (anos === 1 ? '1 ano de Escalab' : `${anos} anos de Escalab`);
        } else if (c.key === 'dataNascimento' && anos != null) {
          extra = `${anos} anos`;
        }
      }
      return (
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 14, color: cor, fontWeight: mudou ? 700 : 600 }}>{fmt || <span style={{ color: 'var(--escalab-mute)', fontStyle: 'italic', fontWeight: 400 }}>·</span>}</span>
          {extra && <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>· {extra}</span>}
          {mudou && <span style={{ fontSize: 10, background: '#FFF7EB', color: '#B56500', border: '1px solid #FFD6A3', borderRadius: 999, padding: '1px 7px', fontWeight: 700 }}>alterado</span>}
        </div>
      );
    }

    // Sim/Não como tag colorida
    if (c.tipo === 'select' && Array.isArray(c.opcoes) && c.opcoes.length === 2 && c.opcoes.includes('Sim') && c.opcoes.includes('Não')) {
      const sim = val === 'Sim';
      return (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {val ? (
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 10px', borderRadius: 999, fontSize: 12, fontWeight: 700, background: sim ? '#E6F5F1' : 'rgba(74,85,96,.08)', color: sim ? '#00836B' : '#4A5560', border: `1px solid ${sim ? '#B5E3D7' : 'transparent'}` }}>
              {sim ? '✓' : '·'} {val}
            </span>
          ) : (
            <span style={{ fontSize: 13.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>·</span>
          )}
          {mudou && <span style={{ fontSize: 10, background: '#FFF7EB', color: '#B56500', border: '1px solid #FFD6A3', borderRadius: 999, padding: '1px 7px', fontWeight: 700 }}>alterado</span>}
        </div>
      );
    }

    // multi-colab
    if (c.tipo === 'multi-colab') {
      const lista = Array.isArray(val) ? val : (val ? String(val).split(',').map(s => s.trim()).filter(Boolean) : []);
      return (
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
          {lista.length ? lista.map(nome => (
            <span key={nome} style={{ display: 'inline-flex', alignItems: 'center', background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', borderRadius: 999, padding: '3px 10px', fontSize: 12.5, fontWeight: 600 }}>{nome}</span>
          )) : <span style={{ fontSize: 13.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>·</span>}
          {mudou && <span style={{ fontSize: 10, background: '#FFF7EB', color: '#B56500', border: '1px solid #FFD6A3', borderRadius: 999, padding: '1px 7px', fontWeight: 700 }}>alterado</span>}
        </div>
      );
    }

    // Padrão
    return (
      <div style={{ fontSize: 13.5, color: cor, fontWeight: mudou ? 700 : 500, display: 'flex', alignItems: 'center', gap: 8, whiteSpace: c.tipo === 'textarea' ? 'pre-wrap' : 'normal' }}>
        {val || <span style={{ color: 'var(--escalab-mute)', fontStyle: 'italic' }}>·</span>}
        {mudou && <span style={{ fontSize: 10, background: '#FFF7EB', color: '#B56500', border: '1px solid #FFD6A3', borderRadius: 999, padding: '1px 7px', fontWeight: 700 }}>alterado</span>}
      </div>
    );
  }

  function renderCampoCelula(c, ehFullWidth) {
    const val = valoresExibir[c.key] !== undefined ? valoresExibir[c.key] : '';
    return (
      <div key={c.key} style={{ display: 'flex', flexDirection: 'column', gap: 6, gridColumn: ehFullWidth ? '1 / -1' : 'auto' }}>
        <div style={lbl}>{c.label}</div>
        {editando ? renderCampoEdicao(c, val) : renderCampoLeitura(c, val)}
        {editando && c.help && <div style={{ fontSize: 11, color: 'var(--escalab-mute)', lineHeight: 1.4 }}>{c.help}</div>}
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* Header com título e ações */}
      <div className="dados-org-header" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '4px 4px', flexWrap: 'wrap' }}>
        <Icon name="org" size={18} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--escalab-ink)' }}>Dados Organizacionais</div>
          <div className="dados-org-subtitle" style={{ fontSize: 12, color: 'var(--escalab-mute)', marginTop: 2 }}>
            Preenchido pelo GC · alterações recentes ficam destacadas
          </div>
        </div>
        {salvo && <span style={{ fontSize: 12, color: '#00836B', fontWeight: 600 }}>✓ Salvo</span>}
        {syncStatus === 'syncing' && <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)', display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 10, height: 10, border: '2px solid var(--escalab-line)', borderTopColor: 'var(--escalab-brand)', borderRadius: '50%', animation: 'spin .7s linear infinite', display: 'inline-block' }} /> Sincronizando com Supabase…</span>}
        {syncStatus === 'synced' && <span style={{ fontSize: 11.5, color: '#00836B' }}>☁ Sincronizado</span>}
        {syncStatus === 'erro' && <span style={{ fontSize: 11.5, color: '#B3261E' }} title={syncErro}>⚠ Falha na sincronização (salvo localmente)</span>}
        {podeEditar && !editando && (
          <>
            <Button size="sm" variant="outline" onClick={async () => {
              // Limpa LS local desse colab e recarrega do Supabase. Resolve casos
              // de cache poluido (dados de outra pessoa que vieram via bug antigo).
              if (!confirm(`Limpar dados locais de ${colaborador.nome.split(' ')[0]} e recarregar do servidor?`)) return;
              try {
                localStorage.removeItem(DADOS_ORG_KEY(colaborador.id));
                localStorage.removeItem(DADOS_ORG_KEY(colaborador.id) + '_log');
              } catch {}
              setDados({}); setHistorico([]);
              if (typeof carregarDadosOrgSupabase === 'function') {
                const sb = await carregarDadosOrgSupabase(colaborador.id);
                if (sb) {
                  setDados(sb);
                  try { localStorage.setItem(DADOS_ORG_KEY(colaborador.id), JSON.stringify(sb)); } catch {}
                }
              }
              setSyncStatus('synced'); setTimeout(() => setSyncStatus('idle'), 3000);
            }} title="Limpa cache local e busca do Supabase. Use se os dados parecerem inconsistentes.">
              Recarregar do servidor
            </Button>
            <Button size="sm" variant="outline" onClick={() => {
              if (!colaborador.email || colaborador.email.startsWith('falta-email')) {
                alert('Este colaborador não tem email cadastrado. Atualize o email antes.');
                return;
              }
              setSenhaAdmin(''); setSenhaAdminMsg(''); setModalSenha(true);
            }} title="Define ou redefine a senha do colaborador sem enviar email. Se ele ainda nao tem conta no Auth, cria automaticamente.">
              Definir senha
            </Button>
            <Button size="sm" variant="outline" onClick={iniciarEdicao}>Editar</Button>
          </>
        )}
        {editando && (
          <>
            <Button size="sm" variant="outline" onClick={() => setEditando(false)}>Cancelar</Button>
            <Button size="sm" variant="primary" onClick={salvar}>Salvar tudo</Button>
          </>
        )}
      </div>

      {/* Cards por grupo */}
      {GRUPOS_DADOS_ORG.map(grupo => (
        <Card key={grupo.titulo} pad={22}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
            <Icon name={grupo.icon} size={15} />
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>{grupo.titulo}</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 16, rowGap: 18 }} className="mobile-col1">
            {grupo.campos.map(key => {
              const c = CAMPO_POR_KEY[key];
              if (!c) return null;
              const ehFullWidth = c.tipo === 'textarea' || c.tipo === 'multi-colab';
              return renderCampoCelula(c, ehFullWidth);
            })}
          </div>
        </Card>
      ))}

      {/* Histórico */}
      {historico.length > 0 && (
        <Card pad={22}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
            <Icon name="clock" size={15} />
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>Histórico de alterações</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxHeight: 280, overflowY: 'auto' }}>
            {historico.map(h => (
              <div key={h.id} style={{ background: 'var(--escalab-paper)', borderRadius: 9, padding: '10px 14px', borderLeft: '3px solid var(--escalab-brand)' }}>
                <div style={{ fontSize: 12, color: 'var(--escalab-mute)', marginBottom: 6 }}>
                  <strong style={{ color: 'var(--escalab-ink)' }}>{h.por}</strong> · {new Date(h.data).toLocaleString('pt-BR')}
                </div>
                {h.mudancas.map((m, i) => (
                  <div key={i} style={{ fontSize: 12.5, color: 'var(--escalab-ink)', marginTop: 2 }}>
                    <strong>{m.campo}:</strong>{' '}
                    <span style={{ textDecoration: 'line-through', color: 'var(--escalab-mute)' }}>{m.antes || '·'}</span>
                    {' → '}
                    <span style={{ color: 'var(--escalab-brand-deep)', fontWeight: 600 }}>{m.depois || '·'}</span>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </Card>
      )}

      {modalSenha && (
        <div onClick={() => setModalSenha(false)} 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:440, boxShadow:'0 24px 60px rgba(0,0,0,.35)' }}>
            <h3 style={{ margin:'0 0 6px', fontSize:18, fontWeight:700 }}>Definir senha</h3>
            <p style={{ fontSize:13, color:'var(--escalab-mute)', margin:'0 0 16px' }}>
              Você vai definir a senha de <strong>{colaborador.nome.split(' ').slice(0,2).join(' ')}</strong> ({colaborador.email}).
              <br />Sem envio de email. Anote e passe pra pessoa pessoalmente.
            </p>
            <label style={{ fontSize:11.5, fontWeight:700, color:'var(--escalab-slate)', display:'block', marginBottom:6, letterSpacing:'.06em', textTransform:'uppercase' }}>Nova senha</label>
            <input type="text" value={senhaAdmin} onChange={e => setSenhaAdmin(e.target.value)}
              placeholder="ao menos 6 caracteres"
              style={{ width:'100%', border:'1px solid var(--escalab-line)', borderRadius:8, padding:'10px 12px', fontSize:14, fontFamily:'var(--font-sans)', outline:'none', boxSizing:'border-box' }} />
            {senhaAdminMsg && (
              <div style={{ marginTop:12, fontSize:13, color: senhaAdminMsg.startsWith('OK') ? '#00614D' : '#B3261E',
                background: senhaAdminMsg.startsWith('OK') ? '#E6F5F1' : '#FDECEC',
                border: '1px solid ' + (senhaAdminMsg.startsWith('OK') ? '#B3D9CB' : '#F4C7C3'),
                padding:'9px 12px', borderRadius:8 }}>{senhaAdminMsg}</div>
            )}
            <div style={{ display:'flex', gap:8, justifyContent:'flex-end', marginTop:18 }}>
              <Button size="sm" variant="outline" onClick={() => setModalSenha(false)}>Cancelar</Button>
              <Button size="sm" variant="primary" onClick={async () => {
                setSenhaAdminMsg(''); setSenhaAdminSalvando(true);
                const r = await adminDefinirSenhaDe(colaborador.email, senhaAdmin);
                setSenhaAdminSalvando(false);
                if (r?.ok) setSenhaAdminMsg('OK · senha definida' + (r.criado ? ' (usuario criado no Auth)' : '') + '. Avise a pessoa.');
                else setSenhaAdminMsg('Falha: ' + (r?.erro || 'desconhecido'));
              }} disabled={senhaAdminSalvando}>{senhaAdminSalvando ? 'Salvando…' : 'Definir senha'}</Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

// ── Aba de Arquivos / Dados de Admissão ────────────────────────────────────────

const AbaArquivos = ({ colaborador, user, isAdmin }) => {
  const [dados, setDados] = useState(() => getDadosAssinatura(colaborador.id));
  const [docStatus, setDocStatus] = useState(() => {
    try { return JSON.parse(localStorage.getItem(`escalab_docs_${colaborador.id}`) || '{}'); } catch { return {}; }
  });
  const [salvando, setSalvando] = useState(false);
  const [salvo, setSalvo] = useState(false);
  // Colab pode editar seus próprios dados pessoais (autocadastro).
  // RH e Financeiro também — eles podem corrigir/preencher pelo colab.
  const ehDono = user?.id === colaborador.id;
  const podeEditarAdmissao = isAdmin || user?.perfil === 'financeiro';
  const podeEditar = podeEditarAdmissao || ehDono;
  const podeUploadDocs = isAdmin || user?.perfil === 'financeiro' || ehDono;

  function set(key, val) { setDados(d => ({ ...d, [key]: val })); }

  function handleSalvar() {
    setSalvando(true);
    const { nomeCompleto, naturalidade, estadoCivil, dataNascimento, cep, logradouro, endNumero, complemento, bairro, cidade, uf, ctpsNumero, ctpsSerie, ctpsEmissao, dataAdmissao, cbo, cargaHoraria, modalidade } = dados;
    const seguros = { nomeCompleto, naturalidade, estadoCivil, dataNascimento, cep, logradouro, endNumero, complemento, bairro, cidade, uf, ctpsNumero, ctpsSerie, ctpsEmissao, dataAdmissao, cbo, cargaHoraria, modalidade };
    salvarDadosAssinatura(colaborador.id, seguros);
    setTimeout(() => { setSalvando(false); setSalvo(true); setTimeout(() => setSalvo(false), 3000); }, 600);
  }

  function handleDocUpload(key, e) {
    const file = e.target.files[0];
    if (!file) return;
    const novo = { ...docStatus, [key]: { nome: file.name, data: new Date().toLocaleDateString('pt-BR') } };
    setDocStatus(novo);
    localStorage.setItem(`escalab_docs_${colaborador.id}`, JSON.stringify(novo));
  }

  const campoSensivel = (label) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', color: 'var(--escalab-mute)', fontSize: 13.5 }}>
      <Icon name="lock" size={14} />
      <span style={{ fontStyle: 'italic' }}>{label ? label : 'Dado protegido · armazenado no servidor'}</span>
    </div>
  );

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      {ehDono && !podeEditarAdmissao && (
        <Banner tone="info">
          <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
            <Icon name="user" size={14} />
            <span><strong>Bem-vindo(a)!</strong> Esta é a sua área de cadastro pessoal. Preencha seus dados de identificação, contato, endereço e formação acadêmica — você pode atualizar quando quiser. Campos com 🔒 são sensíveis e ficam armazenados com segurança.</span>
          </div>
        </Banner>
      )}
      <Banner tone="info">
        <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
          <Icon name="lock" size={14} />
          <span>Campos marcados com <strong>cadeado</strong> são dados sensíveis armazenados com segurança no servidor e não ficam expostos no navegador.</span>
        </div>
      </Banner>

      {SECOES_ASSINATURA.map(secao => (
        <Card key={secao.titulo} pad={22}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
            <Icon name={secao.icon} size={15} />
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>{secao.titulo}</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {secao.campos.map(campo => (
              <div key={campo.key} style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                <label style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--escalab-slate)' }}>
                  {campo.label}
                  {campo.sensivel && <span style={{ color: 'var(--escalab-brand)', marginLeft: 4 }}>🔒</span>}
                </label>
                {campo.sensivel ? (
                  campoSensivel()
                ) : podeEditar ? (
                  campo.tipo === 'select' ? (
                    <select value={dados[campo.key] || ''} onChange={e => set(campo.key, e.target.value)}
                      style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 0, background: '#fff' }}>
                      <option value="">Selecione…</option>
                      {campo.opcoes?.map(o => <option key={o} value={o}>{o}</option>)}
                    </select>
                  ) : (
                    <input type={campo.tipo || 'text'} value={dados[campo.key] || ''} onChange={e => set(campo.key, e.target.value)}
                      placeholder={`· ${campo.label} ·`}
                      style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 0 }} />
                  )
                ) : (
                  <div style={{ fontSize: 13.5, color: dados[campo.key] ? 'var(--escalab-ink)' : 'var(--escalab-mute)', padding: '9px 0', fontStyle: dados[campo.key] ? 'normal' : 'italic' }}>
                    {dados[campo.key] || '· não preenchido ·'}
                  </div>
                )}
              </div>
            ))}
          </div>
        </Card>
      ))}

      {/* Formação · preenchida pelo próprio colaborador */}
      <SecaoFormacao colaborador={colaborador} user={user} isAdmin={isAdmin} />

      {/* Dados de Diversidade */}
      <SecaoDiversidade colaborador={colaborador} user={user} />

      {/* Documentos */}
      <Card pad={22}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18 }}>
          <Icon name="file" size={15} />
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>Documentos Anexados</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {DOCS_ADMISSAO.map(doc => {
            const status = docStatus[doc.key];
            return (
              <div key={doc.key} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: '1px solid var(--escalab-line)' }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: status ? '#00836B' : doc.obrigatorio ? '#E89B3B' : 'var(--escalab-line)', flexShrink: 0 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, color: 'var(--escalab-ink)', fontWeight: 500 }}>{doc.label}</div>
                  {status && <div style={{ fontSize: 12, color: 'var(--escalab-mute)', marginTop: 2 }}>{status.nome} · enviado em {status.data}</div>}
                  {!status && <div style={{ fontSize: 12, color: doc.obrigatorio ? '#E89B3B' : 'var(--escalab-mute)', marginTop: 2 }}>{doc.obrigatorio ? 'Obrigatório · pendente' : 'Opcional · pendente'}</div>}
                </div>
                {podeUploadDocs && (
                  <label style={{ display: 'flex', alignItems: 'center', gap: 6, border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '6px 12px', cursor: 'pointer', fontSize: 12.5, fontFamily: 'var(--font-sans)', color: 'var(--escalab-brand)', background: '#fff', fontWeight: 500 }}>
                    <Icon name="upload" size={13} /> {status ? 'Substituir' : 'Enviar'}
                    <input type="file" accept=".pdf,.jpg,.jpeg,.png" onChange={e => handleDocUpload(doc.key, e)} style={{ display: 'none' }} />
                  </label>
                )}
                {status && (
                  <button style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '6px 12px', cursor: 'pointer', fontSize: 12.5, fontFamily: 'var(--font-sans)', color: 'var(--escalab-slate)', background: '#fff', display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Icon name="download" size={13} /> Ver
                  </button>
                )}
              </div>
            );
          })}
        </div>

        {/* Outros documentos (com nome customizado, GC e colaborador podem subir) */}
        <DocsExtras colaboradorId={colaborador.id} podeUpload={podeUploadDocs} />
      </Card>

      {/* Botão salvar */}
      {podeEditar && (
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <Button variant="primary" onClick={handleSalvar} disabled={salvando}>
            {salvando ? 'Salvando…' : (ehDono && !podeEditarAdmissao ? 'Salvar meus dados' : 'Salvar dados de admissão')}
          </Button>
          {salvo && <span style={{ fontSize: 13, color: '#00836B', display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={14} /> Dados salvos com sucesso</span>}
        </div>
      )}

    </div>
  );
};

// ── Componente: outros documentos com nome customizado ──────────────────────
const DOCS_EXTRAS_KEY = id => `escalab_docs_extras_${id}`;

const DocsExtras = ({ colaboradorId, podeUpload }) => {
  const [lista, setLista] = useState(() => {
    try { return JSON.parse(localStorage.getItem(DOCS_EXTRAS_KEY(colaboradorId)) || '[]'); } catch { return []; }
  });
  const [nomeNovo, setNomeNovo] = useState('');
  const [arquivoNovo, setArquivoNovo] = useState(null);
  const [erro, setErro] = useState('');

  function salvarLista(l) {
    try { localStorage.setItem(DOCS_EXTRAS_KEY(colaboradorId), JSON.stringify(l)); } catch {}
    setLista(l);
  }

  function handleArquivo(e) {
    const f = e.target.files?.[0];
    if (!f) return;
    if (f.size > 3 * 1024 * 1024) { setErro('Arquivo muito grande (máx 3MB)'); return; }
    const r = new FileReader();
    r.onload = ev => { setArquivoNovo({ nome: f.name, data: ev.target.result }); setErro(''); };
    r.readAsDataURL(f);
  }

  function adicionar() {
    setErro('');
    if (!nomeNovo.trim()) { setErro('Dê um nome ao documento.'); return; }
    if (!arquivoNovo) { setErro('Anexe um arquivo.'); return; }
    const novo = {
      id: 'd' + Date.now(),
      titulo: nomeNovo.trim(),
      nomeArquivo: arquivoNovo.nome,
      data: arquivoNovo.data,
      enviadoEm: new Date().toLocaleDateString('pt-BR'),
    };
    salvarLista([novo, ...lista]);
    setNomeNovo(''); setArquivoNovo(null);
  }

  function remover(id) {
    if (!window.confirm('Remover este documento?')) return;
    salvarLista(lista.filter(d => d.id !== id));
  }

  return (
    <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--escalab-line)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <Icon name="plus" size={13} />
        <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>
          Outros documentos
        </div>
      </div>

      {lista.length === 0 && !podeUpload && (
        <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Nenhum documento adicional.</div>
      )}

      {lista.length > 0 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: podeUpload ? 14 : 0 }}>
          {lista.map(d => (
            <div key={d.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '9px 12px', background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 9 }}>
              <Icon name="file" size={14} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--escalab-ink)' }}>{d.titulo}</div>
                <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{d.nomeArquivo} · enviado em {d.enviadoEm}</div>
              </div>
              <a href={d.data} download={d.nomeArquivo} style={{ border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 7, padding: '5px 11px', fontSize: 12, color: 'var(--escalab-slate)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 5 }}>
                <Icon name="download" size={12} /> Baixar
              </a>
              {podeUpload && (
                <button onClick={() => remover(d.id)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 4 }}>
                  <Icon name="close" size={13} />
                </button>
              )}
            </div>
          ))}
        </div>
      )}

      {podeUpload && (
        <div style={{ background: 'var(--escalab-paper)', borderRadius: 10, padding: '12px 14px', border: '1px dashed var(--escalab-line)' }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--escalab-slate)', marginBottom: 8 }}>Adicionar novo documento</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 8, alignItems: 'center' }} className="mobile-col1">
            <input type="text" value={nomeNovo} onChange={e => setNomeNovo(e.target.value)} placeholder="Ex: Comprovante de curso, declaração escolar…"
              style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 11px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 'none', boxSizing: 'border-box' }} />
            <label style={{ display: 'flex', alignItems: 'center', gap: 6, border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 12px', cursor: 'pointer', fontSize: 12.5, color: 'var(--escalab-brand)', background: '#fff', fontWeight: 500 }}>
              <Icon name="upload" size={13} /> {arquivoNovo ? arquivoNovo.nome.slice(0, 20) + '…' : 'Anexar arquivo'}
              <input type="file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" onChange={handleArquivo} style={{ display: 'none' }} />
            </label>
          </div>
          {erro && <div style={{ fontSize: 12, color: '#B3261E', marginTop: 6 }}>{erro}</div>}
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
            <Button size="sm" variant="primary" onClick={adicionar} disabled={!nomeNovo.trim() || !arquivoNovo}>Adicionar</Button>
          </div>
        </div>
      )}
    </div>
  );
};

window.ScreenPerfil = ScreenPerfil;