// ═══════════════════════════════════════════════════════════════
// SCREEN · Admissão · Kanban por etapas
// ═══════════════════════════════════════════════════════════════

const ADMISSOES_KEY = 'escalab_admissoes';

const ADMISSOES_INICIAL = [
  { id: 'ADM001', nome: 'Luiza Carvalho Braga',        cargo: 'Analista II',           setor: 'Marketing e Leads',     gestor: 'Marcus Ferreira Neto',           categoria: 'fixo',      tipoAssociado: null,       dataInicio: '2026-06-02', status: 'em_processo', etapa: 'documentacao', criadoEm: '2026-05-08', telefone: '(31) 90001-1001', email: 'luiza.carvalho@demo.com' },
  { id: 'ADM002', nome: 'Renato Souza Campos',          cargo: 'Associado de Projetos', setor: 'Associados de Projetos', gestor: 'Carlos Eduardo Mendes Costa',    categoria: 'associado', tipoAssociado: 'projetos', dataInicio: '2026-06-09', status: 'em_processo', etapa: 'aprovacao_rh', criadoEm: '2026-05-05', telefone: '(31) 90001-1002', email: 'renato.campos@demo.com' },
  { id: 'ADM003', nome: 'Fernanda Meireles Costa',      cargo: 'Analista III',          setor: 'Prospecção',            gestor: 'Roberto Silva Ferreira',         categoria: 'fixo',      tipoAssociado: null,       dataInicio: '2026-05-19', status: 'concluida',   etapa: 'concluida',   criadoEm: '2026-04-20', telefone: '(31) 90001-1003', email: 'fernanda.meireles@demo.com' },
  { id: 'ADM004', nome: 'Marcos Lima Santos',            cargo: 'Associado',             setor: 'Redes',                 gestor: 'Marcelo Santos Lima',            categoria: 'associado', tipoAssociado: 'redes',    dataInicio: '2026-06-16', status: 'em_processo', etapa: 'documentacao', criadoEm: '2026-05-10', telefone: '', email: '' },
  { id: 'ADM005', nome: 'Beatriz Corrêa Matos',         cargo: 'Analista I',            setor: 'Comercial',             gestor: 'Marcus Ferreira Neto',           categoria: 'fixo',      tipoAssociado: null,       dataInicio: '2026-06-23', status: 'em_processo', etapa: 'documentacao', criadoEm: '2026-05-12', telefone: '', email: '' },
];

const ETAPAS_ADM = [
  { id: 'documentacao', label: 'Documentação',    color: '#6B3FA0', bg: '#F4EEFF' },
  { id: 'aprovacao_rh', label: 'Aprovação GC',    color: '#00836B', bg: '#E6F5F1' },
  { id: 'concluida',    label: 'Admitido',         color: '#00967B', bg: '#E6F5F1' },
];

const TAREFAS_ETAPA_ADM_DEFAULT = {
  documentacao: ['RG ou CNH', 'CPF', 'Comprovante de residência', 'Carteira de trabalho', 'Dados bancários', 'Certificados de formação'],
  aprovacao_rh: ['Verificar documentação', 'Criar registro no sistema', 'Enviar contrato para assinatura', 'Enviar formulário de admissão por e-mail', 'Definir data de início'],
  concluida:    ['Onboarding realizado', 'Acesso ao sistema liberado', 'Apresentação à equipe'],
};

const CHECKLIST_ADM_KEY = 'escalab_checklist_adm';
const TAREFAS_FEITAS_KEY = 'escalab_adm_tarefas_feitas';

function getChecklistAdm() {
  try {
    const raw = localStorage.getItem(CHECKLIST_ADM_KEY);
    if (raw) {
      const cfg = JSON.parse(raw);
      return { ...TAREFAS_ETAPA_ADM_DEFAULT, ...cfg };
    }
  } catch {}
  return { ...TAREFAS_ETAPA_ADM_DEFAULT };
}
function salvarChecklistAdm(cfg) {
  try { localStorage.setItem(CHECKLIST_ADM_KEY, JSON.stringify(cfg)); } catch {}
}
function getTarefasFeitas(admId) {
  try { const m = JSON.parse(localStorage.getItem(TAREFAS_FEITAS_KEY) || '{}'); return m[admId] || []; } catch { return []; }
}
function setTarefaFeita(admId, tarefa, feita) {
  try {
    const m = JSON.parse(localStorage.getItem(TAREFAS_FEITAS_KEY) || '{}');
    const arr = new Set(m[admId] || []);
    if (feita) arr.add(tarefa); else arr.delete(tarefa);
    m[admId] = [...arr];
    localStorage.setItem(TAREFAS_FEITAS_KEY, JSON.stringify(m));
    return [...arr];
  } catch { return []; }
}

const CATEGORIA_TONE = { fixo: 'brand', associado: 'neutral' };
const TIPO_LABEL_ADM  = { projetos: 'Projetos', editais: 'Editais', redes: 'Redes', vb: 'VB' };

