// ═══════════════════════════════════════════════════════════════
// SCREEN · Recrutamento · Gestão de Processo Seletivo
// ═══════════════════════════════════════════════════════════════

const RECRUTAMENTO_KEY = 'escalab_recrutamento';

const ETAPAS_REC_DEFAULT = [
  { id: 'triagem',           label: 'Triagem de Currículo', color: '#E89B3B', bg: '#FFF7EB' },
  { id: 'entrevista_gc',     label: 'Entrevista GC',        color: '#1F4A8A', bg: '#EEF3FA' }, // (já era GC · antes RH)
  { id: 'entrevista_gestor', label: 'Entrevista Gestor',    color: '#6B3FA0', bg: '#F4EEFF' },
  { id: 'entrevista_ceo',    label: 'Entrevista CEO',       color: '#00836B', bg: '#E6F5F1' },
  { id: 'feedback',          label: 'Feedback',             color: '#7A4A00', bg: '#FFF0DB' },
  { id: 'aprovado',          label: 'Aprovado',             color: '#00967B', bg: '#E6F5F1' },
  { id: 'reprovado',         label: 'Reprovado',            color: '#B3261E', bg: '#FDECEC' },
];

const ETAPAS_REC = ETAPAS_REC_DEFAULT;
const ETAPAS_KANBAN = ETAPAS_REC.filter(e => !['aprovado','reprovado'].includes(e.id));

const CATEGORIAS_AVALIACAO_DEFAULT = [
  { id: 'tecnico',           label: 'Competências Técnicas'     },
  { id: 'comportamental',    label: 'Competências Comportamentais' },
];

const CATEGORIAS_AVAL_KEY = 'escalab_categorias_avaliacao';

function getCategoriasAvaliacao() {
  try {
    const raw = localStorage.getItem(CATEGORIAS_AVAL_KEY);
    if (raw) return JSON.parse(raw);
    return CATEGORIAS_AVALIACAO_DEFAULT;
  } catch { return CATEGORIAS_AVALIACAO_DEFAULT; }
}

function salvarCategoriasAvaliacao(cats) {
  try { localStorage.setItem(CATEGORIAS_AVAL_KEY, JSON.stringify(cats)); } catch {}
}

const PROCESSOS_INICIAIS = [
  {
    id: 'PS001',
    vaga: 'Analista de Marketing',
    departamento: 'Marketing e Leads',
    responsavel: 'Marcus Ferreira Neto',
    status: 'aberto',
    descricao: 'Buscamos analista com experiência em geração de leads e marketing digital para fortalecer a área de Carteira de Leads.',
    criadoEm: '2026-05-01',
    candidatos: [
      { id: 'C001', nome: 'Marcos Souza Lima',     email: 'cand001@candidato.com.br', telefone: '(31) 90002-0001', origem: 'forms.app', fonte: 'LinkedIn', etapa: 'entrevista_rh', nota: 4, avaliacao: 'Bom perfil técnico, comunicação clara.', criadoEm: '2026-05-02T10:30:00' },
      { id: 'C002', nome: 'Carla Mendes Rocha',    email: 'cand002@candidato.com.br', telefone: '(31) 90002-0002', origem: 'forms.app', fonte: 'Indicação', etapa: 'triagem',       nota: null, avaliacao: '', criadoEm: '2026-05-05T14:00:00' },
      { id: 'C003', nome: 'Paulo Henrique Costa',  email: 'cand003@candidato.com.br', telefone: '(31) 90002-0003', origem: 'forms.app', fonte: 'LinkedIn', etapa: 'teste',         nota: 3, avaliacao: 'Precisa melhorar habilidades técnicas.', criadoEm: '2026-05-03T09:15:00' },
      { id: 'C004', nome: 'Renata Alves Borges',   email: 'cand004@candidato.com.br', telefone: '(21) 90002-0004', origem: 'forms.app', fonte: 'Banco interno', etapa: 'triagem',       nota: null, avaliacao: '', criadoEm: '2026-05-10T16:45:00' },
    ],
  },
  {
    id: 'PS002',
    vaga: 'Associado de Projetos',
    departamento: 'Associados de Projetos',
    responsavel: 'Paula Cardoso Ferreira',
    status: 'aberto',
    descricao: 'Vaga para associado com experiência em gestão de projetos e editais. Perfil analítico e proativo.',
    criadoEm: '2026-05-08',
    candidatos: [
      { id: 'C005', nome: 'Luana Ferreira Matos',  email: 'cand005@candidato.com.br', telefone: '(11) 90002-0005', origem: 'forms.app', fonte: 'Indicação', etapa: 'entrevista_rh', nota: 5, avaliacao: 'Excelente candidata, muito alinhada com a cultura.', criadoEm: '2026-05-09T09:00:00' },
      { id: 'C006', nome: 'Thiago Alves Neto',     email: 'cand006@candidato.com.br', telefone: '(21) 90002-0006', origem: 'forms.app', fonte: 'LinkedIn', etapa: 'proposta',      nota: 4, avaliacao: 'Perfil técnico sólido, boa experiência anterior.', criadoEm: '2026-05-09T11:00:00' },
    ],
  },
  {
    id: 'PS003',
    vaga: 'Analista de P&D',
    departamento: 'P&D e Escalonamento',
    responsavel: 'Thiago Ribeiro Gomes',
    status: 'fechado',
    descricao: 'Processo encerrado. Candidata aprovada e integrada ao time de P&D.',
    criadoEm: '2026-04-01',
    candidatos: [
      { id: 'C007', nome: 'Renata Oliveira Pinto', email: 'cand007@candidato.com.br', telefone: '(31) 90002-0007', origem: 'forms.app', fonte: 'LinkedIn', etapa: 'aprovado',  nota: 5, avaliacao: 'Candidata excepcional, aprovada por unanimidade.', criadoEm: '2026-04-05T10:00:00' },
      { id: 'C008', nome: 'Carlos Eduardo Meira',  email: 'cand008@candidato.com.br', telefone: '(31) 90002-0008', origem: 'forms.app', fonte: 'Banco interno', etapa: 'reprovado', nota: 2, avaliacao: 'Perfil não alinhado com requisitos técnicos.', criadoEm: '2026-04-05T10:30:00' },
    ],
  },
];

function getProcessos() {
  try {
    const raw = localStorage.getItem(RECRUTAMENTO_KEY);
    if (raw) return JSON.parse(raw);
    localStorage.setItem(RECRUTAMENTO_KEY, JSON.stringify(PROCESSOS_INICIAIS));
    return PROCESSOS_INICIAIS;
  } catch { return PROCESSOS_INICIAIS; }
}

function salvarProcessos(lista) {
  try { localStorage.setItem(RECRUTAMENTO_KEY, JSON.stringify(lista)); } catch {}
}

function salvarProcesso(proc) {
  const lista = getProcessos().filter(p => p.id !== proc.id);
  lista.unshift(proc);
  salvarProcessos(lista);
}

function atualizarCandidatoRec(processoId, candidatoId, updates) {
  const lista = getProcessos().map(p => {
    if (p.id !== processoId) return p;
    return { ...p, candidatos: p.candidatos.map(c => {
      if (c.id !== candidatoId) return c;
      const atualizado = { ...c, ...updates };
      // Registra cada etapa pela qual o candidato passou (histórico cumulativo do funil)
      if (updates.etapa && updates.etapa !== c.etapa) {
        const passadas = new Set(c.etapasVisitadas || []);
        if (c.etapa) passadas.add(c.etapa);
        passadas.add(updates.etapa);
        atualizado.etapasVisitadas = Array.from(passadas);
      }
      return atualizado;
    }) };
  });
  salvarProcessos(lista);
}

// Backfill linear pra candidatos pré-existentes sem histórico explícito:
// quem está em etapa N do kanban presumivelmente passou por 0..N (e por triagem sempre).
function etapasJaVisitadas(candidato) {
  if (candidato.etapasVisitadas?.length) return new Set(candidato.etapasVisitadas);
  const ordem = ETAPAS_REC.map(e => e.id);
  const idxAtual = ordem.indexOf(candidato.etapa);
  const conj = new Set();
  if (candidato.etapa === 'reprovado') {
    // Reprovados: sem histórico explícito, conta-se apenas a etapa final
    conj.add('reprovado');
    conj.add('triagem');
    return conj;
  }
  if (idxAtual === -1) return conj;
  for (let i = 0; i <= idxAtual; i++) {
    const id = ordem[i];
    if (id === 'reprovado') continue;
    conj.add(id);
  }
  return conj;
}

function adicionarCandidatoRec(processoId, candidato) {
  const lista = getProcessos().map(p => {
    if (p.id !== processoId) return p;
    return { ...p, candidatos: [...p.candidatos, candidato] };
  });
  salvarProcessos(lista);
}

function gerarIdRec(prefix) {
  return prefix + Date.now().toString(36).toUpperCase();
}

// ── Componente estrelas ────────────────────────────────────────────────────

const Estrelas = ({ valor, onChange, size = 16 }) => (
  <div style={{ display: 'flex', gap: 3 }}>
    {[1, 2, 3, 4, 5].map(n => (
      <button key={n} onClick={() => onChange && onChange(n)}
        style={{ border: 0, background: 'transparent', cursor: onChange ? 'pointer' : 'default', padding: 2, color: n <= (valor || 0) ? '#F5A623' : 'var(--escalab-line)' }}>
        <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
        </svg>
      </button>
    ))}
  </div>
);

// ── Modal novo processo ────────────────────────────────────────────────────

