// Solicitudes de personal — headcount del equipo a cargo + solicitudes creadas
// Reutiliza personas ya existentes en EMPLOYEES y las empresas ya definidas
// en el módulo Sociedades (Configuración), extendidas con Regional y Situación
// (que no existen en el registro base) para este dashboard de headcount.
const { useState: _sp_useState } = React;

const MI_EQUIPO = [
  { empId: 'E0094', doc: 'CC 42.887.665',       name: 'María Trujillo Henao',  cargo: 'Aux. Recursos Humanos',    area: 'Administración',  empresa: 'ASEI',         regional: 'Regional Occidente',    estado: 'activo',   situacion: 'En ejercicio' },
  { empId: 'E0247', doc: 'CC 1.087.456.231',    name: 'Andrés Felipe Mejía',   cargo: 'Operario de Clasificación', area: 'Operaciones',     empresa: 'ASEI',         regional: 'Regional Occidente',    estado: 'activo',   situacion: 'En ejercicio' },
  { empId: 'E0246', doc: 'CC 1.094.221.087',    name: 'Laura Gómez Restrepo',  cargo: 'Operaria de Planta',        area: 'Operaciones',     empresa: 'ASEI',         regional: 'Regional Occidente',    estado: 'activo',   situacion: 'En vacaciones' },
  { empId: 'E0205', doc: 'CC 10.087.231.456',   name: 'Carlos Andrés Vélez',   cargo: 'Operario de Clasificación', area: 'Operaciones',     empresa: 'ASEI',         regional: 'Regional Occidente',    estado: 'activo',   situacion: 'En ejercicio' },
  { empId: 'E0245', doc: 'CC 1.067.892.103',    name: 'Juan David Ruiz',       cargo: 'Auxiliar de Calidad',       area: 'Calidad',         empresa: 'ASEI',         regional: 'Regional Caribe',       estado: 'activo',   situacion: 'En ejercicio' },
  { empId: 'E0298', doc: 'CC 32.998.221',       name: 'Adriana Restrepo',      cargo: 'Aux. Calidad',              area: 'Calidad',         empresa: 'IA4 SAS',      regional: 'Regional Antioquia',    estado: 'activo',   situacion: 'En ejercicio' },
  { empId: 'E0244', doc: 'CC 52.487.123',       name: 'Sandra Milena Ortiz',   cargo: 'Coord. Compras',            area: 'Compras',         empresa: 'IA4 SAS',      regional: 'Regional Centro',       estado: 'activo',   situacion: 'En incapacidad' },
  { empId: 'E0198', doc: 'CC 1.098.443.221',    name: 'María Fernanda López',  cargo: 'Op. Aprovechamiento',       area: 'Aprovechamiento', empresa: 'ECOENTORNO',   regional: 'Regional Occidente',    estado: 'activo',   situacion: 'En incapacidad' },
  { empId: 'E0011', doc: 'CC 16.087.443',       name: 'Fernando Henao',        cargo: 'Operario de Clasificación', area: 'Operaciones',     empresa: 'ECOENTORNO',   regional: 'Regional Occidente',    estado: 'inactivo', situacion: 'Retirado' },
  { empId: 'E0142', doc: 'CC 1.098.221.665',    name: 'Diego Andrés Toro',     cargo: 'Aux. Aprovechamiento',      area: 'Aprovechamiento', empresa: 'ECOENTORNO',   regional: 'Regional Occidente',    estado: 'activo',   situacion: 'En ejercicio' },
  { empId: 'E0067', doc: 'CC 16.443.221',       name: 'Luis Miguel Marín',     cargo: 'Líder de Aprovechamiento',  area: 'Aprovechamiento', empresa: 'ECOENTORNO',   regional: 'Regional Occidente',    estado: 'activo',   situacion: 'En ejercicio' },
  { empId: 'E0156', doc: 'CC 1.087.665.443',    name: 'Paula Valencia Ríos',   cargo: 'Téc. Mantenimiento',        area: 'Mantenimiento',   empresa: 'ECOLOGISTICA', regional: 'Regional Occidente',    estado: 'activo',   situacion: 'En ejercicio' },
  { empId: 'E0177', doc: 'CC 75.221.487',       name: 'Jorge Iván Patiño',     cargo: 'Conductor',                 area: 'Recolección',     empresa: 'ECOLOGISTICA', regional: 'Regional Caribe',       estado: 'activo',   situacion: 'En vacaciones' },
  { empId: 'E0128', doc: 'CC 1.067.443.221',    name: 'Nicolás Cárdenas',      cargo: 'Conductor',                 area: 'Recolección',     empresa: 'ECOLOGISTICA', regional: 'Regional Caribe',       estado: 'activo',   situacion: 'En ejercicio' },
  { empId: 'E0301', doc: 'Céd. 001-2345678-9',  name: 'Yolanda Pérez Féliz',   cargo: 'Líder de Sede',             area: 'Administración',  empresa: 'BYC',          regional: 'Regional Internacional', estado: 'activo',   situacion: 'En ejercicio' },
];

const VACANTES_APROBADAS_POR_EMPRESA = { 'ASEI': 1, 'IA4 SAS': 0, 'ECOENTORNO': 1, 'ECOLOGISTICA': 1, 'BYC': 1 };

const STATE_ESTADO_SP = {
  activo:   { label: 'Activo',   pill: 'green' },
  inactivo: { label: 'Inactivo', pill: 'navy-soft' },
};

const STATE_SITUACION_SP = {
  'En ejercicio':   { pill: 'green' },
  'En vacaciones':  { pill: 'navy' },
  'En incapacidad': { pill: 'amber-soft' },
  'Retirado':       { pill: 'navy-soft' },
};

// ════════════════════════════════════════════════════════════════════════
// Ampliación de nómina · Cargo existente
// Flujo real: Nueva solicitud → Ampliación de nómina → Cargo existente →
// formulario → resumen con impacto en headcount → envío → aprobaciones
// simuladas → creación de la posición aprobada (ver data-providers.jsx).
// ════════════════════════════════════════════════════════════════════════