function getAdmissoes() {
  try {
    const raw = localStorage.getItem(ADMISSOES_KEY);
    if (raw) return JSON.parse(raw);
    localStorage.setItem(ADMISSOES_KEY, JSON.stringify(ADMISSOES_INICIAL));
    return ADMISSOES_INICIAL;
  } catch { return ADMISSOES_INICIAL; }
}

function salvarAdmissao(adm) {
  const lista = getAdmissoes().filter(a => a.id !== adm.id);
  lista.unshift(adm);
  try { localStorage.setItem(ADMISSOES_KEY, JSON.stringify(lista)); } catch {}
  return lista;
}

function getTarefasProgress(adm) {
  const etapa = ['triagem', 'entrevista'].includes(adm.etapa) ? 'documentacao' : adm.etapa;
  const checklist = getChecklistAdm();
  const tarefas = checklist[etapa] || checklist['documentacao'];
  const feitas = new Set(getTarefasFeitas(adm.id));
  let done = tarefas.filter(t => feitas.has(t)).length;
  if (adm.status === 'concluida') done = tarefas.length;
  return { done, total: tarefas.length };
}

// ── Modal nova admissão ────────────────────────────────────────────────────

const ModalNovaAdmissao = ({ onClose, onSalvar }) => {
  const [form, setForm] = useState({ nome: '', cargo: '', setor: '', gestor: '', categoria: 'fixo', tipoAssociado: '', dataInicio: '', primeiroPagamento: '', telefone: '', email: '' });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  function handleSalvar() {
    if (!form.nome || !form.cargo || !form.setor || !form.dataInicio) return;
    onSalvar({
      id: 'ADM' + Date.now().toString(36).toUpperCase(),
      ...form,
      tipoAssociado: form.categoria === 'associado' ? (form.tipoAssociado || 'projetos') : null,
      status: 'em_processo', etapa: 'documentacao',
      criadoEm: new Date().toISOString().slice(0, 10),
    });
    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: 520, 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 }}>Nova Admissão</h3>
            <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginTop: 2 }}>Inicie um novo processo de integração</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="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="Cargo">
              <Input value={form.cargo} onChange={v => set('cargo', v)} placeholder="Ex: Analista II" />
            </Field>
            <Field label="Data de início">
              <input type="date" value={form.dataInicio} onChange={e => set('dataInicio', 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 }} />
            </Field>
          </div>
          <Field label="Data do 1º pagamento" hint="Disponível para o financeiro consultar nas próximas folhas">
            <input type="date" value={form.primeiroPagamento} onChange={e => set('primeiroPagamento', 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 }} />
          </Field>
          <Field label="Setor / Departamento">
            <select value={form.setor} onChange={e => set('setor', 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="Gestor responsável">
            <select value={form.gestor} onChange={e => set('gestor', 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>
              {COLABORADORES.filter(c => c.perfil !== 'colaborador').map(c => <option key={c.id}>{c.nome}</option>)}
            </select>
          </Field>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Field label="Categoria">
              <select value={form.categoria} onChange={e => set('categoria', 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="fixo">Fixo</option>
                <option value="associado">Associado</option>
              </select>
            </Field>
            {form.categoria === 'associado' && (
              <Field label="Tipo de associado">
                <select value={form.tipoAssociado} onChange={e => set('tipoAssociado', 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="projetos">Projetos</option>
                  <option value="editais">Editais</option>
                  <option value="redes">Redes</option>
                  <option value="vb">VB</option>
                </select>
              </Field>
            )}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Field label="Telefone">
              <Input value={form.telefone} onChange={v => set('telefone', v)} placeholder="(00) 00000-0000" />
            </Field>
            <Field label="E-mail">
              <Input value={form.email} onChange={v => set('email', v)} placeholder="email@exemplo.com" />
            </Field>
          </div>
          <div style={{ background: 'var(--escalab-brand-tint)', borderRadius: 8, padding: '10px 14px', fontSize: 12.5, color: 'var(--escalab-brand-deep)', display: 'flex', gap: 8, alignItems: 'center' }}>
            <Icon name="message" size={14} />
            O formulário de admissão será enviado automaticamente ao e-mail informado.
          </div>
          <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.nome || !form.cargo || !form.setor || !form.dataInicio}>Iniciar processo</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ── Modal detalhe com checklist ────────────────────────────────────────────

const ModalDetalheAdmissao = ({ adm, onClose, onAvancar, user, onChecklistUpdate }) => {
  const etapaEfetiva = ['triagem', 'entrevista'].includes(adm.etapa) ? 'documentacao' : adm.etapa;
  const [checklist, setChecklist] = useState(() => getChecklistAdm());
  const [feitas, setFeitas] = useState(() => new Set(getTarefasFeitas(adm.id)));
  const [editandoChecklist, setEditandoChecklist] = useState(false);
  const [novaTarefa, setNovaTarefa] = useState('');
  const tarefas = checklist[etapaEfetiva] || checklist['documentacao'] || [];
  const done = tarefas.filter(t => feitas.has(t)).length;
  const etapaInfo = ETAPAS_ADM.find(e => e.id === etapaEfetiva) || ETAPAS_ADM[0];
  const pctProgress = tarefas.length > 0 ? (done / tarefas.length) * 100 : 100;
  const isAdmin = user?.perfil === 'admin';

  function toggleTarefa(t) {
    if (!isAdmin) return;
    const novo = setTarefaFeita(adm.id, t, !feitas.has(t));
    setFeitas(new Set(novo));
  }
  function adicionarTarefa() {
    if (!novaTarefa.trim()) return;
    const novo = { ...checklist, [etapaEfetiva]: [...tarefas, novaTarefa.trim()] };
    setChecklist(novo); salvarChecklistAdm(novo); setNovaTarefa('');
    onChecklistUpdate?.();
  }
  function removerTarefa(t) {
    const novo = { ...checklist, [etapaEfetiva]: tarefas.filter(x => x !== t) };
    setChecklist(novo); salvarChecklistAdm(novo);
    onChecklistUpdate?.();
  }
  function resetChecklist() {
    if (!confirm('Restaurar o checklist padrão desta etapa? As personalizações serão perdidas.')) return;
    const def = { ...TAREFAS_ETAPA_ADM_DEFAULT };
    salvarChecklistAdm(def); setChecklist(def);
    onChecklistUpdate?.();
  }

  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: 480, animation: 'popIn .22s var(--ease-out)', maxHeight: '90vh', overflow: 'auto' }}>
        {/* Header */}
        <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--escalab-line)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'sticky', top: 0, background: '#fff', zIndex: 1 }}>
          <div>
            <h3 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: 'var(--escalab-ink)' }}>{adm.nome.split(' ').slice(0, 2).join(' ')}</h3>
            <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)', marginTop: 3 }}>{adm.cargo} · {adm.setor}</div>
          </div>
          <button onClick={onClose} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)', padding: 2 }}><Icon name="close" size={18} /></button>
        </div>

        <div style={{ padding: '20px 24px' }}>
          {/* Status principal */}
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 20 }}>
            <div style={{ width: 10, height: 10, borderRadius: '50%', background: etapaInfo?.color, flexShrink: 0 }} />
            <span style={{ fontSize: 13.5, fontWeight: 600, color: etapaInfo?.color }}>{etapaInfo?.label}</span>
            <Tag tone={CATEGORIA_TONE[adm.categoria]} size="xs">{adm.categoria === 'fixo' ? 'Fixo' : `Assoc. ${TIPO_LABEL_ADM[adm.tipoAssociado] || ''}`}</Tag>
          </div>

          {/* Info block */}
          <div style={{ background: 'var(--escalab-paper)', borderRadius: 10, padding: '14px 16px', marginBottom: 20, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 24px' }}>
            {[
              { label: 'Data de início', val: adm.dataInicio ? adm.dataInicio.split('-').reverse().join('/') : '·' },
              { label: '1º pagamento',   val: adm.primeiroPagamento ? adm.primeiroPagamento.split('-').reverse().join('/') : '·', highlight: !!adm.primeiroPagamento },
              { label: 'Gestor',         val: adm.gestor?.split(' ').slice(0, 2).join(' ') || '·' },
              { label: 'Setor',          val: adm.setor },
              { label: 'Iniciado em',    val: adm.criadoEm ? adm.criadoEm.split('-').reverse().join('/') : '·' },
              adm.telefone && { label: 'Telefone',    val: adm.telefone },
              adm.email    && { label: 'E-mail',      val: adm.email    },
            ].filter(Boolean).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: r.highlight ? 'var(--escalab-brand-deep)' : 'var(--escalab-ink)' }}>{r.val}</div>
              </div>
            ))}
          </div>

          {/* Checklist */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--escalab-ink)' }}>Checklist da etapa</div>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: done === tarefas.length ? 'var(--escalab-brand)' : 'var(--escalab-mute)' }}>
                  {done}/{tarefas.length}
                </span>
                {isAdmin && (
                  <button onClick={() => setEditandoChecklist(v => !v)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: editandoChecklist ? 'var(--escalab-brand)' : 'var(--escalab-mute)', fontSize: 12, fontWeight: 600, padding: 2, fontFamily: 'var(--font-sans)', display: 'flex', alignItems: 'center', gap: 4 }} title="Editar checklist">
                    <Icon name="settings" size={12} /> {editandoChecklist ? 'Concluir' : 'Editar'}
                  </button>
                )}
              </div>
            </div>

            {/* Progress bar */}
            <div style={{ height: 4, background: 'var(--escalab-line)', borderRadius: 999, marginBottom: 14, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: pctProgress + '%', background: 'var(--escalab-brand)', borderRadius: 999, transition: 'width .5s var(--ease-out)' }} />
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {tarefas.map(t => {
                const feita = feitas.has(t);
                return (
                  <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderRadius: 9, background: feita ? 'var(--escalab-brand-tint)' : 'var(--escalab-paper)', transition: 'background .15s' }}>
                    <button onClick={() => toggleTarefa(t)} disabled={!isAdmin} style={{
                      width: 18, height: 18, borderRadius: 5, flexShrink: 0,
                      border: `2px solid ${feita ? 'var(--escalab-brand)' : 'var(--escalab-line)'}`,
                      background: feita ? 'var(--escalab-brand)' : '#fff',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      cursor: isAdmin ? 'pointer' : 'default', padding: 0,
                    }}>
                      {feita && <div style={{ color: '#fff' }}><Icon name="check" size={10} /></div>}
                    </button>
                    <span style={{ flex: 1, fontSize: 13.5, color: feita ? 'var(--escalab-brand-deep)' : 'var(--escalab-slate)', textDecoration: feita ? 'line-through' : 'none', lineHeight: 1.45 }}>{t}</span>
                    {editandoChecklist && isAdmin && (
                      <button onClick={() => removerTarefa(t)} title="Remover" style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 2 }}>
                        <Icon name="close" size={13} />
                      </button>
                    )}
                  </div>
                );
              })}
            </div>

            {editandoChecklist && isAdmin && (
              <div style={{ marginTop: 12, padding: '12px 14px', background: 'var(--escalab-paper)', borderRadius: 10, border: '1px dashed var(--escalab-line)' }}>
                <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
                  <input value={novaTarefa} onChange={e => setNovaTarefa(e.target.value)} placeholder="Nova tarefa do checklist…"
                    onKeyDown={e => { if (e.key === 'Enter') adicionarTarefa(); }}
                    style={{ flex: 1, border: '1px solid var(--escalab-line)', borderRadius: 7, padding: '7px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0 }} />
                  <Button size="sm" variant="primary" icon="plus" onClick={adicionarTarefa} disabled={!novaTarefa.trim()}>Adicionar</Button>
                </div>
                <button onClick={resetChecklist} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--escalab-mute)', fontSize: 11.5, fontFamily: 'var(--font-sans)', textDecoration: 'underline', padding: 0 }}>
                  Restaurar checklist padrão desta etapa
                </button>
              </div>
            )}
          </div>

          {/* Ações */}
          {user?.perfil === 'admin' && adm.status === 'em_processo' && (
            <div style={{ marginTop: 22, paddingTop: 20, borderTop: '1px solid var(--escalab-line)', display: 'flex', gap: 10, justifyContent: 'flex-end' }}>
              <Button variant="outline" onClick={onClose}>Fechar</Button>
              <Button variant="primary" icon="chev_right" onClick={() => { onAvancar(adm.id); onClose(); }}>
                {adm.etapa === 'aprovacao_rh' ? 'Admitir colaborador' : 'Avançar para próxima etapa'}
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ── Kanban Card ────────────────────────────────────────────────────────────

const KanbanCardAdmissao = ({ adm, onClick, podeArrastar, onDragStart, onDragEnd }) => {
  const [hovered, setHovered] = useState(false);
  const { done, total } = getTarefasProgress(adm);
  const pct = total > 0 ? (done / total) * 100 : 100;
  const iniciais = adm.nome.split(' ').map(n => n[0]).slice(0, 2).join('');
  const etapaEfetiva = ['triagem', 'entrevista'].includes(adm.etapa) ? 'documentacao' : adm.etapa;
  const etapaInfo = ETAPAS_ADM.find(e => e.id === etapaEfetiva) || ETAPAS_ADM[0];

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

      {/* Informações temporais + categoria */}
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 12, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, color: 'var(--escalab-mute)' }}>
          <Icon name="calendar" size={12} />
          <span style={{ fontSize: 12, color: 'var(--escalab-slate)' }}>
            {adm.dataInicio ? adm.dataInicio.split('-').reverse().join('/') : '·'}
          </span>
        </div>
        <Tag tone={CATEGORIA_TONE[adm.categoria]} size="xs">
          {adm.categoria === 'fixo' ? 'Fixo' : 'Associado'}
        </Tag>
      </div>

      {/* Progress checklist */}
      <div style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 5 }}>
          <span style={{ fontSize: 11, color: 'var(--escalab-mute)' }}>Progresso da etapa</span>
          <span style={{ fontSize: 11, fontWeight: 600, color: done === total ? 'var(--escalab-brand)' : 'var(--escalab-mute)' }}>{done}/{total}</span>
        </div>
        <div style={{ height: 4, background: 'var(--escalab-line)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ height: '100%', width: pct + '%', background: 'var(--escalab-brand)', borderRadius: 999, transition: 'width .4s' }} />
        </div>
      </div>

      {/* Gestor */}
      {adm.gestor && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, borderTop: '1px solid var(--escalab-line)', paddingTop: 10 }}>
          <div style={{ width: 20, height: 20, borderRadius: '50%', background: 'var(--escalab-brand-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--escalab-brand-deep)', flexShrink: 0 }}>
            <Icon name="user" size={11} />
          </div>
          <span style={{ fontSize: 11.5, color: 'var(--escalab-mute)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {adm.gestor.split(' ').slice(0, 2).join(' ')}
          </span>
        </div>
      )}
    </div>
  );
};

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