const ModalNovoProcesso = ({ onClose, onSalvar }) => {
  const [form, setForm] = useState({ vaga: '', departamento: '', responsaveis: [], descricao: '' });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const addResponsavel = (nome) => {
    if (!nome) return;
    setForm(f => f.responsaveis.includes(nome) ? f : { ...f, responsaveis: [...f.responsaveis, nome] });
  };
  const removeResponsavel = (nome) => setForm(f => ({ ...f, responsaveis: f.responsaveis.filter(n => n !== nome) }));

  function handleSalvar() {
    if (!form.vaga || !form.departamento) return;
    onSalvar({
      id: gerarIdRec('PS'),
      ...form,
      // Compat: mantém campo `responsavel` (string) para gráficos/permissões legacy
      responsavel: form.responsaveis[0] || '',
      responsaveis: form.responsaveis,
      status: 'aberto',
      criadoEm: new Date().toISOString().slice(0, 10),
      candidatos: [],
    });
    onClose();
  }

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(10,15,18,.55)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, width: '100%', maxWidth: 500, animation: 'popIn .22s var(--ease-out)', maxHeight: '90vh', overflow: 'auto' }}>
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'sticky', top: 0, background: '#fff', zIndex: 1 }}>
          <div>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700 }}>Novo Processo Seletivo</h3>
            <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginTop: 2 }}>Crie uma pasta para gerenciar os candidatos</div>
          </div>
          <button onClick={onClose} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)' }}><Icon name="close" size={18} /></button>
        </div>
        <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Field label="Vaga / Cargo">
            <Input value={form.vaga} onChange={v => set('vaga', v)} placeholder="Ex: Analista de Marketing" />
          </Field>
          <Field label="Departamento">
            <select value={form.departamento} onChange={e => set('departamento', e.target.value)}
              style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, background: '#fff' }}>
              <option value="">Selecione…</option>
              {SETORES.map(s => <option key={s}>{s}</option>)}
            </select>
          </Field>
          <Field label="Responsáveis pelo processo">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {form.responsaveis.length > 0 && (
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {form.responsaveis.map(nome => (
                    <span key={nome} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'var(--escalab-brand-tint)', color: 'var(--escalab-brand-deep)', borderRadius: 999, padding: '4px 10px', fontSize: 12.5, fontWeight: 600 }}>
                      {nome}
                      <button onClick={() => removeResponsavel(nome)} title="Remover" style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-brand-deep)', padding: 0, display: 'flex' }}><Icon name="close" size={12} /></button>
                    </span>
                  ))}
                </div>
              )}
              <select value="" onChange={e => { addResponsavel(e.target.value); e.target.value = ''; }}
                style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, background: '#fff' }}>
                <option value="">{form.responsaveis.length === 0 ? 'Selecione o primeiro responsável…' : '+ adicionar outro responsável…'}</option>
                {COLABORADORES.filter(c => c.nivel !== 'liderado' && !form.responsaveis.includes(c.nome)).map(c => <option key={c.id}>{c.nome}</option>)}
              </select>
              <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>Você pode marcar mais de um responsável · todos verão o processo na aba de Recrutamento.</div>
            </div>
          </Field>
          <Field label="Descrição da vaga (opcional)">
            <textarea value={form.descricao} onChange={e => set('descricao', e.target.value)} rows={3}
              placeholder="Descreva o perfil buscado e principais responsabilidades…"
              style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
          </Field>
          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', paddingTop: 4 }}>
            <Button variant="outline" onClick={onClose}>Cancelar</Button>
            <Button variant="primary" onClick={handleSalvar} disabled={!form.vaga || !form.departamento}>Criar processo</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Modal adicionar candidato ──────────────────────────────────────────────

const FONTES_RECRUT = ['LinkedIn', 'Indicação', 'Banco interno', 'Instagram', 'Site Escalab', 'Google', 'Evento / feira', 'Outros'];