const AMPLIACION_FORM_EMPTY = () => ({
  cargoId: '', cantidad: 1,
  sociedad: 'ECOENTORNO', lineaNegocio: 'Aprovechamiento', sede: 'Planta Yumbo, Valle del Cauca', area: 'Operaciones',
  centroCosto: 'CC-OP-014 · Planta Yumbo', posicionJefeCodigo: 'POS-0008440',
  fechaRequerida: '01/10/2026', jornada: 'Turnos rotativos', tipoContrato: 'Término fijo',
  motivo: 'Incremento del volumen de material aprovechable', justificacion: '', proyectoRelacionado: '', archivoSoporte: '',
});

const AMP_SOCIEDADES = ['ASEI', 'IA4 SAS', 'ECOENTORNO', 'ECOLOGISTICA', 'BYC'];
const AMP_LINEAS_NEGOCIO = ['Aprovechamiento', 'Operaciones', 'Mantenimiento', 'Logística', 'Administración', 'Calidad'];
const AMP_JORNADAS = ['Tiempo completo', 'Turnos rotativos', 'Medio tiempo'];
const AMP_TIPOS_CONTRATO = ['Indefinido', 'Término fijo', 'Obra o labor'];

const AMP_TIPOS_SOLICITUD = [
  { id: 'nomina',    label: 'Ampliación de nómina', sub: 'Posición nueva, aumenta el headcount aprobado', disabled: false },
  { id: 'reemplazo', label: 'Reemplazo por vacante', sub: 'Sustituye a un colaborador que salió de la posición', disabled: true },
  { id: 'traslado',  label: 'Traslado',              sub: 'Cambia a un colaborador o una posición de ubicación', disabled: true },
];

const SOLICITUD_ESTADO_META = {
  pendiente_aprobacion: { label: 'Pendiente de aprobación', pill: 'amber-soft' },
  aprobada:             { label: 'Aprobada',                pill: 'green' },
  ejecutada:            { label: 'Ejecutada',                pill: 'green' },
  devuelta:             { label: 'Devuelta al solicitante',  pill: 'amber-soft' },
  rechazada:            { label: 'Rechazada',                pill: 'rose' },
};

const AMP_ETAPA_ESTADO_META = {
  completada:    { label: 'Completada' },
  pendiente:     { label: 'Pendiente' },
  pendiente_rq:  { label: 'Pendiente código RQ' },
  bloqueada:     { label: 'Sin iniciar' },
  devuelta:      { label: 'Devuelta' },
  rechazada:     { label: 'Rechazada' },
};
const AMP_ETAPA_PILL = {
  completada: 'green', pendiente: 'amber-soft', pendiente_rq: 'amber-soft', bloqueada: '', devuelta: 'amber-soft', rechazada: 'rose',
};

const REQ_ESTADO_META = {
  pendiente_codigo_rq: { label: 'Pendiente código RQ', pill: 'amber-soft' },
  en_temporales:        { label: 'En temporales',        pill: 'navy' },
};

const TipoSolicitudModal = ({ onClose, onContinue }) => {
  const [type, setType] = _sp_useState('nomina');
  return (
    <Modal open onClose={onClose} title="Nueva solicitud" subtitle="Selecciona el tipo de solicitud para continuar" width={520}
      footer={<>
        <button className="btn" onClick={onClose}>Cancelar</button>
        <button className="btn primary" onClick={() => onContinue(type)}>Continuar <IconChevronRight size={14} /></button>
      </>}>
      <div className="range-list">
        {AMP_TIPOS_SOLICITUD.map(t => (
          <label key={t.id} className={`range-row ${type === t.id ? 'active' : ''} ${t.disabled ? 'disabled' : ''}`}>
            <input type="radio" name="sp-tipo" checked={type === t.id} disabled={t.disabled} onChange={() => setType(t.id)} />
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 13, fontWeight: 500 }}>{t.label}</span>
                {t.disabled && <span className="nav-badge-v2">v2</span>}
              </div>
              <div className="muted" style={{ fontSize: 11.5 }}>{t.sub}</div>
            </div>
          </label>
        ))}
      </div>
    </Modal>
  );
};

const ModalidadAmpliacionModal = ({ onBack, onClose, onContinue }) => {
  const [modalidad, setModalidad] = _sp_useState('existente');
  return (
    <Modal open onClose={onClose} title="Ampliación de nómina" subtitle="¿La posición corresponde a un cargo existente o a un cargo nuevo?" width={520}
      footer={<>
        <button className="btn" onClick={onBack}><IconChevronLeft size={14} /> Volver</button>
        <button className="btn primary" onClick={() => onContinue(modalidad)}>Continuar <IconChevronRight size={14} /></button>
      </>}>
      <div className="range-list">
        <label className={`range-row ${modalidad === 'existente' ? 'active' : ''}`}>
          <input type="radio" name="sp-modalidad" checked={modalidad === 'existente'} onChange={() => setModalidad('existente')} />
          <div>
            <div style={{ fontSize: 13, fontWeight: 500 }}>Cargo existente</div>
            <div className="muted" style={{ fontSize: 11.5 }}>Aumenta el número de posiciones de un cargo ya definido en el Maestro de cargos</div>
          </div>
        </label>
        <label className={`range-row ${modalidad === 'nuevo' ? 'active' : ''}`}>
          <input type="radio" name="sp-modalidad" checked={modalidad === 'nuevo'} onChange={() => setModalidad('nuevo')} />
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 13, fontWeight: 500 }}>Cargo nuevo</span>
              <span className="nav-badge-v2">v2</span>
            </div>
            <div className="muted" style={{ fontSize: 11.5 }}>Crea un cargo que todavía no existe en el Maestro de cargos</div>
          </div>
        </label>
      </div>
    </Modal>
  );
};

const CargoNuevoStubModal = ({ onBack, onClose }) => (
  <Modal open onClose={onClose} title="Cargo nuevo" subtitle="Flujo en construcción" width={480}
    footer={<button className="btn" onClick={onBack}><IconChevronLeft size={14} /> Volver</button>}>
    <EmptyState icon="IconRocket" title="Este flujo se define en una próxima iteración"
      description="La creación de cargos nuevos junto con su posición inicial se construirá en la siguiente fase. Por ahora, usa 'Cargo existente' para ampliar un cargo ya definido en el Maestro de cargos." />
  </Modal>
);