// ── View do novo colaborador (perfil admissao) · preencher dados ──────────────
// Reaproveita TODAS as seções de "Dados Pessoais" do perfil do colaborador
// (SECOES_ASSINATURA em data.jsx): Identificação, Contato, Endereço, Dados Bancários,
// Dados Trabalhistas. Inclui também Formação livre (lista) e auto-observação.
const ViewNovoColaborador = ({ user }) => {
  const [dados, setDados] = useState(() => {
    const stored = getDadosNovoColab(user.id) || {};
    // Pré-popula nome completo e e-mail profissional com o que veio do cadastro
    return {
      nomeCompleto: stored.nomeCompleto || user.nome || '',
      emailProfissional: stored.emailProfissional || user.email || '',
      ...stored,
    };
  });
  const [salvo, setSalvo] = useState(false);
  const set = (k, v) => { setDados(d => ({ ...d, [k]: v })); setSalvo(false); };

  function salvar() {
    salvarDadosNovoColab(user.id, { ...dados, atualizadoEm: new Date().toISOString() });
    setSalvo(true);
    setTimeout(() => setSalvo(false), 4000);
  }

  const inp = { width: '100%', border: '1px solid var(--escalab-line)', borderRadius: 9, padding: '10px 13px', fontSize: 13.5, fontFamily: 'var(--font-sans)', outline: 0, boxSizing: 'border-box', background: '#fff' };

  // Campos com 🔒 são guardados como sensíveis no servidor — durante a admissão
  // o colab ainda PODE preencher (é a fase de cadastro). O lock visual segue como
  // aviso de "este dado é sensível", igual no perfil.
  return (
    <div style={{ animation: 'fadeIn .22s var(--ease-out)', maxWidth: 880 }}>
      <div style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--escalab-brand)', marginBottom: 4 }}>Bem-vindo(a) à Escalab</div>
        <h2 style={{ fontSize: 22, fontWeight: 800, margin: 0, letterSpacing: '-.01em' }}>Complete seu cadastro</h2>
        <p style={{ fontSize: 13.5, color: 'var(--escalab-slate)', margin: '4px 0 0', lineHeight: 1.55 }}>
          Preencha seus dados pessoais. O G&amp;C vai revisar tudo antes de ativar seu acesso completo de colaborador.
        </p>
      </div>

      <Banner tone="info">
        Seu cadastro está <strong>aguardando aprovação do G&amp;C</strong>. Você pode salvar e voltar quando quiser — os dados ficam guardados aqui.
      </Banner>

      {/* Renderiza cada seção de SECOES_ASSINATURA com inputs */}
      {(typeof SECOES_ASSINATURA !== 'undefined' ? SECOES_ASSINATURA : []).map(secao => (
        <div key={secao.titulo} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '20px 22px', marginTop: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
            <Icon name={secao.icon} size={15} />
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>{secao.titulo}</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14 }}>
            {secao.campos.map(campo => (
              <label key={campo.key} style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--escalab-slate)' }}>
                  {campo.label}
                  {campo.sensivel && <span style={{ color: 'var(--escalab-brand)', marginLeft: 4 }}>🔒</span>}
                </span>
                {campo.tipo === 'select' ? (
                  <select value={dados[campo.key] || ''} onChange={e => set(campo.key, e.target.value)} style={inp}>
                    <option value="">Selecione…</option>
                    {(campo.opcoes || []).map(o => <option key={o} value={o}>{o}</option>)}
                  </select>
                ) : (
                  <input type={campo.tipo || 'text'} value={dados[campo.key] || ''} onChange={e => set(campo.key, e.target.value)}
                    placeholder={`· ${campo.label} ·`} style={inp} />
                )}
              </label>
            ))}
          </div>
        </div>
      ))}

      {/* Formação acadêmica (lista de formações) */}
      <FormacaoAdmissao user={user} dados={dados} set={set} />

      {/* Observações livres pro G&C */}
      <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '20px 22px', marginTop: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
          <Icon name="message" size={15} />
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>Observações</div>
        </div>
        <label style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--escalab-slate)' }}>
            Algo que o G&amp;C precise saber? (opcional)
          </span>
          <textarea value={dados.observacoes || ''} onChange={e => set('observacoes', e.target.value)} rows={3}
            placeholder="Restrição alimentar, acessibilidade, preferência de pronome, etc."
            style={{ ...inp, resize: 'vertical', lineHeight: 1.5 }} />
        </label>
      </div>

      {/* Botão salvar fixo no fim */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 12, marginTop: 16, padding: '14px 0', position: 'sticky', bottom: 0, background: 'linear-gradient(to top, var(--escalab-paper) 60%, transparent)' }}>
        {salvo && <span style={{ fontSize: 13, color: '#00836B', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}><Icon name="check" size={13}/> Dados salvos com sucesso</span>}
        <Button variant="primary" icon="check" onClick={salvar}>Salvar meus dados</Button>
      </div>
    </div>
  );
};