const ModalAddCandidato = ({ processoId, onClose, onSalvar }) => {
  const [form, setForm] = useState({ nome: '', email: '', telefone: '', observacao: '', fonte: 'LinkedIn' });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  function handleSalvar() {
    if (!form.nome || !form.email) return;
    onSalvar(processoId, {
      id: gerarIdRec('C'),
      ...form,
      origem: 'manual',
      etapa: 'triagem',
      nota: null,
      avaliacao: '',
      criadoEm: new Date().toISOString(),
    });
    onClose();
  }

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(10,15,18,.55)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, width: '100%', maxWidth: 440, animation: 'popIn .22s var(--ease-out)' }}>
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700 }}>Adicionar Candidato</h3>
          <button onClick={onClose} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)' }}><Icon name="close" size={18} /></button>
        </div>
        <div style={{ padding: '20px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Field label="Nome completo">
            <Input value={form.nome} onChange={v => set('nome', v)} placeholder="Nome do candidato" />
          </Field>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Field label="E-mail">
              <Input value={form.email} onChange={v => set('email', v)} placeholder="email@exemplo.com" />
            </Field>
            <Field label="Telefone">
              <Input value={form.telefone} onChange={v => set('telefone', v)} placeholder="(00) 00000-0000" />
            </Field>
          </div>
          <Field label="Fonte / como ficou sabendo da vaga" hint="Alimenta o gráfico de Fontes de Contratação no Painel.">
            <SelectInput value={form.fonte} onChange={v => set('fonte', v)} options={FONTES_RECRUT.map(f => ({ value: f, label: f }))} />
          </Field>
          <Field label="Observação inicial (opcional)">
            <textarea value={form.observacao} onChange={e => set('observacao', e.target.value)} rows={2}
              placeholder="Notas adicionais sobre o candidato…"
              style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box' }} />
          </Field>
          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
            <Button variant="outline" onClick={onClose}>Cancelar</Button>
            <Button variant="primary" onClick={handleSalvar} disabled={!form.nome || !form.email}>Adicionar</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Modal detalhe do candidato ─────────────────────────────────────────────

const ModalCandidato = ({ candidato, processo, user, onClose, onAtualizar }) => {
  const isAdmin = user?.perfil === 'admin';
  const isGestor = user?.perfil === 'gestor';
  const [etapa, setEtapa] = useState(candidato.etapa);
  // Notas separadas: gestor e RH. Legado 'notas' migra para notasGestor (gestor era quem avaliava antes)
  const [notasGestor, setNotasGestor] = useState(() => candidato.notasGestor || candidato.notas || {});
  const [notasRH, setNotasRH] = useState(() => candidato.notasRH || {});
  // Legado: candidato.avaliacao -> migra para comentariosGestor na primeira leitura
  const [comentariosGestor, setComentariosGestor] = useState(candidato.comentariosGestor || candidato.avaliacao || '');
  const [comentariosRH, setComentariosRH] = useState(candidato.comentariosRH || '');
  // Relatórios separados: RH e Gestor. Cada um pode ser texto OU arquivo (base64).
  // Legado: candidato.relatorioEntrevista (texto único) migra para relatorioGestor na 1ª leitura.
  const [relatorioRH, setRelatorioRH] = useState(candidato.relatorioRH || '');
  const [relatorioRHFile, setRelatorioRHFile] = useState(candidato.relatorioRHFile || null);
  const [relatorioGestor, setRelatorioGestor] = useState(candidato.relatorioGestor || candidato.relatorioEntrevista || '');
  const [relatorioGestorFile, setRelatorioGestorFile] = useState(candidato.relatorioGestorFile || null);
  const [modoRelRH, setModoRelRH] = useState(candidato.relatorioRHFile ? 'arquivo' : 'texto');
  const [modoRelGestor, setModoRelGestor] = useState(candidato.relatorioGestorFile ? 'arquivo' : 'texto');
  const [erroUpload, setErroUpload] = useState('');
  const [salvando, setSalvando] = useState(false);
  const [abaPainel, setAbaPainel] = useState('avaliacao');
  // Categorias: RH gerencia (escopo global). Cada categoria pode marcar quem deve avaliar.
  const [categoriasLocais, setCategoriasLocais] = useState(() => getCategoriasAvaliacao());
  const [novaCategoria, setNovaCategoria] = useState('');
  const [novaCategoriaQuem, setNovaCategoriaQuem] = useState('ambos'); // 'gestor', 'rh', 'ambos'
  const etapaInfo = ETAPAS_REC.find(e => e.id === etapa);

  function mediaSet(notas, cats) {
    const ativas = cats.filter(c => notas[c.id]);
    if (!ativas.length) return 0;
    return ativas.reduce((s, c) => s + Number(notas[c.id] || 0), 0) / ativas.length;
  }
  const catsGestor = categoriasLocais.filter(c => !c.avaliadores || c.avaliadores === 'ambos' || c.avaliadores === 'gestor');
  const catsRH     = categoriasLocais.filter(c => !c.avaliadores || c.avaliadores === 'ambos' || c.avaliadores === 'rh');
  const notaMediaGestor = mediaSet(notasGestor, catsGestor);
  const notaMediaRH     = mediaSet(notasRH, catsRH);
  // Nota geral combina as duas (média das duas médias, ignorando vazias)
  const mediasValidas = [notaMediaGestor, notaMediaRH].filter(n => n > 0);
  const notaMedia = mediasValidas.length ? mediasValidas.reduce((a, b) => a + b, 0) / mediasValidas.length : 0;

  function handleSalvar() {
    setSalvando(true);
    const notaGeral = notaMedia ? parseFloat(notaMedia.toFixed(1)) : null;
    const avaliacaoLegado = [
      comentariosGestor && `[Gestor] ${comentariosGestor}`,
      comentariosRH && `[GC] ${comentariosRH}`,
    ].filter(Boolean).join('\n\n');
    // Legado: mantém relatorioEntrevista como concatenação para compat com qualquer leitor antigo
    const relatorioLegado = [
      relatorioRH && `[GC] ${relatorioRH}`,
      relatorioGestor && `[Gestor] ${relatorioGestor}`,
    ].filter(Boolean).join('\n\n');
    onAtualizar(processo.id, candidato.id, {
      etapa,
      notasGestor, notasRH,
      notas: notasGestor, // compat com card kanban antigo
      nota: notaGeral,
      notaGestor: notaMediaGestor ? parseFloat(notaMediaGestor.toFixed(1)) : null,
      notaRH:     notaMediaRH ? parseFloat(notaMediaRH.toFixed(1)) : null,
      avaliacao: avaliacaoLegado,
      comentariosGestor, comentariosRH,
      relatorioRH, relatorioRHFile,
      relatorioGestor, relatorioGestorFile,
      relatorioEntrevista: relatorioLegado, // compat retroativa
    });
    setTimeout(() => { setSalvando(false); onClose(); }, 300);
  }

  function adicionarCategoria() {
    if (!novaCategoria.trim()) return;
    const id = 'cat_' + Date.now();
    const updated = [...categoriasLocais, { id, label: novaCategoria.trim(), avaliadores: novaCategoriaQuem }];
    setCategoriasLocais(updated);
    salvarCategoriasAvaliacao(updated);
    setNovaCategoria('');
    setNovaCategoriaQuem('ambos');
  }

  function removerCategoria(id) {
    const updated = categoriasLocais.filter(c => c.id !== id);
    setCategoriasLocais(updated);
    salvarCategoriasAvaliacao(updated);
  }

  function alterarAvaliadores(id, avaliadores) {
    const updated = categoriasLocais.map(c => c.id === id ? { ...c, avaliadores } : c);
    setCategoriasLocais(updated);
    salvarCategoriasAvaliacao(updated);
  }

  const dataStr = isoStr => {
    if (!isoStr) return '·';
    const [y, m, d] = isoStr.slice(0, 10).split('-');
    return `${d}/${m}/${y}`;
  };

  const iniciais = candidato.nome.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase();

  const abasTabs = [
    { id: 'avaliacao', label: 'Avaliação' },
    { id: 'entrevista', label: 'Relatório Entrevista' },
    { id: 'categorias', label: 'Categorias' },
  ];

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(10,15,18,.55)', backdropFilter: 'blur(4px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, width: '100%', maxWidth: 540, animation: 'popIn .22s var(--ease-out)', maxHeight: '92vh', overflow: 'auto' }}>
        {/* Header */}
        <div style={{ background: `linear-gradient(135deg, ${etapaInfo?.color || 'var(--escalab-brand)'}, ${etapaInfo?.color || 'var(--escalab-brand)'}bb)`, padding: '20px 24px', position: 'relative' }}>
          <button onClick={onClose} style={{ position: 'absolute', top: 14, right: 14, border: 0, background: 'rgba(255,255,255,.2)', borderRadius: 8, cursor: 'pointer', padding: '4px 8px', color: '#fff' }}>
            <Icon name="close" size={16} />
          </button>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <div style={{ width: 54, height: 54, borderRadius: '50%', background: 'rgba(255,255,255,.25)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 18, border: '3px solid rgba(255,255,255,.4)', flexShrink: 0 }}>
              {iniciais}
            </div>
            <div>
              <h3 style={{ color: '#fff', fontSize: 17, fontWeight: 700, margin: '0 0 2px' }}>{candidato.nome}</h3>
              <div style={{ color: 'rgba(255,255,255,.8)', fontSize: 12.5 }}>{candidato.email}</div>
            </div>
          </div>
        </div>

        <div style={{ padding: '16px 24px 24px' }}>
          {/* Info rápida */}
          <div style={{ background: 'var(--escalab-paper)', borderRadius: 10, padding: '14px 16px', marginBottom: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 20px' }}>
            {[
              { label: 'Telefone',     val: candidato.telefone || '·' },
              { label: 'Origem',       val: candidato.origem || '·'   },
              { label: 'Candidatou',   val: dataStr(candidato.criadoEm) },
              { label: 'Vaga',         val: processo.vaga             },
              { label: 'Como soube',   val: candidato.comoSoube || '·' },
              { label: 'Pretensão',    val: candidato.pretensao || '·' },
            ].map(r => (
              <div key={r.label}>
                <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 3 }}>{r.label}</div>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--escalab-ink)' }}>{r.val}</div>
              </div>
            ))}
          </div>
          {candidato.linkedin && (
            <div style={{ marginBottom: 12 }}>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 4 }}>LinkedIn</div>
              <a href={candidato.linkedin.startsWith('http') ? candidato.linkedin : 'https://' + candidato.linkedin} target="_blank" rel="noopener noreferrer" style={{ fontSize: 13, color: 'var(--escalab-brand)', wordBreak: 'break-all' }}>{candidato.linkedin}</a>
            </div>
          )}
          {candidato.motivacao && (
            <div style={{ marginBottom: 12 }}>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 4 }}>Motivação</div>
              <div style={{ fontSize: 13, color: 'var(--escalab-slate)', lineHeight: 1.6, background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '10px 12px' }}>{candidato.motivacao}</div>
            </div>
          )}
          {candidato.competencias && (
            <div style={{ marginBottom: 12 }}>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)', marginBottom: 4 }}>Competências</div>
              <div style={{ fontSize: 13, color: 'var(--escalab-slate)', lineHeight: 1.6, background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '10px 12px' }}>{candidato.competencias}</div>
            </div>
          )}

          {/* Etapa */}
          <Field label="Etapa atual">
            <select value={etapa} onChange={e => setEtapa(e.target.value)}
              style={{ width: '100%', border: `1.5px solid ${etapaInfo?.color || 'var(--escalab-line)'}`, borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, background: etapaInfo?.bg || '#fff', color: etapaInfo?.color, fontWeight: 600 }}>
              {ETAPAS_REC.map(e => <option key={e.id} value={e.id}>{e.label}</option>)}
            </select>
          </Field>

          {/* E-mail de reprovação (template editável) */}
          {etapa === 'reprovado' && candidato.email && (
            <div style={{ background: '#FDECEC', border: '1px solid #F4C7C3', borderRadius: 10, padding: '12px 14px', marginTop: 4 }}>
              <div style={{ fontSize: 12.5, color: '#B3261E', fontWeight: 600, marginBottom: 8 }}>Candidato marcado como reprovado</div>
              <a href={mailtoTpl(getRecEmails().reprovado, { nome: candidato.nome.split(' ')[0], vaga: processo.vaga, etapa: etapaInfo?.label, email: candidato.email })}
                style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 14px', border: '1px solid #F4C7C3', borderRadius: 8, background: '#fff', color: '#B3261E', fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-sans)', textDecoration: 'none', width: 'fit-content' }}>
                <Icon name="send" size={13}/> Enviar e-mail de reprovação
              </a>
            </div>
          )}
          {/* E-mail de aprovação / avanço de etapa (template editável) */}
          {etapa !== 'reprovado' && candidato.email && (
            <div style={{ background: '#E6F5F1', border: '1px solid #A3D9CE', borderRadius: 10, padding: '12px 14px', marginTop: 8 }}>
              <div style={{ fontSize: 12.5, color: '#00836B', fontWeight: 600, marginBottom: 8 }}>Comunicar aprovação na etapa "{etapaInfo?.label}"</div>
              <a href={mailtoTpl(getRecEmails().aprovado, { nome: candidato.nome.split(' ')[0], vaga: processo.vaga, etapa: etapaInfo?.label, email: candidato.email })}
                style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '7px 14px', border: '1px solid #A3D9CE', borderRadius: 8, background: '#fff', color: '#00836B', fontSize: 13, fontWeight: 600, fontFamily: 'var(--font-sans)', textDecoration: 'none', width: 'fit-content' }}>
                <Icon name="send" size={13}/> Enviar e-mail de aprovação
              </a>
            </div>
          )}

          {/* Abas internas */}
          <div style={{ display: 'flex', gap: 4, marginTop: 16, marginBottom: 14, borderBottom: '1px solid var(--escalab-line)', paddingBottom: 0 }}>
            {abasTabs.map(t => (
              <button key={t.id} onClick={() => setAbaPainel(t.id)} style={{
                border: 0, background: 'transparent', cursor: 'pointer', padding: '7px 12px', fontSize: 13,
                fontFamily: 'var(--font-sans)', fontWeight: abaPainel === t.id ? 600 : 400,
                color: abaPainel === t.id ? 'var(--escalab-brand)' : 'var(--escalab-mute)',
                borderBottom: `2px solid ${abaPainel === t.id ? 'var(--escalab-brand)' : 'transparent'}`,
                marginBottom: -1,
              }}>{t.label}</button>
            ))}
          </div>

          {/* Aba Avaliação */}
          {abaPainel === 'avaliacao' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{ fontSize: 12, color: 'var(--escalab-mute)', background: 'var(--escalab-paper)', borderLeft: '3px solid var(--escalab-brand)', borderRadius: 6, padding: '9px 12px', lineHeight: 1.5 }}>
                Gestor e GC avaliam separadamente. O <strong>GC define</strong> quais categorias o Gestor deve avaliar (aba <strong>Categorias</strong>).
              </div>

              {/* Bloco Gestor */}
              {catsGestor.length > 0 && (
                <div style={{ borderLeft: '4px solid #1F4A8A', paddingLeft: 14 }}>
                  <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: '.08em', textTransform: 'uppercase', color: '#1F4A8A', marginBottom: 10 }}>
                    Avaliação do Gestor {!isAdmin && isGestor ? '(você)' : ''}
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {catsGestor.map(cat => (
                      <div key={cat.id} style={{ background: '#EEF3FA', borderRadius: 9, padding: '11px 14px' }}>
                        <div style={{ fontSize: 12.5, fontWeight: 600, color: '#143966', marginBottom: 8 }}>{cat.label}</div>
                        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                          <Estrelas valor={notasGestor[cat.id]} onChange={v => setNotasGestor(n => ({ ...n, [cat.id]: v }))} size={20} />
                          {notasGestor[cat.id] && <span style={{ fontSize: 12.5, color: '#1F4A8A', minWidth: 28, fontWeight: 600 }}>{notasGestor[cat.id]}/5</span>}
                          {notasGestor[cat.id] && <button onClick={() => setNotasGestor(n => { const copy = {...n}; delete copy[cat.id]; return copy; })} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)', fontSize: 11 }}>limpar</button>}
                        </div>
                      </div>
                    ))}
                    {notaMediaGestor > 0 && (
                      <div style={{ background: '#1F4A8A', borderRadius: 9, padding: '10px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span style={{ fontSize: 12.5, fontWeight: 600, color: '#fff' }}>Média do Gestor</span>
                        <span style={{ fontSize: 17, fontWeight: 800, color: '#fff' }}>{notaMediaGestor.toFixed(1)}/5</span>
                      </div>
                    )}
                  </div>
                </div>
              )}

              {/* Bloco RH */}
              {catsRH.length > 0 && (
                <div style={{ borderLeft: '4px solid #00836B', paddingLeft: 14 }}>
                  <div style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: '.08em', textTransform: 'uppercase', color: '#00836B', marginBottom: 10 }}>
                    Avaliação do GC {isAdmin ? '(você)' : ''}
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {catsRH.map(cat => (
                      <div key={cat.id} style={{ background: '#E6F5F1', borderRadius: 9, padding: '11px 14px' }}>
                        <div style={{ fontSize: 12.5, fontWeight: 600, color: '#005C4A', marginBottom: 8 }}>{cat.label}</div>
                        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                          <Estrelas valor={notasRH[cat.id]} onChange={v => setNotasRH(n => ({ ...n, [cat.id]: v }))} size={20} />
                          {notasRH[cat.id] && <span style={{ fontSize: 12.5, color: '#00836B', minWidth: 28, fontWeight: 600 }}>{notasRH[cat.id]}/5</span>}
                          {notasRH[cat.id] && <button onClick={() => setNotasRH(n => { const copy = {...n}; delete copy[cat.id]; return copy; })} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)', fontSize: 11 }}>limpar</button>}
                        </div>
                      </div>
                    ))}
                    {notaMediaRH > 0 && (
                      <div style={{ background: '#00836B', borderRadius: 9, padding: '10px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span style={{ fontSize: 12.5, fontWeight: 600, color: '#fff' }}>Média do GC</span>
                        <span style={{ fontSize: 17, fontWeight: 800, color: '#fff' }}>{notaMediaRH.toFixed(1)}/5</span>
                      </div>
                    )}
                  </div>
                </div>
              )}

              {notaMedia > 0 && (
                <div style={{ background: 'var(--escalab-brand-tint)', border: '1px solid var(--escalab-brand-soft)', borderRadius: 9, padding: '12px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--escalab-brand-deep)' }}>Nota geral combinada</span>
                    <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 1 }}>Média entre Gestor e GC</div>
                  </div>
                  <span style={{ fontSize: 22, fontWeight: 900, color: 'var(--escalab-brand)' }}>{notaMedia.toFixed(1)}/5</span>
                </div>
              )}

              <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 12 }}>
                <Field label="Comentários do Gestor" hint="Visão técnica e de fit para o time">
                  <textarea value={comentariosGestor} onChange={e => setComentariosGestor(e.target.value)} rows={3}
                    placeholder="Pontos fortes técnicos, encaixe no time, lacunas…"
                    style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box', borderLeft: '3px solid #1F4A8A' }} />
                </Field>
                <Field label="Comentários do GC" hint="Visão de cultura, soft skills, alinhamento institucional · pode divergir do gestor">
                  <textarea value={comentariosRH} onChange={e => setComentariosRH(e.target.value)} rows={3}
                    placeholder="Alinhamento cultural, valores, riscos comportamentais, observações da conversa…"
                    style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box', borderLeft: '3px solid #00836B' }} />
                </Field>
              </div>
            </div>
          )}

          {/* Aba Relatório de Entrevista · RH e Gestor separados, cada um Texto ou Arquivo */}
          {abaPainel === 'entrevista' && (() => {
            const podeEditarRH     = isAdmin;                          // só RH edita o relatório do RH
            const podeEditarGestor = isAdmin || isGestor;              // RH e Gestor editam o do gestor
            async function handleUpload(quem, file) {
              setErroUpload('');
              if (!file) return;
              try {
                const data = await lerArquivoBase64(file);
                if (quem === 'rh') setRelatorioRHFile(data);
                else setRelatorioGestorFile(data);
              } catch (err) {
                setErroUpload(err.message || 'Falha no upload');
              }
            }
            const SecaoRelatorio = ({ titulo, cor, bg, podeEditar, modo, setModo, texto, setTexto, file, setFile, quem }) => (
              <div style={{ border: '1px solid var(--escalab-line)', borderLeft: `3px solid ${cor}`, borderRadius: 10, overflow: 'hidden', background: '#fff' }}>
                <div style={{ background: bg, padding: '10px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 700, color: cor, letterSpacing: '.02em' }}>{titulo}</div>
                  {podeEditar && (
                    <div style={{ display: 'inline-flex', background: '#fff', border: `1px solid ${cor}33`, borderRadius: 6, padding: 2 }}>
                      {[{ id: 'texto', label: 'Texto' }, { id: 'arquivo', label: 'Arquivo' }].map(opt => {
                        const ativo = modo === opt.id;
                        return (
                          <button key={opt.id} onClick={() => setModo(opt.id)} style={{
                            border: 0, background: ativo ? cor : 'transparent', color: ativo ? '#fff' : cor,
                            borderRadius: 4, padding: '3px 10px', fontSize: 11.5, fontWeight: 600,
                            fontFamily: 'var(--font-sans)', cursor: 'pointer',
                          }}>{opt.label}</button>
                        );
                      })}
                    </div>
                  )}
                </div>
                <div style={{ padding: 14 }}>
                  {modo === 'texto' && (
                    podeEditar ? (
                      <textarea value={texto} onChange={e => setTexto(e.target.value)} rows={7}
                        placeholder={`Relatório ${quem === 'rh' ? 'do GC' : 'do Gestor'} · observações, respostas, pontos relevantes…`}
                        style={{ width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0, resize: 'vertical', boxSizing: 'border-box', lineHeight: 1.6 }} />
                    ) : (
                      <div style={{ fontSize: 13.5, color: 'var(--escalab-ink)', whiteSpace: 'pre-wrap', lineHeight: 1.6, minHeight: 40 }}>
                        {texto || <span style={{ color: 'var(--escalab-mute)', fontStyle: 'italic' }}>Sem relatório registrado.</span>}
                      </div>
                    )
                  )}
                  {modo === 'arquivo' && (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                      {file ? (
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', background: 'var(--escalab-paper)', border: '1px solid var(--escalab-line)', borderRadius: 8 }}>
                          <div style={{ width: 36, height: 36, borderRadius: 8, background: bg, color: cor, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                            <Icon name="clipboard" size={16} />
                          </div>
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--escalab-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.nome}</div>
                            <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{formatarTamanho(file.tamanho)} · {file.tipo || 'arquivo'}</div>
                          </div>
                          <a href={file.dataUrl} download={file.nome} style={{ fontSize: 12, color: cor, fontWeight: 600, textDecoration: 'none', padding: '6px 10px', border: `1px solid ${cor}`, borderRadius: 6 }}>Baixar</a>
                          {podeEditar && (
                            <button onClick={() => setFile(null)} title="Remover" style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 6 }}>
                              <Icon name="close" size={14} />
                            </button>
                          )}
                        </div>
                      ) : (
                        podeEditar ? (
                          <label style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '20px 16px', background: 'var(--escalab-paper)', border: `1.5px dashed ${cor}66`, borderRadius: 10, cursor: 'pointer', textAlign: 'center' }}>
                            <div style={{ color: cor }}><Icon name="upload" size={18} /></div>
                            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--escalab-ink)' }}>Clique para selecionar um arquivo</div>
                            <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>PDF, DOC, DOCX, PNG ou JPG · até 5MB</div>
                            <input type="file" accept=".pdf,.doc,.docx,.png,.jpg,.jpeg" onChange={e => { handleUpload(quem, e.target.files?.[0]); e.target.value = ''; }} style={{ display: 'none' }} />
                          </label>
                        ) : (
                          <div style={{ fontSize: 13, color: 'var(--escalab-mute)', fontStyle: 'italic', padding: '14px 0' }}>Nenhum arquivo enviado.</div>
                        )
                      )}
                    </div>
                  )}
                </div>
              </div>
            );
            return (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ fontSize: 13, color: 'var(--escalab-mute)', lineHeight: 1.5 }}>
                  Registre o relatório da entrevista separado por <strong style={{ color: '#00836B' }}>GC</strong> e <strong style={{ color: '#1F4A8A' }}>Gestor</strong>. Cada um pode digitar o relatório ou anexar um arquivo (PDF/DOC/imagem, até 5MB).
                </div>
                {erroUpload && <Banner tone="warn">{erroUpload}</Banner>}
                <SecaoRelatorio titulo="Relatório do GC" cor="#00836B" bg="#E6F5F1"
                  podeEditar={podeEditarRH} modo={modoRelRH} setModo={setModoRelRH}
                  texto={relatorioRH} setTexto={setRelatorioRH}
                  file={relatorioRHFile} setFile={setRelatorioRHFile} quem="rh" />
                <SecaoRelatorio titulo="Relatório do Gestor" cor="#1F4A8A" bg="#EEF3FA"
                  podeEditar={podeEditarGestor} modo={modoRelGestor} setModo={setModoRelGestor}
                  texto={relatorioGestor} setTexto={setRelatorioGestor}
                  file={relatorioGestorFile} setFile={setRelatorioGestorFile} quem="gestor" />
              </div>
            );
          })()}

          {/* Aba Categorias de Avaliação */}
          {abaPainel === 'categorias' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', background: 'var(--escalab-paper)', borderLeft: '3px solid var(--escalab-brand)', borderRadius: 6, padding: '10px 12px', lineHeight: 1.55 }}>
                <strong>GC define as categorias e quem deve avaliar cada uma.</strong> Cada categoria pode ser avaliada pelo Gestor, pelo GC, ou por ambos. As alterações se aplicam a todos os processos.
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {categoriasLocais.map((cat, i) => {
                  const av = cat.avaliadores || 'ambos';
                  return (
                    <div key={cat.id} style={{ display: 'flex', gap: 10, alignItems: 'center', background: 'var(--escalab-paper)', borderRadius: 8, padding: '10px 12px', flexWrap: 'wrap' }}>
                      <span style={{ flex: '1 1 180px', fontSize: 13.5, color: 'var(--escalab-ink)', fontWeight: 500, minWidth: 0 }}>{cat.label}</span>
                      {isAdmin ? (
                        <div style={{ display: 'flex', gap: 4 }}>
                          {[
                            { id: 'gestor', label: 'Gestor', cor: '#1F4A8A', bg: '#EEF3FA' },
                            { id: 'rh',     label: 'GC',     cor: '#00836B', bg: '#E6F5F1' },
                            { id: 'ambos',  label: 'Ambos',  cor: 'var(--escalab-brand-deep)', bg: 'var(--escalab-brand-tint)' },
                          ].map(opt => {
                            const ativo = av === opt.id;
                            return (
                              <button key={opt.id} onClick={() => alterarAvaliadores(cat.id, opt.id)} style={{
                                border: `1.5px solid ${ativo ? opt.cor : 'var(--escalab-line)'}`,
                                background: ativo ? opt.bg : '#fff',
                                color: ativo ? opt.cor : 'var(--escalab-mute)',
                                borderRadius: 6,
                                padding: '4px 11px',
                                fontSize: 11.5,
                                fontWeight: ativo ? 700 : 500,
                                fontFamily: 'var(--font-sans)',
                                cursor: 'pointer',
                              }}>{opt.label}</button>
                            );
                          })}
                        </div>
                      ) : (
                        <span style={{ fontSize: 11, fontWeight: 700, background: av === 'gestor' ? '#EEF3FA' : av === 'rh' ? '#E6F5F1' : 'var(--escalab-brand-tint)', color: av === 'gestor' ? '#1F4A8A' : av === 'rh' ? '#00836B' : 'var(--escalab-brand-deep)', borderRadius: 5, padding: '3px 9px', textTransform: 'uppercase', letterSpacing: '.06em' }}>
                          {av === 'gestor' ? 'Gestor' : av === 'rh' ? 'GC' : 'Gestor + GC'}
                        </span>
                      )}
                      {categoriasLocais.length > 1 && isAdmin && (
                        <button onClick={() => removerCategoria(cat.id)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 4 }}>
                          <Icon name="close" size={14} />
                        </button>
                      )}
                    </div>
                  );
                })}
              </div>
              {isAdmin && (
                <div style={{ background: 'var(--escalab-paper)', borderRadius: 8, padding: '12px', display: 'flex', flexDirection: 'column', gap: 8, border: '1px dashed var(--escalab-line)' }}>
                  <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--escalab-mute)', letterSpacing: '.05em', textTransform: 'uppercase' }}>Nova categoria</div>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    <input value={novaCategoria} onChange={e => setNovaCategoria(e.target.value)}
                      onKeyDown={e => e.key === 'Enter' && adicionarCategoria()}
                      placeholder="Ex: Liderança, Comunicação, Cultura…"
                      style={{ flex: '1 1 200px', minWidth: 0, border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 14, fontFamily: 'var(--font-sans)', outline: 0 }} />
                    <select value={novaCategoriaQuem} onChange={e => setNovaCategoriaQuem(e.target.value)}
                      style={{ border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0, background: '#fff' }}>
                      <option value="gestor">Avalia: Gestor</option>
                      <option value="rh">Avalia: GC</option>
                      <option value="ambos">Avalia: Ambos</option>
                    </select>
                    <Button variant="primary" size="sm" onClick={adicionarCategoria} disabled={!novaCategoria.trim()}>Adicionar</Button>
                  </div>
                </div>
              )}
            </div>
          )}

          <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--escalab-line)' }}>
            <Button variant="outline" onClick={onClose}>Cancelar</Button>
            <Button variant="primary" onClick={handleSalvar} disabled={salvando}>
              {salvando ? 'Salvando…' : 'Salvar alterações'}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Card kanban do candidato ───────────────────────────────────────────────