const AmpCargoInfoCard = ({ cargo }) => (
  <div className="amp-cargo-card">
    <div className="amp-cargo-card-head">
      <div>
        <div className="muted-xs">{cargo.id}</div>
        <div style={{ fontWeight: 700, fontSize: 14 }}>{cargo.nombre}</div>
      </div>
      <span className="pill navy">{cargo.nivel}</span>
    </div>
    <div className="amp-cargo-grid">
      <div><span className="muted-xs">Área</span><div style={{ fontSize: 12.5 }}>{cargo.area}</div></div>
      <div><span className="muted-xs">Nivel organizacional</span><div style={{ fontSize: 12.5 }}>{cargo.nivel}</div></div>
      <div><span className="muted-xs">Riesgo laboral</span><div style={{ fontSize: 12.5 }}>{cargo.riesgoLaboral || '—'}</div></div>
      <div><span className="muted-xs">Rango salarial</span><div className="mono" style={{ fontSize: 12.5 }}>{cargo.rangoSalarial || '—'}</div></div>
    </div>
    {cargo.perfil && (
      <div style={{ marginTop: 10 }}>
        <span className="muted-xs">Perfil</span>
        <div style={{ fontSize: 12.5, marginTop: 2 }}>{cargo.perfil}</div>
      </div>
    )}
    {[
      ['Competencias requeridas', cargo.competencias],
      ['Capacitaciones obligatorias', cargo.capacitaciones],
      ['Exámenes médicos', cargo.examenesMedicos],
      ['Dotación y EPP', cargo.dotacionEPP],
    ].map(([label, list]) => (list && list.length > 0) && (
      <div key={label} style={{ marginTop: 10 }}>
        <span className="muted-xs">{label}</span>
        <div className="signer-chips" style={{ marginTop: 4 }}>
          {list.map((t, i) => <span key={i} className="signer-chip">{t}</span>)}
        </div>
      </div>
    ))}
    <div className="amp-cargo-note">
      <IconInfo size={13} /> La solicitud utilizará la configuración vigente del cargo. Los cambios al perfil deben realizarse desde el Maestro de cargos.
    </div>
  </div>
);