// ── Formação acadêmica · gerenciada pelo próprio colaborador na admissão ─────
const TIPOS_FORM_ADM = ['Curso','Pós-graduação','MBA','Certificação','Workshop','Graduação','Mestrado','Doutorado','Treinamento'];
const FormacaoAdmissao = ({ user, dados, set }) => {
  // Guardada dentro do mesmo `dados` (campo formacoes[])
  const lista = Array.isArray(dados.formacoes) ? dados.formacoes : [];
  const [novo, setNovo] = useState({ nome: '', instituicao: '', tipo: 'Curso', dataConclusao: '', cargaHoraria: '' });
  const setN = (k, v) => setNovo(p => ({ ...p, [k]: v }));
  function add() {
    if (!novo.nome.trim()) return;
    set('formacoes', [...lista, { id: 'f' + Date.now(), ...novo }]);
    setNovo({ nome: '', instituicao: '', tipo: 'Curso', dataConclusao: '', cargaHoraria: '' });
  }
  function remover(id) {
    set('formacoes', lista.filter(f => f.id !== id));
  }
  const inp = { border: '1px solid var(--escalab-line)', borderRadius: 8, padding: '8px 10px', fontSize: 13, fontFamily: 'var(--font-sans)', outline: 0, background: '#fff', boxSizing: 'border-box' };
  return (
    <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, padding: '20px 22px', marginTop: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
        <Icon name="trophy" size={15} />
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--escalab-mute)' }}>Formação acadêmica</div>
      </div>
      {lista.length > 0 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 14 }}>
          {lista.map(f => (
            <div key={f.id} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 130px 36px', gap: 10, alignItems: 'center', padding: '8px 12px', background: 'var(--escalab-paper)', borderRadius: 9 }}>
              <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--escalab-brand-deep)', background: 'var(--escalab-brand-tint)', borderRadius: 999, padding: '2px 8px', textAlign: 'center' }}>{f.tipo}</span>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--escalab-ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.nome}</div>
                <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)' }}>{f.instituicao || '—'} {f.cargaHoraria && `· ${f.cargaHoraria}h`}</div>
              </div>
              <div style={{ fontSize: 12, color: 'var(--escalab-slate)', textAlign: 'right' }}>{f.dataConclusao ? new Date(f.dataConclusao + 'T00:00:00').toLocaleDateString('pt-BR') : '—'}</div>
              <button onClick={() => remover(f.id)} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: '#B3261E', padding: 4 }}>
                <Icon name="close" size={13} />
              </button>
            </div>
          ))}
        </div>
      )}
      <div style={{ display: 'grid', gridTemplateColumns: '110px 2fr 1fr 110px 100px auto', gap: 8, alignItems: 'end' }}>
        <select value={novo.tipo} onChange={e => setN('tipo', e.target.value)} style={inp}>
          {TIPOS_FORM_ADM.map(t => <option key={t} value={t}>{t}</option>)}
        </select>
        <input value={novo.nome} onChange={e => setN('nome', e.target.value)} placeholder="Nome do curso/título *" style={inp} />
        <input value={novo.instituicao} onChange={e => setN('instituicao', e.target.value)} placeholder="Instituição" style={inp} />
        <input type="date" value={novo.dataConclusao} onChange={e => setN('dataConclusao', e.target.value)} style={inp} />
        <input value={novo.cargaHoraria} onChange={e => setN('cargaHoraria', e.target.value)} placeholder="CH (h)" style={inp} />
        <button onClick={add} disabled={!novo.nome.trim()}
          style={{ border: 0, borderRadius: 8, padding: '8px 14px', background: novo.nome.trim() ? 'var(--escalab-brand)' : '#E5E8EE', color: novo.nome.trim() ? '#fff' : '#6B7280', cursor: novo.nome.trim() ? 'pointer' : 'not-allowed', fontSize: 12.5, fontWeight: 700, fontFamily: 'var(--font-sans)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
          <Icon name="plus" size={11}/> Adicionar
        </button>
      </div>
    </div>
  );
};