const KanbanCardCandidato = ({ candidato, onClick, podeArrastar, onDragStart, onDragEnd }) => {
  const [hov, setHov] = useState(false);
  const iniciais = candidato.nome.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase();
  const etapaInfo = ETAPAS_REC.find(e => e.id === candidato.etapa);
  const hoje = new Date().toISOString().slice(0, 10);
  const diasAberto = candidato.criadoEm ? Math.max(0, Math.round((new Date(hoje) - new Date(candidato.criadoEm.slice(0, 10))) / 86400000)) : 0;

  return (
    <div onClick={onClick}
      draggable={!!podeArrastar}
      onDragStart={e => { if (podeArrastar) { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', candidato.id); onDragStart?.(candidato.id); } }}
      onDragEnd={() => onDragEnd?.()}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ background: '#fff', border: `1px solid ${hov ? '#C8CDD4' : 'var(--escalab-line)'}`, borderRadius: 12, padding: '14px 16px', cursor: podeArrastar ? 'grab' : 'pointer', boxShadow: hov ? '0 4px 16px rgba(10,15,18,.09)' : 'none', transition: 'box-shadow .18s, border-color .18s' }}>
      <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginBottom: 10 }}>
        <div style={{ width: 34, height: 34, borderRadius: '50%', background: etapaInfo?.bg || 'var(--escalab-brand-tint)', color: etapaInfo?.color || 'var(--escalab-brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>
          {iniciais}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 600, fontSize: 13.5, color: 'var(--escalab-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {candidato.nome.split(' ').slice(0, 2).join(' ')}
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{candidato.email}</div>
        </div>
      </div>

      {candidato.nota && (
        <div style={{ marginBottom: 8, display: 'flex', gap: 8, alignItems: 'center' }}>
          <Estrelas valor={Math.round(candidato.nota)} size={12} />
          <span style={{ fontSize: 12, fontWeight: 700, color: '#F5A623' }}>{candidato.nota.toFixed(1)}</span>
        </div>
      )}

      {(candidato.comentariosGestor || candidato.comentariosRH || candidato.avaliacao) && (
        <div style={{ fontSize: 11.5, color: 'var(--escalab-slate)', marginBottom: 8, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 3 }}>
          {candidato.comentariosGestor && (
            <div style={{ display: 'flex', gap: 5, alignItems: 'flex-start' }}>
              <span style={{ fontSize: 9, fontWeight: 700, color: '#1F4A8A', background: '#EEF3FA', borderRadius: 3, padding: '1px 4px', flexShrink: 0, marginTop: 1 }}>GESTOR</span>
              <span style={{ fontStyle: 'italic', overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical' }}>"{candidato.comentariosGestor}"</span>
            </div>
          )}
          {candidato.comentariosRH && (
            <div style={{ display: 'flex', gap: 5, alignItems: 'flex-start' }}>
              <span style={{ fontSize: 9, fontWeight: 700, color: '#00836B', background: '#E6F5F1', borderRadius: 3, padding: '1px 4px', flexShrink: 0, marginTop: 1 }}>GC</span>
              <span style={{ fontStyle: 'italic', overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical' }}>"{candidato.comentariosRH}"</span>
            </div>
          )}
          {!candidato.comentariosGestor && !candidato.comentariosRH && candidato.avaliacao && (
            <span style={{ fontStyle: 'italic', overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>"{candidato.avaliacao}"</span>
          )}
        </div>
      )}

      <div style={{ display: 'flex', gap: 6, alignItems: 'center', borderTop: '1px solid var(--escalab-line)', paddingTop: 10, marginTop: 6 }}>
        <Tag tone="neutral" size="xs">{candidato.origem || 'manual'}</Tag>
        {diasAberto > 0 && <span style={{ fontSize: 11, color: 'var(--escalab-mute)', marginLeft: 'auto' }}>{diasAberto}d</span>}
      </div>
    </div>
  );
};

// ── Kanban de um processo ──────────────────────────────────────────────────

// ── Editor de campos do formulário ─────────────────────────────────────────
const TIPOS_CAMPO = [
  { id:'text',     label:'Texto curto'    },
  { id:'textarea', label:'Texto longo'    },
  { id:'select',   label:'Seleção'        },
  { id:'date',     label:'Data'           },
  { id:'file',     label:'Upload arquivo' },
];

// Campos padrão do formulário de candidatura · totalmente editáveis
const CAMPOS_PADRAO_REC = [
  { id:'nome',         label:'Nome completo',                          tipo:'text',     obrigatorio:true,  fixo:true,  secao:'Dados pessoais' },
  { id:'email',        label:'E-mail',                                 tipo:'email',    obrigatorio:true,  fixo:true,  secao:'Dados pessoais' },
  { id:'telefone',     label:'Telefone / WhatsApp',                    tipo:'text',     obrigatorio:true,  secao:'Dados pessoais' },
  { id:'linkedin',     label:'LinkedIn',                               tipo:'text',     obrigatorio:false, secao:'Dados pessoais' },
  { id:'motivacao',    label:'Por que quer trabalhar na Escalab?',     tipo:'textarea', obrigatorio:true,  secao:'Sobre você' },
  { id:'competencias', label:'Principais competências e experiências', tipo:'textarea', obrigatorio:true,  secao:'Sobre você' },
  { id:'comoSoube',    label:'Como ficou sabendo da vaga?',            tipo:'select',   obrigatorio:true,  opcoes:['LinkedIn','Instagram','Indicação de um amigo','Site da Escalab','Google','Evento / feira','Outro'], secao:'Sobre você' },
  { id:'pretensao',    label:'Pretensão salarial',                     tipo:'text',     obrigatorio:false, secao:'Sobre você' },
];

function getFormSchemaProcesso(processo) {
  return (processo.formSchema && processo.formSchema.length) ? processo.formSchema : CAMPOS_PADRAO_REC;
}

const EditorFormulario = ({ processo, onSalvar, onFechar }) => {
  const [campos, setCampos] = useState(() => getFormSchemaProcesso(processo).map(c => ({ ...c, opcoes: c.opcoes ? [...c.opcoes] : [] })));
  const inp = { border:'1px solid var(--escalab-line)', borderRadius:7, padding:'6px 10px', fontSize:13, fontFamily:'var(--font-sans)', outline:'none', background:'#fff' };

  function upd(id, patch) { setCampos(p => p.map(c => c.id === id ? { ...c, ...patch } : c)); }
  function remove(id) { setCampos(p => p.filter(c => c.id !== id)); }
  function move(i, dir) { setCampos(p => { const a = [...p]; const j = i + dir; if (j < 0 || j >= a.length) return p; const t = a[i]; a[i] = a[j]; a[j] = t; return a; }); }
  function addCampo() { setCampos(p => [...p, { id:'fc'+Date.now(), label:'Novo campo', tipo:'text', obrigatorio:false, opcoes:[], secao:'Informações complementares' }]); }
  function restaurar() { setCampos(CAMPOS_PADRAO_REC.map(c => ({ ...c, opcoes: c.opcoes ? [...c.opcoes] : [] }))); }

  return (
    <div style={{ background:'#fff', border:'1px solid var(--escalab-brand-soft)', borderRadius:12, padding:'18px 20px', marginBottom:16 }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
        <div style={{ fontSize:13, fontWeight:700, flex:1 }}>Formulário de candidatura · {processo.vaga}</div>
        <button onClick={onFechar} style={{ border:0, background:'transparent', cursor:'pointer', color:'var(--escalab-mute)', padding:4 }}><Icon name="close" size={14}/></button>
      </div>
      <div style={{ fontSize:11, color:'var(--escalab-mute)', marginBottom:14 }}>Edite, reordene, remova ou adicione qualquer campo. Nome e E-mail são fixos (necessários para identificar o candidato).</div>

      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        {campos.map((c, i) => (
          <div key={c.id} style={{ border:'1px solid var(--escalab-line)', borderRadius:10, padding:'10px 12px', background:'var(--escalab-paper)' }}>
            <div style={{ display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
              <div style={{ display:'flex', flexDirection:'column' }}>
                <button onClick={() => move(i,-1)} disabled={i===0} style={{ border:0, background:'transparent', cursor:i===0?'default':'pointer', color:'var(--escalab-mute)', padding:0, opacity:i===0?.3:1, lineHeight:1 }}><Icon name="chev_up" size={14}/></button>
                <button onClick={() => move(i,1)} disabled={i===campos.length-1} style={{ border:0, background:'transparent', cursor:i===campos.length-1?'default':'pointer', color:'var(--escalab-mute)', padding:0, opacity:i===campos.length-1?.3:1, lineHeight:1 }}><Icon name="chev_down" size={14}/></button>
              </div>
              <input value={c.label} onChange={e => upd(c.id, { label:e.target.value })} placeholder="Nome do campo" style={{ ...inp, flex:'1 1 160px' }}/>
              <select value={c.tipo} onChange={e => upd(c.id, { tipo:e.target.value })} disabled={c.fixo} style={{ ...inp, opacity:c.fixo?.6:1 }}>
                {c.tipo === 'email' && <option value="email">E-mail</option>}
                {TIPOS_CAMPO.map(t => <option key={t.id} value={t.id}>{t.label}</option>)}
              </select>
              <label style={{ display:'flex', alignItems:'center', gap:5, fontSize:12.5, color:'var(--escalab-slate)' }}>
                <input type="checkbox" checked={c.obrigatorio} disabled={c.fixo} onChange={e => upd(c.id, { obrigatorio:e.target.checked })}/> Obrigatório
              </label>
              {c.fixo
                ? <span style={{ fontSize:10, background:'var(--escalab-brand-tint)', color:'var(--escalab-brand-deep)', borderRadius:4, padding:'2px 6px', fontWeight:700 }}>Fixo</span>
                : <button onClick={() => remove(c.id)} title="Remover campo" style={{ border:0, background:'transparent', cursor:'pointer', color:'#B3261E', padding:2 }}><Icon name="close" size={14}/></button>}
            </div>
            {c.tipo === 'select' && (
              <textarea value={(c.opcoes||[]).join('\n')} onChange={e => upd(c.id, { opcoes:e.target.value.split('\n').map(o=>o.trim()).filter(Boolean) })} rows={2} placeholder="Uma opção por linha..." style={{ ...inp, width:'100%', resize:'vertical', marginTop:8, boxSizing:'border-box' }}/>
            )}
          </div>
        ))}
      </div>

      <div style={{ display:'flex', gap:8, marginTop:12, flexWrap:'wrap' }}>
        <button onClick={addCampo} style={{ border:0, borderRadius:7, padding:'7px 14px', background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontSize:12, fontWeight:600, fontFamily:'var(--font-sans)' }}>+ Adicionar campo</button>
        <button onClick={restaurar} style={{ border:'1px solid var(--escalab-line)', borderRadius:7, padding:'7px 14px', background:'#fff', cursor:'pointer', fontSize:12, color:'var(--escalab-slate)', fontFamily:'var(--font-sans)' }}>Restaurar padrão</button>
      </div>

      <div style={{ display:'flex', gap:8, justifyContent:'flex-end', marginTop:14 }}>
        <button onClick={onFechar} style={{ padding:'7px 16px', border:'1px solid var(--escalab-line)', borderRadius:8, background:'#fff', cursor:'pointer', fontSize:13, fontFamily:'var(--font-sans)' }}>Cancelar</button>
        <button onClick={() => onSalvar(campos.filter(c => c.label.trim()))} style={{ padding:'7px 16px', border:0, borderRadius:8, background:'var(--escalab-brand)', color:'#fff', cursor:'pointer', fontWeight:600, fontSize:13, fontFamily:'var(--font-sans)' }}>Salvar formulário</button>
      </div>
    </div>
  );
};

// ── E-mails automáticos editáveis ──────────────────────────────────────────────
const REC_EMAILS_KEY = 'escalab_rec_emails';
const REC_EMAILS_DEFAULT = {
  aprovado: {
    assunto: 'Boas notícias sobre seu processo · {vaga}',
    corpo: 'Olá {nome},\n\nTemos uma ótima notícia! Você avançou com sucesso na etapa "{etapa}" do processo seletivo para a vaga de {vaga} na Escalab.\n\nEm breve entraremos em contato com os próximos passos.\n\nParabéns e até logo!\n\nAtt,\nEquipe de Gente & Cultura · Escalab',
  },
  reprovado: {
    assunto: 'Resultado do Processo Seletivo · {vaga}',
    corpo: 'Olá {nome},\n\nAgradecemos muito o seu interesse na vaga de {vaga} na Escalab e o tempo dedicado ao nosso processo seletivo.\n\nApós análise cuidadosa, informamos que, neste momento, seguiremos com outro perfil para esta posição. Sua candidatura foi valorizada e mantida em nosso banco de talentos.\n\nDesejamos muito sucesso na sua trajetória profissional!\n\nAtt,\nEquipe de Gente & Cultura · Escalab',
  },
};
function getRecEmails() {
  try { const r = localStorage.getItem(REC_EMAILS_KEY); return r ? { ...REC_EMAILS_DEFAULT, ...JSON.parse(r) } : REC_EMAILS_DEFAULT; } catch { return REC_EMAILS_DEFAULT; }
}
function salvarRecEmails(t) { try { localStorage.setItem(REC_EMAILS_KEY, JSON.stringify(t)); } catch {} }
function aplicarTpl(str, v) { return (str || '').replace(/\{nome\}/g, v.nome || '').replace(/\{vaga\}/g, v.vaga || '').replace(/\{etapa\}/g, v.etapa || ''); }
function mailtoTpl(tpl, v) {
  // Usa o helper Escalab para garantir assinatura + padrão @escalab (Hostinger quando configurado)
  return mailtoEscalab({
    to: v.email || '',
    subject: aplicarTpl(tpl.assunto, v),
    corpo: escalabEmailEnvelope(aplicarTpl(tpl.corpo, v)),
    replyTo: ESCALAB_EMAIL_RH,
  });
}

const ModalEmailsRec = ({ onClose }) => {
  const [tpls, setTpls] = useState(() => { const t = getRecEmails(); return { aprovado: { ...t.aprovado }, reprovado: { ...t.reprovado } }; });
  const inpBase = { width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '9px 12px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 0, boxSizing: 'border-box', lineHeight: 1.5 };
  function upd(tipo, campo, v) { setTpls(p => ({ ...p, [tipo]: { ...p[tipo], [campo]: v } })); }
  return (
    <Modal open onClose={onClose} title="E-mails automáticos do recrutamento" width={620}
      footer={<><Button variant="ghost" onClick={onClose}>Cancelar</Button><Button variant="primary" onClick={() => { salvarRecEmails(tpls); onClose(); }}>Salvar e-mails</Button></>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)' }}>Use os marcadores <b>{'{nome}'}</b>, <b>{'{vaga}'}</b> e <b>{'{etapa}'}</b> · serão substituídos automaticamente ao enviar.</div>
        {[{ id: 'aprovado', label: 'E-mail de aprovação (avanço de etapa)', cor: '#00836B' }, { id: 'reprovado', label: 'E-mail de reprovação', cor: '#B3261E' }].map(t => (
          <div key={t.id} style={{ border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '14px 16px' }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: t.cor, marginBottom: 10 }}>{t.label}</div>
            <Field label="Assunto"><input value={tpls[t.id].assunto} onChange={e => upd(t.id, 'assunto', e.target.value)} style={inpBase} /></Field>
            <div style={{ height: 10 }} />
            <Field label="Mensagem"><textarea value={tpls[t.id].corpo} onChange={e => upd(t.id, 'corpo', e.target.value)} rows={6} style={{ ...inpBase, resize: 'vertical' }} /></Field>
          </div>
        ))}
      </div>
    </Modal>
  );
};

const KanbanRecrutamento = ({ processo, user, onAtualizar, onAddCandidato, onBack, onFechar, onSalvarForm }) => {
  const [showEmailEditor, setShowEmailEditor] = useState(false);
  const [modalCandidato, setModalCandidato] = useState(null);
  const [modalAdd, setModalAdd] = useState(false);
  const [sucesso, setSucesso] = useState('');
  const [showFormEditor, setShowFormEditor] = useState(false);
  // PDF Site AVD 5 · item 44: drag-and-drop
  const [arrastando, setArrastando] = useState(null);
  const [hoverEtapa, setHoverEtapa] = useState(null);
  const isAdmin = user?.perfil === 'admin';
  const isGestor = user?.perfil === 'gestor';
  const podeArrastar = isAdmin || isGestor;

  const ativos = processo.candidatos.filter(c => !['aprovado', 'reprovado'].includes(c.etapa));
  const finais = processo.candidatos.filter(c => ['aprovado', 'reprovado'].includes(c.etapa));

  function handleAtualizar(procId, candId, updates) {
    onAtualizar(procId, candId, updates);
    const msg = updates.etapa === 'aprovado' ? 'Candidato aprovado!' : updates.etapa === 'reprovado' ? 'Candidato reprovado.' : 'Candidato atualizado.';
    setSucesso(msg);
    setTimeout(() => setSucesso(''), 3000);
  }

  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
      {/* Breadcrumb + header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
        <button onClick={onBack} style={{ display: 'flex', alignItems: 'center', gap: 6, border: '1px solid var(--escalab-line)', background: '#fff', borderRadius: 8, padding: '7px 12px', cursor: 'pointer', color: 'var(--escalab-slate)', fontFamily: 'var(--font-sans)', fontSize: 13 }}>
          <Icon name="chev_left" size={14} /> Processos
        </button>
        <div style={{ color: 'var(--escalab-line)' }}>/</div>
        <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--escalab-ink)' }}>{processo.vaga}</span>
        <Tag tone={processo.status === 'aberto' ? 'success' : 'neutral'} size="xs" style={{ marginLeft: 4 }}>
          {processo.status === 'aberto' ? 'Aberto' : 'Fechado'}
        </Tag>
      </div>

      {/* Info do processo */}
      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '16px 20px', marginBottom: 20, display: 'flex', gap: 20, flexWrap: 'wrap', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div>
          <h2 style={{ fontSize: 20, fontWeight: 700, margin: '0 0 4px' }}>{processo.vaga}</h2>
          <div style={{ fontSize: 13, color: 'var(--escalab-mute)' }}>{processo.departamento} · Resp: {(processo.responsaveis?.length ? processo.responsaveis : (processo.responsavel ? [processo.responsavel] : [])).map(n => n.split(' ').slice(0, 2).join(' ')).join(' · ') || '·'}</div>
          {processo.descricao && <div style={{ fontSize: 13, color: 'var(--escalab-slate)', marginTop: 6, maxWidth: 480 }}>{processo.descricao}</div>}
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {processo.status === 'aberto' && (
            <>
              <a href={`candidatura.html?vaga=${processo.id}`} target="_blank" rel="noopener noreferrer" style={{ display:'flex', alignItems:'center', gap:6, padding:'7px 14px', border:'1px solid var(--escalab-brand-soft)', borderRadius:8, background:'var(--escalab-brand-tint)', color:'var(--escalab-brand-deep)', fontSize:13, fontWeight:600, fontFamily:'var(--font-sans)', textDecoration:'none' }}>
                <Icon name="send" size={13}/> Link do formulário
              </a>
              <button onClick={() => setShowFormEditor(v => !v)} style={{ display:'flex', alignItems:'center', gap:6, padding:'7px 14px', border:'1px solid var(--escalab-line)', borderRadius:8, background:showFormEditor?'var(--escalab-paper)':'#fff', color:'var(--escalab-slate)', fontSize:13, fontFamily:'var(--font-sans)', cursor:'pointer' }}>
                <Icon name="settings" size={13}/> Editar formulário{processo.formSchema?.length ? ` (${processo.formSchema.length} campos)` : ''}
              </button>
              <button onClick={() => setShowEmailEditor(true)} style={{ display:'flex', alignItems:'center', gap:6, padding:'7px 14px', border:'1px solid var(--escalab-line)', borderRadius:8, background:'#fff', color:'var(--escalab-slate)', fontSize:13, fontFamily:'var(--font-sans)', cursor:'pointer' }}>
                <Icon name="message" size={13}/> Editar e-mails
              </button>
            </>
          )}
          {processo.status === 'aberto' && user.perfil === 'admin' && (
            <Button variant="outline" size="sm" onClick={onFechar}>Encerrar processo</Button>
          )}
          <Button variant="primary" icon="plus" size="sm" onClick={() => setModalAdd(true)}>Candidato</Button>
        </div>
      </div>

      {/* KPIs rápidos */}
      <div style={{ display: 'flex', gap: 10, marginBottom: 20, flexWrap: 'wrap' }}>
        {[
          { label: 'Total candidatos', val: processo.candidatos.length,                                     cor: 'var(--escalab-brand)', bg: 'var(--escalab-brand-tint)' },
          { label: 'Em processo',       val: ativos.length,                                                  cor: '#1F4A8A', bg: '#EEF3FA' },
          { label: 'Aprovados',          val: processo.candidatos.filter(c => c.etapa === 'aprovado').length,  cor: '#00967B', bg: '#E6F5F1' },
          { label: 'Reprovados',         val: processo.candidatos.filter(c => c.etapa === 'reprovado').length, cor: '#B3261E', bg: '#FDECEC' },
        ].map(k => (
          <div key={k.label} style={{ background: k.bg, border: '1px solid var(--escalab-line)', borderRadius: 10, padding: '10px 16px', display: 'flex', gap: 10, alignItems: 'center' }}>
            <span style={{ fontSize: 20, fontWeight: 800, color: k.cor }}>{k.val}</span>
            <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{k.label}</span>
          </div>
        ))}
      </div>

      {sucesso && <div style={{ marginBottom: 16 }}><Banner tone="success" onClose={() => setSucesso('')}>{sucesso}</Banner></div>}

      {/* Funil do processo · histórico acumulado (não decrementa quando candidato muda de etapa) */}
      {(() => {
        const total = processo.candidatos.length;
        const reprov = processo.candidatos.filter(c => c.etapa === 'reprovado').length;
        const aprov  = processo.candidatos.filter(c => c.etapa === 'aprovado').length;
        const taxaAprov = total ? Math.round(aprov / total * 100) : 0;
        const etapasFunil = [...ETAPAS_KANBAN, { id: 'aprovado', label: 'Aprovado', color: '#00967B' }];

        // Histórico cumulativo: conta quantos candidatos PASSARAM por cada etapa (não os que estão lá agora)
        const visitadosPorCand = processo.candidatos.map(etapasJaVisitadas);
        const contagemPorEtapa = id => visitadosPorCand.filter(s => s.has(id)).length;
        const maxF = Math.max(1, ...etapasFunil.map(e => contagemPorEtapa(e.id)));

        return (
          <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '16px 20px', marginBottom: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
              <div style={{ fontSize: 13, fontWeight: 700, flex: 1 }}>Funil do processo · histórico por etapa</div>
              <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>Taxa de aprovação: <b style={{ color: '#00836B' }}>{taxaAprov}%</b> · {reprov} reprovado(s)</span>
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginBottom: 12 }}>Conta todos os candidatos que já passaram por cada etapa (não decrementa quando avançam).</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {etapasFunil.map(e => {
                const n = contagemPorEtapa(e.id);
                return (
                  <div key={e.id} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ fontSize: 12, color: 'var(--escalab-slate)', minWidth: 150 }}>{e.label}</span>
                    <div style={{ flex: 1, height: 8, background: 'var(--escalab-line)', borderRadius: 999 }}>
                      <div style={{ width: (n / maxF * 100) + '%', height: '100%', background: e.color, borderRadius: 999, transition: 'width .5s' }} />
                    </div>
                    <span style={{ fontSize: 12.5, fontWeight: 700, color: e.color, minWidth: 24, textAlign: 'right' }}>{n}</span>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })()}

      {showEmailEditor && <ModalEmailsRec onClose={() => setShowEmailEditor(false)} />}

      {/* Editor de formulário */}
      {showFormEditor && (
        <EditorFormulario
          processo={processo}
          onFechar={() => setShowFormEditor(false)}
          onSalvar={campos => { onSalvarForm && onSalvarForm(processo.id, campos); setShowFormEditor(false); setSucesso('Formulário salvo!'); setTimeout(() => setSucesso(''), 3000); }}
        />
      )}

      {/* Kanban */}
      <div style={{ overflowX: 'auto', paddingBottom: 8 }}>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${ETAPAS_KANBAN.length}, minmax(210px, 1fr))`, gap: 12, minWidth: 900, alignItems: 'start' }}>
          {ETAPAS_KANBAN.map(etapa => {
            const cards = ativos.filter(c => c.etapa === etapa.id)
              .sort((a, b) => (b.nota || 0) - (a.nota || 0));
            const dropAtivo = hoverEtapa === etapa.id && arrastando;
            return (
              <div key={etapa.id}
                onDragOver={e => { if (podeArrastar) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setHoverEtapa(etapa.id); } }}
                onDragLeave={() => setHoverEtapa(h => h === etapa.id ? null : h)}
                onDrop={e => {
                  if (!podeArrastar) return;
                  e.preventDefault();
                  const candId = e.dataTransfer.getData('text/plain') || arrastando;
                  if (candId) {
                    const cand = processo.candidatos.find(c => c.id === candId);
                    if (cand && cand.etapa !== etapa.id) onAtualizar(processo.id, candId, { etapa: etapa.id });
                  }
                  setHoverEtapa(null);
                  setArrastando(null);
                }}
                style={{ borderRadius: 12, padding: dropAtivo ? 8 : 2, background: dropAtivo ? etapa.bg : 'transparent', border: dropAtivo ? `2px dashed ${etapa.color}` : '2px dashed transparent', transition: 'background .15s, border-color .15s' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 10, padding: '0 2px' }}>
                  <div style={{ width: 8, height: 8, borderRadius: '50%', background: etapa.color, flexShrink: 0 }} />
                  <span style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.07em', textTransform: 'uppercase', color: 'var(--escalab-slate)', flex: 1 }}>{etapa.label}</span>
                  <span style={{ fontSize: 11, fontWeight: 600, color: etapa.color, background: etapa.bg, borderRadius: 999, padding: '2px 8px', flexShrink: 0 }}>{cards.length}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {cards.length === 0 ? (
                    <div style={{ border: '2px dashed var(--escalab-line)', borderRadius: 12, padding: '20px 14px', textAlign: 'center', color: 'var(--escalab-mute)', fontSize: 12 }}>
                      {dropAtivo ? 'Solte aqui' : 'Nenhum candidato'}
                    </div>
                  ) : (
                    cards.map(c => (
                      <KanbanCardCandidato key={c.id} candidato={c}
                        onClick={() => setModalCandidato(c)}
                        podeArrastar={podeArrastar}
                        onDragStart={id => setArrastando(id)}
                        onDragEnd={() => { setArrastando(null); setHoverEtapa(null); }}
                      />
                    ))
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Checklist de Resultado Final */}
      <div style={{ marginTop: 28, background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '18px 20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
          <div style={{ fontSize: 13, fontWeight: 700, flex: 1 }}>Checklist de Resultado Final</div>
          <div style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>
            {processo.candidatos.filter(c => c.etapa === 'aprovado').length} aprovados · <span style={{ color: '#B3261E' }}>{processo.candidatos.filter(c => c.etapa === 'reprovado').length} reprovados</span>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {processo.candidatos.map(c => {
            const isRep = c.etapa === 'reprovado';
            const isApr = c.etapa === 'aprovado';
            return (
              <div key={c.id} onClick={() => setModalCandidato(c)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', borderRadius: 10, cursor: 'pointer', border: `1px solid ${isRep ? '#F4C7C3' : isApr ? '#A3D9CE' : 'var(--escalab-line)'}`, background: isRep ? '#FDECEC' : isApr ? '#E6F5F1' : '#fff', transition: 'all .12s' }}>
                <div style={{ width: 32, height: 32, borderRadius: '50%', background: isRep ? '#B3261E' : isApr ? '#00836B' : 'var(--escalab-paper)', color: isRep ? '#fff' : isApr ? '#fff' : 'var(--escalab-mute)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 11, flexShrink: 0 }}>
                  {isRep ? '✗' : isApr ? '✓' : c.nome.split(' ').map(n=>n[0]).slice(0,2).join('')}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: isRep || isApr ? 700 : 500, color: isRep ? '#B3261E' : isApr ? '#00836B' : 'var(--escalab-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.nome}</div>
                  <div style={{ fontSize: 11.5, color: isRep ? '#B3261E' : isApr ? '#00836B' : 'var(--escalab-mute)', marginTop: 1 }}>
                    {isRep ? 'Reprovado' : isApr ? 'Aprovado' : ETAPAS_REC.find(e=>e.id===c.etapa)?.label || c.etapa}
                  </div>
                </div>
                {c.nota && <Estrelas valor={c.nota} size={12} />}
                {isRep && c.email && (
                  <a href={mailtoTpl(getRecEmails().reprovado, { nome: c.nome.split(' ')[0], vaga: processo.vaga, etapa: 'Reprovado', email: c.email })}
                    onClick={e => e.stopPropagation()}
                    style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px', border: '1px solid #F4C7C3', borderRadius: 7, background: '#fff', color: '#B3261E', fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-sans)', textDecoration: 'none', flexShrink: 0 }}>
                    <Icon name="send" size={12}/> E-mail
                  </a>
                )}
                {isApr && c.email && (
                  <a href={mailtoTpl(getRecEmails().aprovado, { nome: c.nome.split(' ')[0], vaga: processo.vaga, etapa: 'Aprovado', email: c.email })}
                    onClick={e => e.stopPropagation()}
                    style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px', border: '1px solid #A3D9CE', borderRadius: 7, background: '#fff', color: '#00836B', fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-sans)', textDecoration: 'none', flexShrink: 0 }}>
                    <Icon name="send" size={12}/> E-mail
                  </a>
                )}
                <Icon name="chev_right" size={14} />
              </div>
            );
          })}
        </div>
      </div>

      {modalCandidato && (
        <ModalCandidato
          candidato={modalCandidato}
          processo={processo}
          user={user}
          onClose={() => setModalCandidato(null)}
          onAtualizar={handleAtualizar}
        />
      )}
      {modalAdd && (
        <ModalAddCandidato
          processoId={processo.id}
          onClose={() => setModalAdd(false)}
          onSalvar={(procId, cand) => { onAddCandidato(procId, cand); setModalAdd(false); setSucesso('Candidato adicionado!'); setTimeout(() => setSucesso(''), 3000); }}
        />
      )}
    </div>
  );
};

// ── Card de processo (lista) ───────────────────────────────────────────────

const ProcessoCard = ({ proc, onClick }) => {
  const [hov, setHov] = useState(false);
  const emProcesso = proc.candidatos.filter(c => !['aprovado', 'reprovado'].includes(c.etapa)).length;
  const aprovados  = proc.candidatos.filter(c => c.etapa === 'aprovado').length;
  const novasCands = proc.candidatos.filter(c => c.etapa === 'triagem').length;
  const _respNomes = (proc.responsaveis?.length ? proc.responsaveis : (proc.responsavel ? [proc.responsavel] : []));
  const resp = COLABORADORES.find(c => c.nome === _respNomes[0]);
  const diasAbertos = Math.max(0, Math.round((new Date() - new Date(proc.criadoEm + 'T00:00:00')) / 86400000));

  return (
    <div onClick={onClick}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ background: '#fff', border: `1px solid ${hov ? 'var(--escalab-brand-soft)' : 'var(--escalab-line)'}`, borderRadius: 14, padding: '18px 20px', cursor: 'pointer', boxShadow: hov ? '0 4px 18px rgba(10,15,18,.07)' : 'none', transition: 'all .18s', display: 'flex', gap: 16, alignItems: 'flex-start' }}>
      {/* Ícone pasta */}
      <div style={{ width: 44, height: 44, borderRadius: 12, background: proc.status === 'aberto' ? 'var(--escalab-brand-tint)' : 'var(--escalab-paper)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <svg width={22} height={22} viewBox="0 0 24 24" fill={proc.status === 'aberto' ? 'var(--escalab-brand)' : 'var(--escalab-mute)'}>
          <path d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z" />
        </svg>
      </div>

      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', marginBottom: 4 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--escalab-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{proc.vaga}</div>
            <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginTop: 2 }}>{proc.departamento} · {diasAbertos}d aberto</div>
          </div>
          <Tag tone={proc.status === 'aberto' ? 'success' : 'neutral'} size="xs">{proc.status === 'aberto' ? 'Aberto' : 'Fechado'}</Tag>
        </div>

        <div style={{ display: 'flex', gap: 16, marginTop: 10, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
            <span style={{ fontSize: 18, fontWeight: 800, color: 'var(--escalab-brand)' }}>{proc.candidatos.length}</span>
            <span style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>candidatos</span>
          </div>
          {novasCands > 0 && (
            <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
              <span style={{ fontSize: 14, fontWeight: 700, color: '#E89B3B' }}>{novasCands}</span>
              <span style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>na triagem</span>
            </div>
          )}
          {emProcesso > 0 && (
            <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
              <span style={{ fontSize: 14, fontWeight: 700, color: '#1F4A8A' }}>{emProcesso}</span>
              <span style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>em andamento</span>
            </div>
          )}
          {aprovados > 0 && (
            <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
              <span style={{ fontSize: 14, fontWeight: 700, color: '#00967B' }}>{aprovados}</span>
              <span style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>aprovados</span>
            </div>
          )}
        </div>

        {resp && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 10, borderTop: '1px solid var(--escalab-line)', paddingTop: 10 }}>
            <div style={{ width: 22, height: 22, borderRadius: '50%', background: resp.cor, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 9, flexShrink: 0 }}>{resp.iniciais}</div>
            <span style={{ fontSize: 12, color: 'var(--escalab-mute)' }}>{resp.nome.split(' ').slice(0, 2).join(' ')}</span>
          </div>
        )}
      </div>

      <div style={{ color: 'var(--escalab-brand)', flexShrink: 0, marginTop: 4 }}>
        <Icon name="chev_right" size={16} />
      </div>
    </div>
  );
};

// ── Tela principal ──────────────────────────────────────────────────────────

const ScreenRecrutamento = ({ user }) => {
  const [processos, setProcessos] = useState(() => getProcessos());
  const [processoAtivo, setProcessoAtivo] = useState(null);
  const [aba, setAba] = useState('ativos');
  const [modalNovo, setModalNovo] = useState(false);
  const [sucesso, setSucesso] = useState('');

  function recarregar() {
    const lista = getProcessos();
    setProcessos(lista);
    if (processoAtivo) {
      const atualizado = lista.find(p => p.id === processoAtivo.id);
      if (atualizado) setProcessoAtivo(atualizado);
    }
  }

  function handleNovoProcesso(proc) {
    salvarProcesso(proc);
    recarregar();
    setSucesso(`Processo "${proc.vaga}" criado!`);
    setTimeout(() => setSucesso(''), 4000);
  }

  function handleAtualizar(procId, candId, updates) {
    atualizarCandidatoRec(procId, candId, updates);
    recarregar();
  }

  function handleAddCandidato(procId, cand) {
    adicionarCandidatoRec(procId, cand);
    recarregar();
  }

  function handleFecharProcesso() {
    if (!processoAtivo) return;
    const atualizado = { ...processoAtivo, status: 'fechado' };
    salvarProcesso(atualizado);
    recarregar();
    setSucesso('Processo encerrado.');
    setTimeout(() => setSucesso(''), 3000);
  }

  // PDF Site AVD 5 · item 22: gestor/líder só vê processo se for um dos responsáveis da vaga.
  // Financeiro: ve todos os processos (regra global). Gestor com perm 'verRecrutamentoTudo'
  // tambem ve todos (configurado em Painel Admin > Permissoes de Gestor).
  const gestorVeRecrutTudo = user.perfil === 'gestor'
    && typeof getGestorPerms === 'function'
    && !!getGestorPerms(user.id)?.verRecrutamentoTudo;
  const podeVerProcesso = p => {
    if (user.perfil === 'admin' || user.perfil === 'financeiro' || gestorVeRecrutTudo) return true;
    const lista = p.responsaveis?.length ? p.responsaveis : (p.responsavel ? [p.responsavel] : []);
    return lista.includes(user.nome);
  };
  const ativos   = processos.filter(p => p.status === 'aberto'  && podeVerProcesso(p));
  const fechados = processos.filter(p => p.status === 'fechado' && podeVerProcesso(p));

  // ── Dentro de um processo ──
  if (processoAtivo) {
    return (
      <KanbanRecrutamento
        processo={processoAtivo}
        user={user}
        onAtualizar={handleAtualizar}
        onAddCandidato={handleAddCandidato}
        onBack={() => setProcessoAtivo(null)}
        onFechar={handleFecharProcesso}
        onSalvarForm={(procId, schema) => {
          const lista = getProcessos().map(p => p.id === procId ? { ...p, formSchema: schema } : p);
          salvarProcessos(lista);
          setProcessoAtivo(p => ({ ...p, formSchema: schema }));
        }}
      />
    );
  }

  // ── Lista de processos ──
  const todosCandsNovos = processos.reduce((s, p) => s + p.candidatos.filter(c => c.etapa === 'triagem').length, 0);

  const tabs = [
    { id: 'ativos',   label: 'Processos Ativos',  icon: 'org',   count: ativos.length   },
    { id: 'fechados', label: 'Encerrados',         icon: 'check', count: fechados.length },
  ];

  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)' }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Gestão de Pessoas</div>
          <h2 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>Recrutamento</h2>
          <p style={{ fontSize: 13.5, color: 'var(--escalab-slate)', margin: '4px 0 0' }}>Gerencie processos seletivos e candidatos</p>
        </div>
        {user.perfil === 'admin' && (
          <Button variant="primary" icon="plus" onClick={() => setModalNovo(true)}>Novo processo</Button>
        )}
      </div>

      {sucesso && <div style={{ marginBottom: 18 }}><Banner tone="success" onClose={() => setSucesso('')}>{sucesso}</Banner></div>}

      {/* KPIs */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 22, flexWrap: 'wrap' }}>
        {[
          { label: 'Processos abertos',  val: ativos.length,                               cor: 'var(--escalab-brand)', bg: 'var(--escalab-brand-tint)', icon: 'org' },
          { label: 'Candidatos ativos',  val: ativos.reduce((s, p) => s + p.candidatos.filter(c => !['aprovado','reprovado'].includes(c.etapa)).length, 0), cor: '#1F4A8A', bg: '#EEF3FA', icon: 'users' },
          { label: 'Na triagem',          val: todosCandsNovos,                              cor: '#E89B3B', bg: '#FFF7EB', icon: 'warn' },
          { label: 'Aprovados (total)',   val: processos.reduce((s, p) => s + p.candidatos.filter(c => c.etapa === 'aprovado').length, 0), cor: '#00967B', bg: '#E6F5F1', icon: 'check' },
        ].map(k => (
          <div key={k.label} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '14px 20px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 36, height: 36, borderRadius: 9, background: k.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ color: k.cor }}><Icon name={k.icon} size={16} /></div>
            </div>
            <div>
              <div style={{ fontSize: 22, fontWeight: 800, color: k.cor, lineHeight: 1 }}>{k.val}</div>
              <div style={{ fontSize: 11, color: 'var(--escalab-mute)', fontWeight: 500, marginTop: 3 }}>{k.label}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Candidatos recebidos do forms.app */}
      {todosCandsNovos > 0 && (
        <div style={{ background: '#FFF7EB', border: '1px solid #F5A62344', borderRadius: 12, padding: '12px 16px', marginBottom: 20, display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{ width: 36, height: 36, borderRadius: 9, background: '#F5A62322', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <div style={{ color: '#E89B3B' }}><Icon name="bell" size={16} /></div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: '#7A4A00', marginBottom: 2 }}>
              {todosCandsNovos} novo{todosCandsNovos > 1 ? 's candidatos' : ' candidato'} aguardando triagem
            </div>
            <div style={{ fontSize: 12, color: '#B56500' }}>Recebidos via forms.app · clique no processo para visualizar e classificar</div>
          </div>
        </div>
      )}

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

        {aba === 'ativos' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            {ativos.length === 0 ? (
              <div style={{ textAlign: 'center', padding: '48px 24px' }}>
                <div style={{ color: 'var(--escalab-mute)', marginBottom: 12 }}>
                  <svg width={40} height={40} viewBox="0 0 24 24" fill="currentColor"><path d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z" /></svg>
                </div>
                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--escalab-ink)', marginBottom: 8 }}>Nenhum processo ativo</div>
                <div style={{ fontSize: 13.5, color: 'var(--escalab-mute)', marginBottom: 20 }}>Crie um processo para começar a gerenciar candidatos.</div>
                {user.perfil === 'admin' && <Button variant="primary" icon="plus" onClick={() => setModalNovo(true)}>Criar processo</Button>}
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {ativos.map(p => <ProcessoCard key={p.id} proc={p} onClick={() => setProcessoAtivo(p)} />)}
              </div>
            )}
          </div>
        )}

        {aba === 'fechados' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            {fechados.length === 0 ? (
              <Banner tone="info">Nenhum processo encerrado ainda.</Banner>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {fechados.map(p => <ProcessoCard key={p.id} proc={p} onClick={() => setProcessoAtivo(p)} />)}
              </div>
            )}
          </div>
        )}

      </div>

      {modalNovo && <ModalNovoProcesso onClose={() => setModalNovo(false)} onSalvar={handleNovoProcesso} />}
    </div>
  );
};

window.ScreenRecrutamento = ScreenRecrutamento;