const AmpliacionCargoExistenteForm = ({ form, setForm, onBack, onClose, onContinue }) => {
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const cargos = window.OrgDataStore.getCargos().filter(c => c.perfil);
  const cargo = form.cargoId ? window.OrgDataStore.getCargoById(form.cargoId) : null;
  const posiciones = window.OrgDataStore.getPosiciones();
  const canContinue = form.cargoId && Number(form.cantidad) >= 1 && form.sociedad && form.lineaNegocio
    && form.sede.trim() && form.area.trim() && form.centroCosto.trim() && form.posicionJefeCodigo
    && form.fechaRequerida && form.jornada && form.tipoContrato && form.motivo.trim() && form.justificacion.trim();

  return (
    <Modal open onClose={onClose} title="Ampliación de nómina · Cargo existente" subtitle="Completa la información de la nueva posición" width={900}
      footer={<>
        <button className="btn" onClick={onBack}><IconChevronLeft size={14} /> Volver</button>
        <button className="btn primary" disabled={!canContinue} onClick={onContinue}>Ver resumen <IconChevronRight size={14} /></button>
      </>}>
      <div className="form-grid">
        <FormField label="Cargo existente" span={6}>
          <select className="form-input" value={form.cargoId} onChange={e => set('cargoId', e.target.value)}>
            <option value="">— Selecciona un cargo del Maestro —</option>
            {cargos.map(c => <option key={c.id} value={c.id}>{c.nombre} ({c.id})</option>)}
          </select>
        </FormField>
      </div>

      {cargo && <AmpCargoInfoCard cargo={cargo} />}

      <div className="form-grid" style={{ marginTop: 16 }}>
        <FormField label="Cantidad de posiciones" span={3}>
          <input className="form-input" type="number" min="1" value={form.cantidad} onChange={e => set('cantidad', Math.max(1, Number(e.target.value) || 1))} />
        </FormField>
        <FormField label="Sociedad" span={3}>
          <select className="form-input" value={form.sociedad} onChange={e => set('sociedad', e.target.value)}>
            {AMP_SOCIEDADES.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
        </FormField>
        <FormField label="Línea de negocio" span={3}>
          <select className="form-input" value={form.lineaNegocio} onChange={e => set('lineaNegocio', e.target.value)}>
            {AMP_LINEAS_NEGOCIO.map(l => <option key={l} value={l}>{l}</option>)}
          </select>
        </FormField>
        <FormField label="Sede o regional" span={3}>
          <input className="form-input" value={form.sede} onChange={e => set('sede', e.target.value)} placeholder="Ej: Planta Yumbo, Valle del Cauca" />
        </FormField>
        <FormField label="Área o proceso" span={3}>
          <input className="form-input" value={form.area} onChange={e => set('area', e.target.value)} placeholder="Ej: Operaciones" />
        </FormField>
        <FormField label="Centro de costo" span={3}>
          <input className="form-input" value={form.centroCosto} onChange={e => set('centroCosto', e.target.value)} placeholder="Ej: CC-OP-014 · Planta Yumbo" />
        </FormField>
        <FormField label="Posición jefe" span={3}>
          <select className="form-input" value={form.posicionJefeCodigo} onChange={e => set('posicionJefeCodigo', e.target.value)}>
            <option value="">— Selecciona la posición jefe —</option>
            {posiciones.map(p => <option key={p.codigo} value={p.codigo}>{p.codigo} · {p.cargo}</option>)}
          </select>
        </FormField>
        <FormField label="Fecha requerida" span={3}>
          <window.DatePickerCO value={form.fechaRequerida} onChange={v => set('fechaRequerida', v)} placeholder="Seleccionar fecha" />
        </FormField>
        <FormField label="Jornada o turno" span={3}>
          <select className="form-input" value={form.jornada} onChange={e => set('jornada', e.target.value)}>
            {AMP_JORNADAS.map(j => <option key={j} value={j}>{j}</option>)}
          </select>
        </FormField>
        <FormField label="Tipo de contrato previsto" span={3}>
          <select className="form-input" value={form.tipoContrato} onChange={e => set('tipoContrato', e.target.value)}>
            {AMP_TIPOS_CONTRATO.map(t => <option key={t} value={t}>{t}</option>)}
          </select>
        </FormField>
        <FormField label="Motivo de la ampliación" span={6}>
          <input className="form-input" value={form.motivo} onChange={e => set('motivo', e.target.value)} placeholder="Ej: Incremento del volumen de material aprovechable" />
        </FormField>
        <FormField label="Justificación detallada" span={6}>
          <textarea className="form-input" rows={3} value={form.justificacion} onChange={e => set('justificacion', e.target.value)} placeholder="Explica en detalle la necesidad de esta posición" />
        </FormField>
        <FormField label="Proyecto, contrato u operación relacionada (si aplica)" span={6}>
          <input className="form-input" value={form.proyectoRelacionado} onChange={e => set('proyectoRelacionado', e.target.value)} placeholder="Opcional" />
        </FormField>
        <FormField label="Archivo de soporte (opcional)" span={6}>
          <input className="form-input" type="file" onChange={e => set('archivoSoporte', e.target.files[0]?.name || '')} />
          {form.archivoSoporte && <div className="muted mono" style={{ fontSize: 11.5, marginTop: 4 }}>{form.archivoSoporte}</div>}
        </FormField>
      </div>
    </Modal>
  );
};

const AmpliacionResumenModal = ({ form, onBack, onClose, onConfirm }) => {
  const cargo = window.OrgDataStore.getCargoById(form.cargoId);
  const posJefe = window.OrgDataStore.getPosicionByCodigo(form.posicionJefeCodigo);
  const hc = window.OrgDataStore.getHeadcountPorCargo(form.cargoId);
  const cant = Number(form.cantidad) || 1;

  return (
    <Modal open onClose={onClose} title="Revisar antes de enviar" subtitle="Confirma la información de la solicitud" width={640}
      footer={<>
        <button className="btn" onClick={onBack}><IconChevronLeft size={14} /> Volver</button>
        <button className="btn primary" onClick={onConfirm}><IconCheck size={14} /> Enviar solicitud</button>
      </>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div>
          <div className="muted-xs" style={{ marginBottom: 6 }}>Datos de la solicitud</div>
          <div className="amp-resumen-grid">
            <div><span className="muted-xs">Tipo</span><div>Ampliación de nómina · Cargo existente</div></div>
            <div><span className="muted-xs">Cantidad</span><div>{cant} posición{cant === 1 ? '' : 'es'}</div></div>
            <div><span className="muted-xs">Fecha requerida</span><div className="mono">{form.fechaRequerida}</div></div>
            <div><span className="muted-xs">Tipo de contrato</span><div>{form.tipoContrato}</div></div>
          </div>
        </div>
        <div>
          <div className="muted-xs" style={{ marginBottom: 6 }}>Cargo seleccionado</div>
          <div className="amp-resumen-grid">
            <div><span className="muted-xs">Cargo</span><div>{cargo ? cargo.nombre : '—'} <span className="muted mono" style={{ fontSize: 11 }}>({form.cargoId})</span></div></div>
            <div><span className="muted-xs">Sociedad</span><div>{form.sociedad}</div></div>
            <div><span className="muted-xs">Línea de negocio</span><div>{form.lineaNegocio}</div></div>
            <div><span className="muted-xs">Centro de costo</span><div className="mono">{form.centroCosto}</div></div>
          </div>
        </div>
        <div>
          <div className="muted-xs" style={{ marginBottom: 6 }}>Ubicación de la posición</div>
          <div className="amp-resumen-grid">
            <div><span className="muted-xs">Sede o regional</span><div>{form.sede}</div></div>
            <div><span className="muted-xs">Área o proceso</span><div>{form.area}</div></div>
          </div>
        </div>
        <div>
          <div className="muted-xs" style={{ marginBottom: 6 }}>Posición jefe</div>
          <div>{posJefe ? <span><span className="mono">{posJefe.codigo}</span> · {posJefe.cargo}</span> : '—'}</div>
        </div>
        <div>
          <div className="muted-xs" style={{ marginBottom: 8 }}>Impacto proyectado sobre headcount · {cargo ? cargo.nombre : ''}</div>
          <div className="org-exp-before-after">
            <div className="org-exp-ba-col">
              <h5>Actual</h5>
              <div className="org-exp-stat-row">
                <div className="org-exp-stat"><span className="org-exp-stat-num" style={{ fontSize: 20 }}>{hc.aprobado}</span><span className="muted-xs">Aprobado</span></div>
                <div className="org-exp-stat"><span className="org-exp-stat-num" style={{ fontSize: 20 }}>{hc.real}</span><span className="muted-xs">Real</span></div>
                <div className="org-exp-stat"><span className="org-exp-stat-num" style={{ fontSize: 20 }}>{hc.vacantes}</span><span className="muted-xs">Vacantes</span></div>
              </div>
            </div>
            <div className="org-exp-ba-col">
              <h5>Después de aprobar</h5>
              <div className="org-exp-stat-row">
                <div className="org-exp-stat"><span className="org-exp-stat-num" style={{ fontSize: 20, color: 'var(--teal-800)' }}>{hc.aprobado + cant}</span><span className="muted-xs">Aprobadas</span></div>
                <div className="org-exp-stat"><span className="org-exp-stat-num" style={{ fontSize: 20 }}>{hc.real}</span><span className="muted-xs">Ocupadas</span></div>
                <div className="org-exp-stat"><span className="org-exp-stat-num" style={{ fontSize: 20, color: 'var(--rose-600)' }}>{hc.vacantes + cant}</span><span className="muted-xs">Vacante{(hc.vacantes + cant) === 1 ? '' : 's'}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
};

const AmpliacionConfirmacionModal = ({ solicitud, onClose, onVerSolicitud }) => (
  <Modal open onClose={onClose} title="Solicitud enviada" subtitle={`Código ${solicitud.id}`} width={480}
    footer={<button className="btn primary" onClick={onClose}>Cerrar</button>}>
    <EmptyState icon="IconCheck" title="Tu solicitud quedó pendiente de aprobación"
      description={`La solicitud ${solicitud.id} inició su recorrido de aprobaciones. Todavía no se crea ninguna posición — eso ocurre solo al completarse la última aprobación.`} />
    <button className="btn" style={{ width: '100%', justifyContent: 'center', marginTop: 8 }} onClick={onVerSolicitud}>
      <IconExternal size={14} /> Ver solicitud
    </button>
  </Modal>
);

const PosicionCreadaModal = ({ posicion, solicitud, onClose, onVerOrganigrama, onVerRequisicion }) => (
  <Modal open onClose={onClose} title="Posición creada" subtitle={`Resultado de ${solicitud.id}`} width={480}
    footer={<button className="btn" onClick={onClose}>Seguir en la solicitud</button>}>
    <EmptyState icon="IconCheck" title={`${posicion.codigo} · ${posicion.cargo}`}
      description="Se creó como posición Activa y Vacante, asociada al cargo existente. El headcount aprobado ya refleja este cambio." />
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
      <button className="btn" style={{ justifyContent: 'flex-start' }} onClick={onVerOrganigrama}><IconSitemap size={14} /> Ver posición en el Organigrama aprobado</button>
      <button className="btn" style={{ justifyContent: 'flex-start' }} onClick={onVerRequisicion}><IconSearch size={14} /> Revisar requisición</button>
      <button className="btn" style={{ justifyContent: 'flex-start' }} onClick={onClose}><IconExternal size={14} /> Ver solicitud</button>
    </div>
  </Modal>
);

const RequisicionDetalleModal = ({ solicitud, onClose }) => {
  const req = window.OrgDataStore.getRequisicionById(solicitud.requisicionId);
  if (!req) return null;
  const meta = REQ_ESTADO_META[req.estado] || {};
  return (
    <Modal open onClose={onClose} title="Requisición ATS" subtitle={req.id} width={480} footer={<button className="btn" onClick={onClose}>Cerrar</button>}>
      <div className="amp-resumen-grid">
        <div><span className="muted-xs">Posición</span><div className="mono">{req.posicionCodigo}</div></div>
        <div><span className="muted-xs">Solicitud de origen</span><div className="mono">{req.solicitudOrigenId}</div></div>
        <div><span className="muted-xs">Estado</span><div><span className={`pill ${meta.pill}`}>{meta.label}</span></div></div>
        <div><span className="muted-xs">Código RQ</span><div className="mono">{req.codigoRQ || 'Pendiente'}</div></div>
      </div>
      <p className="muted" style={{ fontSize: 12, marginTop: 14 }}>
        El equipo de Reclutamiento recibió la referencia de esta posición vacante para iniciar su cobertura.
      </p>
    </Modal>
  );
};

const SolicitudDetalleModal = ({ solicitudId, onClose, onChange }) => {
  const [solicitud, setSolicitud] = _sp_useState(() => window.OrgDataStore.getSolicitudById(solicitudId));
  const [decisionEtapa, setDecisionEtapa] = _sp_useState(null); // null | 'devolver' | 'rechazar'
  const [comentario, setComentario] = _sp_useState('');
  const [rqCodigo, setRqCodigo] = _sp_useState('');
  const [justCreatedPos, setJustCreatedPos] = _sp_useState(null);
  const [showRequisicion, setShowRequisicion] = _sp_useState(false);

  const refresh = () => setSolicitud({ ...window.OrgDataStore.getSolicitudById(solicitudId) });

  const decidir = (decision) => {
    const before = solicitud.posicionCreadaCodigo;
    const updated = window.OrgDataStore.decidirEtapaSolicitud(solicitudId, decision, comentario.trim() || null);
    setComentario(''); setDecisionEtapa(null);
    refresh();
    onChange && onChange();
    if (!before && updated && updated.posicionCreadaCodigo) {
      setJustCreatedPos(window.OrgDataStore.getPosicionByCodigo(updated.posicionCreadaCodigo));
    }
  };

  const guardarRQ = () => {
    if (!rqCodigo.trim()) return;
    window.OrgDataStore.registrarCodigoRQ(solicitudId, rqCodigo.trim());
    setRqCodigo('');
    refresh();
    onChange && onChange();
  };

  if (!solicitud) return null;
  const estMeta = SOLICITUD_ESTADO_META[solicitud.estado] || { label: solicitud.estado, pill: '' };

  return (
    <>
      <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
        <div className="modal" style={{ maxWidth: 720, height: 'calc(100vh - 64px)' }}>
          <div className="modal-head">
            <div>
              <div className="muted mono" style={{ fontSize: 11 }}>{solicitud.id}</div>
              <div className="modal-title">{solicitud.tipo} · {solicitud.modalidad}</div>
              <div className="modal-sub">
                {solicitud.cargoNombre} · {solicitud.sociedad} · <span className={`pill ${estMeta.pill}`} style={{ marginLeft: 4 }}>{estMeta.label}</span>
              </div>
            </div>
            <button className="icon-btn" onClick={onClose} title="Cerrar">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
            </button>
          </div>
          <div className="modal-body">
            <div className="amp-resumen-grid" style={{ marginBottom: 18 }}>
              <div><span className="muted-xs">Cantidad</span><div>{solicitud.cantidad} posición{solicitud.cantidad === 1 ? '' : 'es'}</div></div>
              <div><span className="muted-xs">Sede</span><div>{solicitud.sede}</div></div>
              <div><span className="muted-xs">Centro de costo</span><div className="mono">{solicitud.centroCosto}</div></div>
              <div><span className="muted-xs">Posición jefe</span><div className="mono">{solicitud.posicionJefeCodigo}</div></div>
              <div><span className="muted-xs">Fecha requerida</span><div className="mono">{solicitud.fechaRequerida}</div></div>
              <div><span className="muted-xs">Fecha de solicitud</span><div className="mono">{solicitud.fechaSolicitud}</div></div>
            </div>

            {solicitud.posicionCreadaCodigo && (
              <div className="amp-pos-creada-banner">
                <IconCheck size={16} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 13 }}>Posición creada: <span className="mono">{solicitud.posicionCreadaCodigo}</span></div>
                  <div className="muted" style={{ fontSize: 12 }}>Activa · Vacante · originada por {solicitud.id}</div>
                </div>
                <button className="btn" style={{ padding: '5px 11px', fontSize: 12 }}
                  onClick={() => { window.__navigateToModule && window.__navigateToModule('orgchart', { tab: 'aprobado', focusCode: solicitud.posicionCreadaCodigo }); }}>
                  <IconSitemap size={13} /> Ver en el Organigrama
                </button>
              </div>
            )}

            <div className="muted-xs" style={{ marginBottom: 10 }}>Timeline de etapas</div>
            <div className="amp-timeline">
              {solicitud.etapas.map((et, i) => {
                const meta = AMP_ETAPA_ESTADO_META[et.estado] || { label: et.estado };
                const pill = AMP_ETAPA_PILL[et.estado] || '';
                const esActual = et.estado === 'pendiente';
                const esActualRQ = et.estado === 'pendiente_rq';
                return (
                  <div key={i} className={`amp-timeline-step ${et.estado}`}>
                    <div className="amp-timeline-dot"><span>{i + 1}</span></div>
                    <div className="amp-timeline-body">
                      <div className="amp-timeline-head">
                        <div style={{ fontWeight: 700, fontSize: 13 }}>{et.nombre}</div>
                        <span className={`pill ${pill}`} style={{ fontSize: 10.5 }}>{meta.label}</span>
                      </div>
                      <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{et.responsableResuelto || et.responsable}</div>
                      {et.nota && <div className="muted" style={{ fontSize: 11, marginTop: 3 }}>{et.nota}</div>}
                      {et.fecha && (
                        <div className="muted mono" style={{ fontSize: 10.5, marginTop: 4 }}>
                          {et.decididoPor} · {et.fecha}{et.comentario ? ` · "${et.comentario}"` : ''}
                        </div>
                      )}

                      {esActual && et.accionable && (
                        <div className="amp-timeline-actions">
                          {decisionEtapa ? (
                            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
                              <textarea className="form-input" rows={2}
                                placeholder={decisionEtapa === 'rechazar' ? 'Motivo del rechazo (obligatorio)' : 'Comentario para el solicitante (obligatorio)'}
                                value={comentario} onChange={e => setComentario(e.target.value)} />
                              <div style={{ display: 'flex', gap: 8 }}>
                                <button className="btn" onClick={() => { setDecisionEtapa(null); setComentario(''); }}>Cancelar</button>
                                <button className={`btn ${decisionEtapa === 'rechazar' ? 'danger' : 'primary'}`} disabled={!comentario.trim()} onClick={() => decidir(decisionEtapa)}>
                                  Confirmar {decisionEtapa === 'rechazar' ? 'rechazo' : 'devolución'}
                                </button>
                              </div>
                            </div>
                          ) : (
                            <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                              <button className="btn primary" onClick={() => decidir('aprobar')}><IconCheck size={13} /> Aprobar</button>
                              <button className="btn" onClick={() => setDecisionEtapa('devolver')}>Devolver</button>
                              <button className="btn danger" onClick={() => setDecisionEtapa('rechazar')}>Rechazar</button>
                            </div>
                          )}
                        </div>
                      )}

                      {esActualRQ && (
                        <div className="amp-timeline-actions">
                          <div style={{ display: 'flex', gap: 8, marginTop: 8, alignItems: 'flex-start' }}>
                            <input className="form-input" style={{ maxWidth: 220 }} placeholder="Código RQ de la temporal" value={rqCodigo} onChange={e => setRqCodigo(e.target.value)} />
                            <button className="btn primary" disabled={!rqCodigo.trim()} onClick={guardarRQ}><IconCheck size={13} /> Registrar código RQ</button>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="modal-foot">
            <button className="btn" onClick={onClose}>Cerrar</button>
          </div>
        </div>
      </div>

      {justCreatedPos && (
        <PosicionCreadaModal
          posicion={justCreatedPos} solicitud={solicitud}
          onClose={() => setJustCreatedPos(null)}
          onVerOrganigrama={() => {
            setJustCreatedPos(null); onClose();
            window.__navigateToModule && window.__navigateToModule('orgchart', { tab: 'aprobado', focusCode: justCreatedPos.codigo });
          }}
          onVerRequisicion={() => { setJustCreatedPos(null); setShowRequisicion(true); }}
        />
      )}
      {showRequisicion && <RequisicionDetalleModal solicitud={solicitud} onClose={() => setShowRequisicion(false)} />}
    </>
  );
};

const NuevaSolicitudFlow = ({ onCreated }) => {
  const [step, setStep] = _sp_useState(null); // null | 'tipo' | 'modalidad' | 'nuevo-stub' | 'formulario' | 'resumen' | 'confirmacion'
  const [form, setForm] = _sp_useState(AMPLIACION_FORM_EMPTY());
  const [solicitudCreada, setSolicitudCreada] = _sp_useState(null);

  const close = () => { setStep(null); setForm(AMPLIACION_FORM_EMPTY()); setSolicitudCreada(null); };

  const enviar = () => {
    const cargo = window.OrgDataStore.getCargoById(form.cargoId);
    const posJefe = window.OrgDataStore.getPosicionByCodigo(form.posicionJefeCodigo);
    const solicitud = window.OrgDataStore.crearSolicitudAmpliacion({
      cargoId: form.cargoId, cargoNombre: cargo ? cargo.nombre : '',
      cantidad: Number(form.cantidad) || 1,
      sociedad: form.sociedad, lineaNegocio: form.lineaNegocio, area: form.area, sede: form.sede, centroCosto: form.centroCosto,
      posicionJefeId: posJefe ? posJefe.id : null, posicionJefeCodigo: form.posicionJefeCodigo, posicionJefeLabel: posJefe ? posJefe.cargo : '',
      fechaRequerida: form.fechaRequerida, fechaRequeridaISO: window.dateCO_to_ISO ? window.dateCO_to_ISO(form.fechaRequerida) : '',
      jornada: form.jornada, tipoContrato: form.tipoContrato,
      motivo: form.motivo, justificacion: form.justificacion, proyectoRelacionado: form.proyectoRelacionado,
      archivoSoporte: form.archivoSoporte,
    });
    setSolicitudCreada(solicitud);
    setStep('confirmacion');
    onCreated && onCreated(solicitud.id);
  };

  return (
    <>
      <button className="btn primary" onClick={() => setStep('tipo')}><IconPlus size={14} /> Nueva solicitud</button>
      {step === 'tipo' && (
        <TipoSolicitudModal onClose={close} onContinue={() => setStep('modalidad')} />
      )}
      {step === 'modalidad' && (
        <ModalidadAmpliacionModal onBack={() => setStep('tipo')} onClose={close}
          onContinue={(modalidad) => setStep(modalidad === 'existente' ? 'formulario' : 'nuevo-stub')} />
      )}
      {step === 'nuevo-stub' && (
        <CargoNuevoStubModal onBack={() => setStep('modalidad')} onClose={close} />
      )}
      {step === 'formulario' && (
        <AmpliacionCargoExistenteForm form={form} setForm={setForm}
          onBack={() => setStep('modalidad')} onClose={close} onContinue={() => setStep('resumen')} />
      )}
      {step === 'resumen' && (
        <AmpliacionResumenModal form={form} onBack={() => setStep('formulario')} onClose={close} onConfirm={enviar} />
      )}
      {step === 'confirmacion' && solicitudCreada && (
        <AmpliacionConfirmacionModal solicitud={solicitudCreada} onClose={close}
          onVerSolicitud={() => { close(); onCreated && onCreated(solicitudCreada.id, { openDetail: true }); }} />
      )}
    </>
  );
};

const AmpliacionesList = ({ refreshKey, onOpenDetalle }) => {
  const solicitudes = window.OrgDataStore.getSolicitudes();
  if (solicitudes.length === 0) {
    return (
      <div className="muted" style={{ fontSize: 12.5, padding: '4px 2px 22px' }}>
        Ninguna solicitud de ampliación de nómina todavía. Usa "Nueva solicitud" para iniciar una.
      </div>
    );
  }
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 12, marginBottom: 22 }}>
      {solicitudes.map(s => {
        const meta = SOLICITUD_ESTADO_META[s.estado] || { label: s.estado, pill: '' };
        return (
          <div key={s.id} className="card" style={{ padding: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div className="muted mono" style={{ fontSize: 11 }}>{s.id}</div>
                <div style={{ fontWeight: 700, fontSize: 13.5, marginTop: 2 }}>{s.tipo}</div>
                <div className="muted" style={{ fontSize: 12 }}>{s.cargoNombre} · {s.sociedad}</div>
              </div>
              <span className={`pill ${meta.pill}`}>{meta.label}</span>
            </div>
            {s.posicionCreadaCodigo && (
              <div className="muted mono" style={{ fontSize: 11, marginTop: 10 }}>Posición: {s.posicionCreadaCodigo}</div>
            )}
            {s.posicionAsociadaId && !s.posicionCreadaCodigo && (
              <div className="muted mono" style={{ fontSize: 11, marginTop: 10 }}>
                Posición asociada: {(window.OrgDataStore.getPosiciones().find(p => p.id === s.posicionAsociadaId) || {}).codigo || '—'}
              </div>
            )}
            {s.estadoCierre === 'cerrada' && (
              <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>
                Cerrada por contratación directa · <span className="mono">{s.posicionCubiertaCodigo}</span>
              </div>
            )}
            <button className="btn" style={{ marginTop: 12, padding: '5px 11px', fontSize: 12 }} onClick={() => onOpenDetalle(s.id)}>Ver detalle</button>
          </div>
        );
      })}
    </div>
  );
};

const SolicitudesPersonal = () => {
  const [tab, setTab] = _sp_useState('equipo'); // equipo | solicitudes
  const [filtroEmpresa, setFiltroEmpresa] = _sp_useState('todas');
  const [filtroArea, setFiltroArea] = _sp_useState('todas');
  const [filtroRegional, setFiltroRegional] = _sp_useState('todas');
  const [ampRefreshKey, setAmpRefreshKey] = _sp_useState(0);
  const [detalleAmpId, setDetalleAmpId] = _sp_useState(null);

  // Consume una sola vez la pista de navegación dejada por otro módulo
  // (ej. la Contratación directa desde Empleados, al cerrar la solicitud).
  React.useEffect(() => {
    if (window.__pendingModuleHint && window.__pendingModuleHint.openSolicitudId) {
      const { openSolicitudId } = window.__pendingModuleHint;
      delete window.__pendingModuleHint;
      setTab('solicitudes');
      setDetalleAmpId(openSolicitudId);
    }
  }, []);

  const bumpAmpliaciones = () => setAmpRefreshKey(k => k + 1);
  const onSolicitudCreada = (id, opts) => {
    bumpAmpliaciones();
    setTab('solicitudes');
    if (opts && opts.openDetail) setDetalleAmpId(id);
  };

  const empresas = [...new Set(MI_EQUIPO.map(p => p.empresa))];
  const areas = [...new Set(MI_EQUIPO.map(p => p.area))];
  const regionales = [...new Set(MI_EQUIPO.map(p => p.regional))];

  const equipoFiltrado = MI_EQUIPO
    .filter(p => filtroEmpresa === 'todas' || p.empresa === filtroEmpresa)
    .filter(p => filtroArea === 'todas' || p.area === filtroArea)
    .filter(p => filtroRegional === 'todas' || p.regional === filtroRegional);

  const headcountReal = equipoFiltrado.filter(p => p.estado === 'activo').length;
  const vacantes = filtroEmpresa === 'todas'
    ? Object.values(VACANTES_APROBADAS_POR_EMPRESA).reduce((a, b) => a + b, 0)
    : (VACANTES_APROBADAS_POR_EMPRESA[filtroEmpresa] || 0);
  const headcountAprobado = headcountReal + vacantes;
  const pctOcupacion = headcountAprobado > 0 ? Math.round((headcountReal / headcountAprobado) * 100) : 0;

  const empresaCounts = empresas.map(e => ({ empresa: e, count: MI_EQUIPO.filter(p => p.empresa === e).length }));

  return (
    <div className="main" data-screen-label="Solicitudes de personal">
      <div className="page-head">
        <div>
          <h1 className="page-title">Solicitudes de personal</h1>
          <div className="page-subtitle">
            <b>{MI_EQUIPO.length} colaboradores</b> en tu equipo a cargo, distribuidos en {empresas.length} sociedades
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <NuevaSolicitudFlow onCreated={onSolicitudCreada} />
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 14, marginBottom: 22 }}>
        {empresaCounts.map(({ empresa, count }) => (
          <div key={empresa} className="card" style={{ padding: 16 }}>
            <div className="muted-xs">{empresa}</div>
            <div style={{ fontSize: 28, fontWeight: 800, marginTop: 4 }}>{count}</div>
            <div className="muted" style={{ fontSize: 12 }}>colaborador{count === 1 ? '' : 'es'}</div>
          </div>
        ))}
      </div>

      <div className="doc-tabs">
        <button className={`doc-tab ${tab === 'equipo' ? 'active' : ''}`} onClick={() => setTab('equipo')}>Mi equipo</button>
        <button className={`doc-tab ${tab === 'solicitudes' ? 'active' : ''}`} onClick={() => setTab('solicitudes')}>Mis solicitudes</button>
      </div>

      {tab === 'equipo' && (
        <>
          <div className="sst-quickfilter" style={{ marginTop: 16, marginBottom: 16 }}>
            <select value={filtroEmpresa} onChange={e => setFiltroEmpresa(e.target.value)} style={{ fontSize: 12.5, padding: '6px 10px' }}>
              <option value="todas">Todas las empresas</option>
              {empresas.map(e => <option key={e} value={e}>{e}</option>)}
            </select>
            <select value={filtroArea} onChange={e => setFiltroArea(e.target.value)} style={{ fontSize: 12.5, padding: '6px 10px' }}>
              <option value="todas">Todas las áreas</option>
              {areas.map(a => <option key={a} value={a}>{a}</option>)}
            </select>
            <select value={filtroRegional} onChange={e => setFiltroRegional(e.target.value)} style={{ fontSize: 12.5, padding: '6px 10px' }}>
              <option value="todas">Todas las regionales</option>
              {regionales.map(r => <option key={r} value={r}>{r}</option>)}
            </select>
          </div>

          <div className="ats-kpis" style={{ marginBottom: 20 }}>
            <div className="ats-kpi">
              <div className="ats-kpi-icon navy"><IconUsers size={16} /></div>
              <div>
                <div className="ats-kpi-num">{headcountAprobado}</div>
                <div className="ats-kpi-lbl">Headcount aprobado</div>
              </div>
            </div>
            <div className="ats-kpi">
              <div className="ats-kpi-icon green"><IconCheck size={16} /></div>
              <div>
                <div className="ats-kpi-num">{headcountReal}</div>
                <div className="ats-kpi-lbl">Headcount real</div>
              </div>
            </div>
            <div className="ats-kpi">
              <div className="ats-kpi-icon amber"><IconAlert size={16} /></div>
              <div>
                <div className="ats-kpi-num">{vacantes}</div>
                <div className="ats-kpi-lbl">Vacantes</div>
              </div>
            </div>
            <div className="ats-kpi">
              <div className="ats-kpi-icon blue"><IconBarChart size={16} /></div>
              <div>
                <div className="ats-kpi-num">{pctOcupacion}%</div>
                <div className="ats-kpi-lbl">Porcentaje de ocupación</div>
              </div>
            </div>
          </div>

          <div className="doc-list-card">
            <table className="doc-table">
              <thead>
                <tr>
                  <th>Cédula</th><th>Nombre</th><th>Cargo</th><th>Regional</th><th>Estado</th><th>Situación</th><th></th>
                </tr>
              </thead>
              <tbody>
                {equipoFiltrado.map(p => {
                  const est = STATE_ESTADO_SP[p.estado];
                  const sit = STATE_SITUACION_SP[p.situacion] || { pill: 'navy-soft' };
                  return (
                    <tr key={p.empId}>
                      <td className="mono muted">{p.doc}</td>
                      <td style={{ fontWeight: 500 }}>{p.name}</td>
                      <td>{p.cargo}</td>
                      <td>{p.regional}</td>
                      <td><span className={`pill ${est.pill}`}>{est.label}</span></td>
                      <td><span className={`pill ${sit.pill}`}>{p.situacion}</span></td>
                      <td>
                        <div className="doc-actions">
                          <button className="icon-action" title="Ver posición" onClick={() => window.__navigateToEmployee && window.__navigateToEmployee(p.empId)}><IconExternal size={14} /></button>
                          <button className="icon-action" title="Enviar comunicación"><IconMegaphone size={14} /></button>
                        </div>
                      </td>
                    </tr>
                  );
                })}
                {equipoFiltrado.length === 0 && (
                  <tr><td colSpan={7} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>Ningún colaborador coincide con los filtros.</td></tr>
                )}
              </tbody>
            </table>
          </div>
        </>
      )}

      {tab === 'solicitudes' && (
        <div style={{ marginTop: 16 }}>
          <div className="muted-xs" style={{ marginBottom: 10 }}>Ampliación de nómina</div>
          <AmpliacionesList refreshKey={ampRefreshKey} onOpenDetalle={setDetalleAmpId} />
          <SolicitudesPropiasTable />
        </div>
      )}

      {detalleAmpId && (
        <SolicitudDetalleModal solicitudId={detalleAmpId} onClose={() => setDetalleAmpId(null)} onChange={bumpAmpliaciones} />
      )}
    </div>
  );
};

// Copia local del estado de SOLICITUDES (sembrada desde ats.jsx) para que
// "Iniciar reclutamiento" funcione dentro de esta vista sin acoplar estado
// mutable entre archivos — mismo patrón que el resto del prototipo.
const SolicitudesPropiasTable = () => {
  const [solicitudes, setSolicitudes] = _sp_useState(window.SOLICITUDES || []);
  const Tabla = window.SolicitudesTable;
  const onIniciarReclutamiento = (s) => {
    setSolicitudes(list => list.map(x => x.codigo === s.codigo ? { ...x, estado: 'en_proceso' } : x));
  };
  return <Tabla rows={solicitudes} onIniciarReclutamiento={onIniciarReclutamiento} />;
};

window.SolicitudesPersonal = SolicitudesPersonal;