const ScreenAdmissao = ({ user }) => {
  if (user.perfil === 'admissao') return <ViewNovoColaborador user={user} />;
  return <ScreenAdmissaoRH user={user} />;
};

const ScreenAdmissaoRH = ({ user }) => {
  const [admissoes, setAdmissoes] = useState(() => getAdmissoes());
  const [aba, setAba] = useState('kanban');
  const [modalNova, setModalNova] = useState(false);
  const [modalDetalhe, setModalDetalhe] = useState(null);
  const [sucesso, setSucesso] = useState('');
  const [pendentes, setPendentes] = useState(() => getUsuariosPendentes());
  // DnD state · mesmo padrão do KanbanRecrutamento / KanbanMovDnD
  const [arrastando, setArrastando] = useState(null);
  const [hoverEtapa, setHoverEtapa] = useState(null);
  const podeArrastarKanban = user.perfil === 'admin' || user.perfil === 'financeiro';

  function recarregar() { setAdmissoes(getAdmissoes()); }

  function moverParaEtapa(admId, novaEtapa) {
    const adm = admissoes.find(a => a.id === admId);
    if (!adm) return;
    const etapaEfetiva = ['triagem', 'entrevista'].includes(adm.etapa) ? 'documentacao' : adm.etapa;
    if (etapaEfetiva === novaEtapa) return;
    const status = novaEtapa === 'concluida' ? 'concluida' : 'em_processo';
    salvarAdmissao({ ...adm, etapa: novaEtapa, status });
    recarregar();
  }

  function handleSalvar(adm) {
    salvarAdmissao(adm);
    recarregar();
    setSucesso(`Processo de ${adm.nome.split(' ')[0]} iniciado!`);
    setTimeout(() => setSucesso(''), 4000);
  }

  function avancarEtapa(id) {
    const adm = admissoes.find(a => a.id === id);
    if (!adm) return;
    const etapaAtual = ['triagem', 'entrevista'].includes(adm.etapa) ? 'documentacao' : adm.etapa;
    const idx = ETAPAS_ADM.findIndex(e => e.id === etapaAtual);
    if (idx >= ETAPAS_ADM.length - 1) return;
    const proxEtapa = ETAPAS_ADM[idx + 1].id;
    const status = proxEtapa === 'concluida' ? 'concluida' : 'em_processo';
    salvarAdmissao({ ...adm, etapa: proxEtapa, status });
    recarregar();
  }

  const tabs = [
    { id: 'kanban',     label: 'Kanban',       icon: 'org',       count: admissoes.filter(a => a.status === 'em_processo').length },
    { id: 'concluidas', label: 'Admitidos',    icon: 'check',     count: admissoes.filter(a => a.status === 'concluida').length },
  ];
  if (user.perfil === 'admin') tabs.push({ id: 'aprovacoes', label: 'Novos acessos', icon: 'user', count: pendentes.length });

  function aprovar(id) {
    aprovarUsuario(id);
    setPendentes(getUsuariosPendentes());
    setSucesso('Acesso aprovado! O colaborador terá login completo no próximo acesso.');
    setTimeout(() => setSucesso(''), 4000);
  }
  function rejeitar(id) {
    rejeitarUsuario(id);
    setPendentes(getUsuariosPendentes());
  }

  // Admin/Financeiro veem tudo. Gestor com perm 'verAdmissaoTudo' tambem ve tudo
  // (configurado em Painel Admin > Permissoes de Gestor). Caso contrario, gestor/colab
  // ve so admissoes do proprio setor ou em que eh o gestor responsavel.
  const gestorVeTudo = user.perfil === 'gestor'
    && typeof getGestorPerms === 'function'
    && !!getGestorPerms(user.id)?.verAdmissaoTudo;
  const visiveisAdm = (user.perfil === 'admin' || user.perfil === 'financeiro' || gestorVeTudo)
    ? admissoes
    : admissoes.filter(a => !a.setor || a.setor === user.setor || a.gestor === user.nome);
  const emProcesso = visiveisAdm.filter(a => a.status === 'em_processo');
  const concluidas = visiveisAdm.filter(a => a.status === 'concluida');

  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 }}>Admissão</h2>
          <p style={{ fontSize: 13.5, color: 'var(--escalab-slate)', margin: '4px 0 0' }}>Processos seletivos e integração de novos colaboradores</p>
        </div>
        {user.perfil === 'admin' && (
          <Button variant="primary" icon="plus" onClick={() => setModalNova(true)}>Nova admissão</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: 'Em processo',    val: admissoes.filter(a => a.status === 'em_processo').length,  cor: '#E89B3B', bg: '#FFF7EB', icon: 'trend_up' },
          { label: 'Admitidos (ano)',val: admissoes.filter(a => a.status === 'concluida').length,     cor: '#00967B', bg: '#E6F5F1', icon: 'check'    },
          { label: 'Fixos',          val: admissoes.filter(a => a.categoria === 'fixo').length,       cor: '#1F4A8A', bg: '#EEF3FA', icon: 'user'     },
          { label: 'Associados',     val: admissoes.filter(a => a.categoria === 'associado').length,  cor: '#6B3FA0', bg: '#F4EEFF', icon: 'users'    },
        ].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>

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

        {/* ── KANBAN ── */}
        {aba === 'kanban' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            <div style={{ overflowX: 'auto', paddingBottom: 8 }}>
              <div style={{ display: 'grid', gridTemplateColumns: `repeat(${ETAPAS_ADM.length}, minmax(220px, 1fr))`, gap: 14, alignItems: 'start', minWidth: 900 }}>
                {ETAPAS_ADM.map(etapa => {
                  const cards = emProcesso.filter(a => {
                    const etapaEfetiva = ['triagem', 'entrevista'].includes(a.etapa) ? 'documentacao' : a.etapa;
                    return etapaEfetiva === etapa.id;
                  });
                  const dropAtivo = hoverEtapa === etapa.id && arrastando;
                  return (
                    <div key={etapa.id}
                      onDragOver={e => { if (podeArrastarKanban) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setHoverEtapa(etapa.id); } }}
                      onDragLeave={() => setHoverEtapa(h => h === etapa.id ? null : h)}
                      onDrop={e => {
                        if (!podeArrastarKanban) return;
                        e.preventDefault();
                        const admId = e.dataTransfer.getData('text/plain') || arrastando;
                        if (admId) moverParaEtapa(admId, 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' }}>
                      {/* Cabeçalho da coluna */}
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, padding: '0 2px' }}>
                        <div style={{ width: 9, height: 9, 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>

                      {/* Cards */}
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                        {cards.length === 0 ? (
                          <div style={{ border: '2px dashed var(--escalab-line)', borderRadius: 12, padding: '20px 16px', textAlign: 'center', color: 'var(--escalab-mute)', fontSize: 12.5 }}>
                            {dropAtivo ? 'Solte aqui' : 'Nenhum candidato'}
                          </div>
                        ) : (
                          cards.map(adm => (
                            <KanbanCardAdmissao
                              key={adm.id}
                              adm={adm}
                              onClick={() => setModalDetalhe(adm)}
                              podeArrastar={podeArrastarKanban}
                              onDragStart={id => setArrastando(id)}
                              onDragEnd={() => { setArrastando(null); setHoverEtapa(null); }}
                            />
                          ))
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        )}

        {/* ── CONCLUÍDAS ── */}
        {aba === 'concluidas' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            {concluidas.length === 0 ? (
              <Banner tone="info">Nenhuma admissão concluída ainda.</Banner>
            ) : (
              <div style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 14, overflow: 'hidden' }}>
                <table>
                  <thead>
                    <tr>
                      <th>Colaborador</th>
                      <th>Cargo / Setor</th>
                      <th>Categoria</th>
                      <th>Data de início</th>
                      <th>Gestor</th>
                      <th style={{ textAlign: 'center' }}>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {concluidas.map(adm => (
                      <tr key={adm.id} onClick={() => setModalDetalhe(adm)} style={{ cursor: 'pointer' }}>
                        <td>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                            <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--escalab-brand-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--escalab-brand-deep)', fontWeight: 700, fontSize: 12, flexShrink: 0 }}>
                              {adm.nome.split(' ').map(n => n[0]).slice(0, 2).join('')}
                            </div>
                            <div>
                              <div style={{ fontSize: 13.5, fontWeight: 500, color: 'var(--escalab-ink)' }}>{adm.nome.split(' ').slice(0, 2).join(' ')}</div>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div style={{ fontSize: 13, color: 'var(--escalab-ink)' }}>{adm.cargo}</div>
                          <div style={{ fontSize: 11.5, color: 'var(--escalab-mute)', marginTop: 2 }}>{adm.setor}</div>
                        </td>
                        <td><Tag tone={CATEGORIA_TONE[adm.categoria]} size="xs">{adm.categoria === 'fixo' ? 'Fixo' : `Assoc. ${TIPO_LABEL_ADM[adm.tipoAssociado] || ''}`}</Tag></td>
                        <td style={{ fontSize: 13, color: 'var(--escalab-slate)' }}>{adm.dataInicio ? adm.dataInicio.split('-').reverse().join('/') : '·'}</td>
                        <td style={{ fontSize: 12.5, color: 'var(--escalab-mute)' }}>{adm.gestor?.split(' ').slice(0, 2).join(' ')}</td>
                        <td style={{ textAlign: 'center' }}><Tag tone="success" size="xs">Admitido</Tag></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}

        {/* ── NOVOS ACESSOS (auto-cadastro aguardando aprovação) ── */}
        {aba === 'aprovacoes' && (
          <div style={{ animation: 'fadeIn .2s' }}>
            {pendentes.length === 0 ? (
              <Banner tone="info">Nenhum cadastro de novo colaborador aguardando aprovação.</Banner>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {pendentes.map(u => {
                  const d = getDadosNovoColab(u.id);
                  return (
                    <div key={u.id} style={{ background: '#fff', border: '1px solid var(--escalab-line)', borderRadius: 12, padding: '16px 18px', display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
                      <div style={{ width: 38, height: 38, borderRadius: '50%', background: u.cor || 'var(--escalab-brand)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 13, flexShrink: 0 }}>{u.iniciais}</div>
                      <div style={{ flex: 1, minWidth: 180 }}>
                        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--escalab-ink)' }}>{u.nome}</div>
                        <div style={{ fontSize: 12.5, color: 'var(--escalab-mute)' }}>{u.email}{d.telefone ? ` · ${d.telefone}` : ''}{d.cargo ? ` · ${d.cargo}` : ''}</div>
                      </div>
                      <span style={{ fontSize: 11, fontWeight: 600, color: '#B56500', background: '#FFF7EB', border: '1px solid #FFD6A3', borderRadius: 5, padding: '3px 9px' }}>Aguardando</span>
                      <div style={{ display: 'flex', gap: 8 }}>
                        <Button size="sm" variant="primary" onClick={() => aprovar(u.id)}>Aprovar acesso</Button>
                        <button onClick={() => { if (confirm('Recusar e remover este cadastro?')) rejeitar(u.id); }} style={{ border: '1px solid #F4C7C3', borderRadius: 8, background: '#FDECEC', color: '#B3261E', cursor: 'pointer', padding: '7px 12px', fontSize: 12.5, fontFamily: 'var(--font-sans)' }}>Recusar</button>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        )}

      </div>

      {modalNova && <ModalNovaAdmissao onClose={() => setModalNova(false)} onSalvar={handleSalvar} />}
      {modalDetalhe && (
        <ModalDetalheAdmissao
          adm={modalDetalhe}
          user={user}
          onClose={() => setModalDetalhe(null)}
          onAvancar={avancarEtapa}
        />
      )}
    </div>
  );
};

window.ScreenAdmissao = ScreenAdmissao;