// Formación y desarrollo — Entrenamiento al cargo (Matriz por cargo,
// Entrenamientos ejecutados, Reentrenamientos, Formato GH-FO-24 V7).
// Consume training-requirements-data.jsx. "Plataformas digitales actuales"
// reutiliza el EntrenamientoTab existente de training.jsx sin cambios.

const trJobEquipoDe = (currentRole) => currentRole === 'jefe' ? FORMATION_EMPLOYEES.filter(e => e.jefeInmediato === 'Luis Miguel Marín') : FORMATION_EMPLOYEES;

// ───────────────────────────── Matriz por cargo (Entrenamientos / Temas–Cargo) ─────────
const TrTemaEditModal = ({ tema, onClose, onSave }) => {
  const [horas, setHoras] = React.useState(tema.horas);
  const [obligatorio, setObligatorio] = React.useState(tema.obligatorio);
  return (
    <Modal open onClose={onClose} title={tema.tema} subtitle={tema.cargo} width={420}
      footer={<><button className="btn" onClick={onClose}>Cancelar</button><button className="btn primary" onClick={() => onSave({ horas: Number(horas) || 0, obligatorio })}>Guardar</button></>}>
      <div className="form-grid">
        <FormField label="Horas" span={3}><input type="number" min="0" className="form-input" value={horas} onChange={e => setHoras(e.target.value)} /></FormField>
        <FormField label="Obligatorio" span={3}>
          <div className="seg-pill">
            <button type="button" className={`seg-pill-btn ${obligatorio ? 'active' : ''}`} onClick={() => setObligatorio(true)}>Sí</button>
            <button type="button" className={`seg-pill-btn ${!obligatorio ? 'active' : ''}`} onClick={() => setObligatorio(false)}>No</button>
          </div>
        </FormField>
      </div>
    </Modal>
  );
};

const TR_NUEVA_VERSION_DIFF = {
  nuevas: [{ cargo: 'Op. Aprovechamiento', tema: 'Manejo de prensa hidráulica nueva' }],
  modificadas: [{ cargo: 'Operario de Clasificación', tema: 'Operación segura de banda transportadora', cambio: 'Horas 4 → 5' }],
  sinCambio: 8,
};

const TrNuevaVersionModal = ({ onClose, onConfirm }) => {
  const [stage, setStage] = React.useState('preview');
  return (
    <Modal open onClose={onClose} title="Cargar nueva versión de la matriz" subtitle="Comparación simulada contra la versión vigente" width={620}
      footer={stage === 'preview' ? (
        <><button className="btn" onClick={onClose}>Cancelar</button><button className="btn primary" onClick={() => { onConfirm(); setStage('done'); }}>Confirmar nueva versión</button></>
      ) : <button className="btn primary" onClick={onClose}>Cerrar</button>}>
      {stage === 'preview' ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div><div className="pill green" style={{ marginBottom: 6 }}>Nuevas · {TR_NUEVA_VERSION_DIFF.nuevas.length}</div>
            {TR_NUEVA_VERSION_DIFF.nuevas.map((n, i) => <div key={i} className="muted" style={{ fontSize: 12.5 }}>{n.cargo} — {n.tema}</div>)}
          </div>
          <div><div className="pill amber" style={{ marginBottom: 6 }}>Modificadas · {TR_NUEVA_VERSION_DIFF.modificadas.length}</div>
            {TR_NUEVA_VERSION_DIFF.modificadas.map((n, i) => <div key={i} className="muted" style={{ fontSize: 12.5 }}>{n.cargo} — {n.tema} · {n.cambio}</div>)}
          </div>
          <div><span className="pill">Sin cambio · {TR_NUEVA_VERSION_DIFF.sinCambio}</span></div>
        </div>
      ) : (
        <div className="ne-callout" style={{ borderColor: 'var(--green-600)' }}>
          <IconCheck size={16} style={{ color: 'var(--green-600)' }} />
          <div>Nueva versión registrada. Las versiones anteriores se conservan en el historial de la matriz.</div>
        </div>
      )}
    </Modal>
  );
};

const TrJobMatrix = ({ toast }) => {
  const [rows, setRows] = React.useState(() => [...FORMATION_TEMAS_CARGO]);
  const [versiones, setVersiones] = React.useState(() => [...FORMATION_MATRIZ_VERSIONES]);
  const [sub, setSub] = React.useState('temas-cargo');
  const [q, setQ] = React.useState('');
  const [cargoFiltro, setCargoFiltro] = React.useState('todos');
  const [obligFiltro, setObligFiltro] = React.useState('todos');
  const [editing, setEditing] = React.useState(null);
  const [nuevaVersionOpen, setNuevaVersionOpen] = React.useState(false);

  const cargos = [...new Set(rows.map(r => r.cargo))];
  const filas = rows
    .filter(r => !q || r.tema.toLowerCase().includes(q.toLowerCase()) || r.cargo.toLowerCase().includes(q.toLowerCase()))
    .filter(r => cargoFiltro === 'todos' || r.cargo === cargoFiltro)
    .filter(r => obligFiltro === 'todos' || (obligFiltro === 'si' ? r.obligatorio : !r.obligatorio));

  const temasUnicos = [...new Map(rows.map(r => [r.tema, r])).values()]
    .filter(r => !q || r.tema.toLowerCase().includes(q.toLowerCase()));

  const guardarTema = (cambios) => {
    const next = rows.map(r => r.id === editing.id ? { ...r, ...cambios } : r);
    setRows(next);
    window.FORMATION_TEMAS_CARGO.length = 0;
    window.FORMATION_TEMAS_CARGO.push(...next);
    setEditing(null);
    toast && toast('Matriz por cargo actualizada');
  };

  const confirmarNuevaVersion = () => {
    const nextVersion = (versiones[0]?.version || 0) + 1;
    const entry = { version: nextVersion, fecha: FORMATION_DEMO_TODAY, responsable: 'Carolina Restrepo S.', cargosAfectados: ['Op. Aprovechamiento', 'Operario de Clasificación'], nota: 'Carga simulada — ver comparación de la sesión.' };
    const next = [entry, ...versiones];
    setVersiones(next);
    window.FORMATION_MATRIZ_VERSIONES.unshift(entry);
    toast && toast('Nueva versión de la matriz registrada');
  };

  return (
    <div>
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head"><div><h3>Versiones de la matriz</h3><div className="sub">Historial — nunca se sobrescribe visualmente</div></div>
          <button className="btn primary" onClick={() => setNuevaVersionOpen(true)}><IconDoc size={14} /> Cargar nueva versión</button>
        </div>
        <div className="card-body">
          <div className="ep-table-wrap" style={{ maxHeight: 200 }}>
            <table className="data-table">
              <thead><tr><th>Versión</th><th>Fecha</th><th>Responsable</th><th>Cargos afectados</th><th>Nota</th></tr></thead>
              <tbody>
                {versiones.map(v => (
                  <tr key={v.version}>
                    <td className="mono" style={{ fontWeight: 700 }}>v{v.version}</td>
                    <td className="mono">{_fd_labelCO(v.fecha)}</td>
                    <td>{v.responsable}</td>
                    <td>{v.cargosAfectados.join(', ')}</td>
                    <td className="muted" style={{ fontSize: 12 }}>{v.nota}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div><h3>Matriz por cargo</h3><div className="sub">Simula las dos hojas del archivo original</div></div>
        </div>
        <div className="seg-pill" style={{ margin: '0 18px 14px' }}>
          <button className={`seg-pill-btn ${sub === 'entrenamientos' ? 'active' : ''}`} onClick={() => setSub('entrenamientos')}>Entrenamientos</button>
          <button className={`seg-pill-btn ${sub === 'temas-cargo' ? 'active' : ''}`} onClick={() => setSub('temas-cargo')}>Temas–Cargo</button>
        </div>
        <div className="filters-bar">
          <div className="search" style={{ flex: 'none', width: 240, margin: 0 }}>
            <span className="icon"><IconSearch size={16} /></span>
            <input placeholder="Cargo o tema…" value={q} onChange={e => setQ(e.target.value)} style={{ background: 'white' }} />
          </div>
          {sub === 'temas-cargo' && (
            <>
              <div className="filter-select">
                <span className="filter-label">Cargo</span>
                <select value={cargoFiltro} onChange={e => setCargoFiltro(e.target.value)}>
                  <option value="todos">Todos</option>
                  {cargos.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
                <IconChevronDown size={13} />
              </div>
              <div className="filter-select">
                <span className="filter-label">Obligatorio</span>
                <select value={obligFiltro} onChange={e => setObligFiltro(e.target.value)}>
                  <option value="todos">Todos</option><option value="si">Sí</option><option value="no">No</option>
                </select>
                <IconChevronDown size={13} />
              </div>
            </>
          )}
        </div>
        <div className="ep-table-wrap">
          {sub === 'temas-cargo' ? (
            <table className="data-table">
              <thead><tr><th>Cargo</th><th>Tema</th><th>Horas</th><th>Obligatorio</th><th>Versión</th><th>Vigencia</th><th>Responsable</th><th></th></tr></thead>
              <tbody>
                {filas.map(r => (
                  <tr key={r.id}>
                    <td>{r.cargo}</td><td style={{ fontWeight: 500 }}>{r.tema}</td><td className="mono">{r.horas} h</td>
                    <td><span className={`pill ${r.obligatorio ? 'navy' : ''}`}>{r.obligatorio ? 'Obligatorio' : 'Opcional'}</span></td>
                    <td className="mono">v{r.version}</td><td className="mono">{_fd_labelCO(r.fechaVigencia)}</td><td className="muted" style={{ fontSize: 12 }}>{r.responsable}</td>
                    <td style={{ textAlign: 'right' }}><button className="btn" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => setEditing(r)}>Editar</button></td>
                  </tr>
                ))}
                {filas.length === 0 && <tr><td colSpan={8} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>Ningún tema coincide con la búsqueda o los filtros.</td></tr>}
              </tbody>
            </table>
          ) : (
            <table className="data-table">
              <thead><tr><th>Tema</th><th>Cargos aplicables</th><th>Horas de referencia</th><th>Versión más reciente</th></tr></thead>
              <tbody>
                {temasUnicos.map(t => {
                  const cargosDeTema = rows.filter(r => r.tema === t.tema);
                  return (
                    <tr key={t.tema}>
                      <td style={{ fontWeight: 500 }}>{t.tema}</td>
                      <td>{cargosDeTema.map(c => <span key={c.id} className="pill" style={{ marginRight: 4 }}>{c.cargo}</span>)}</td>
                      <td className="mono">{t.horas} h</td>
                      <td className="mono">v{Math.max(...cargosDeTema.map(c => c.version))}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
      </div>
      {editing && <TrTemaEditModal tema={editing} onClose={() => setEditing(null)} onSave={guardarTema} />}
      {nuevaVersionOpen && <TrNuevaVersionModal onClose={() => setNuevaVersionOpen(false)} onConfirm={confirmarNuevaVersion} />}
    </div>
  );
};

// ───────────────────────────── Entrenamientos ejecutados ─────────
const TR_JOB_AUTO_FIELDS = [
  ['name', 'Nombre'], ['sociedad', 'Empresa'], ['area', 'Área de nómina'], ['regional', 'Regional'], ['planta', 'Planta'],
  ['centroCosto', 'Centro de costo'], ['cargo', 'Cargo'], ['genero', 'Género'], ['fechaIngreso', 'Fecha de ingreso'],
  ['jefeInmediato', 'Jefe inmediato'], ['director', 'Director de proceso'], ['lineaNegocio', 'Línea de negocio'],
  ['proceso', 'Proceso'], ['subproceso', 'Subproceso'], ['nivelCargo', 'Nivel del cargo'], ['frecuenciaReentrenoMeses', 'Frecuencia de reentrenamiento'],
];

const TrCedulaLookup = ({ onFound }) => {
  const [doc, setDoc] = React.useState('');
  const [notFound, setNotFound] = React.useState(false);
  const buscar = () => {
    const emp = findFormationEmployeeByDoc(doc);
    if (emp) { setNotFound(false); onFound(emp); } else setNotFound(true);
  };
  return (
    <div className="form-grid">
      <FormField label="Número de cédula" span={4}>
        <input className="form-input" placeholder="Ej. 1.087.665.443" value={doc} onChange={e => { setDoc(e.target.value); setNotFound(false); }} onKeyDown={e => e.key === 'Enter' && buscar()} />
      </FormField>
      <div style={{ gridColumn: 'span 2', display: 'flex', alignItems: 'flex-end' }}>
        <button className="btn primary" style={{ width: '100%' }} onClick={buscar}>Buscar</button>
      </div>
      {notFound && <div className="mp-error" role="alert" style={{ gridColumn: 'span 6' }}>No se encontró un colaborador con esa cédula en el mock del módulo.</div>}
    </div>
  );
};

const TrJobExecutedDrawer = ({ registro, onClose, onSave }) => {
  const empInicial = registro ? getFormationEmployee(registro.empId) : null;
  const [emp, setEmp] = React.useState(empInicial);
  const [form, setForm] = React.useState(() => registro || {
    motivo: 'Ingreso nuevo', entrenamientoCargo: 'Pendiente', entrenamientoMaquinas: 'Pendiente', estado: 'Pendiente por ejecutar',
    soportesPendientes: 'Sí', fechaEjecutada: '', horasEjecutadas: '', maquina: '', fechaMaquina: '', horasMaquina: '',
    auditoria: 'No', seguimientoGH: 'Abierto', fechaCambio: '',
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const historialEmp = emp ? FORMATION_ENTRENAMIENTOS.filter(r => r.empId === emp.id && r.id !== (registro && registro.id)) : [];

  return (
    <div className="tr-side-overlay" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="tr-side-panel" style={{ width: 680 }}>
        <div className="tr-side-head">
          <div><div className="tr-side-title">{emp ? emp.name : 'Registrar entrenamiento'}</div>{emp && <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{emp.cargo} · {emp.planta}</div>}</div>
          <button className="icon-btn" onClick={onClose} aria-label="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="tr-side-body">
          {!emp ? (
            <section className="ic-prov-section">
              <h4 className="ic-cap-h3">Buscar colaborador por cédula</h4>
              <TrCedulaLookup onFound={setEmp} />
            </section>
          ) : (
            <>
              <section className="ic-prov-section">
                <h4 className="ic-cap-h3">Datos automáticos <IconShield size={12} style={{ opacity: 0.5, marginLeft: 4 }} /></h4>
                <div className="ic-prov-info">
                  {TR_JOB_AUTO_FIELDS.map(([k, label]) => (
                    <div key={k}><div className="muted-xs">{label}</div><div>{k === 'fechaIngreso' ? _fd_labelCO(emp[k]) : (k === 'frecuenciaReentrenoMeses' ? (emp[k] ? `${emp[k]} meses` : 'No aplica') : (emp[k] || 'Sin información'))}</div></div>
                  ))}
                </div>
              </section>

              {historialEmp.length > 0 && (
                <section className="ic-prov-section">
                  <h4 className="ic-cap-h3">Línea de tiempo — registros anteriores</h4>
                  <div className="tr-reind-timeline">
                    {historialEmp.map(h => (
                      <div key={h.id} className="tr-reind-year">
                        <div className="tr-reind-dot" />
                        <div><div style={{ fontWeight: 600, fontSize: 12.5 }}>{h.motivo}</div><div className="muted-xs mono">{h.fechaEjecutada ? _fd_labelCO(h.fechaEjecutada) : 'Sin ejecutar'}</div></div>
                      </div>
                    ))}
                  </div>
                </section>
              )}

              <section className="ic-prov-section">
                <h4 className="ic-cap-h3">Registro del entrenamiento</h4>
                <div className="form-grid">
                  <FormField label="Motivo" span={3}>
                    <select className="form-input" value={form.motivo} onChange={e => set('motivo', e.target.value)}>
                      {JOB_TRAINING_MOTIVOS.map(m => <option key={m} value={m}>{m}</option>)}
                    </select>
                  </FormField>
                  {(form.motivo === 'Cambio de cargo' || form.motivo === 'Cambio de planta') && (
                    <FormField label="Fecha de cambio de cargo/planta" span={3}>
                      <input type="date" className="form-input" value={form.fechaCambio} onChange={e => set('fechaCambio', e.target.value)} />
                    </FormField>
                  )}
                  <FormField label="Entrenamiento del cargo" span={3}>
                    <select className="form-input" value={form.entrenamientoCargo} onChange={e => set('entrenamientoCargo', e.target.value)}>
                      <option>Sí</option><option>Pendiente</option><option>No aplica</option>
                    </select>
                  </FormField>
                  <FormField label="Entrenamiento de máquinas" span={3}>
                    <select className="form-input" value={form.entrenamientoMaquinas} onChange={e => set('entrenamientoMaquinas', e.target.value)}>
                      <option>Sí</option><option>Pendiente</option><option>No aplica</option>
                    </select>
                  </FormField>
                  <FormField label="Estado" span={3}>
                    <select className="form-input" value={form.estado} onChange={e => set('estado', e.target.value)}>
                      {JOB_TRAINING_ESTADOS.map(s => <option key={s} value={s}>{s}</option>)}
                    </select>
                  </FormField>
                  <FormField label="Soportes pendientes" span={3}>
                    <select className="form-input" value={form.soportesPendientes} onChange={e => set('soportesPendientes', e.target.value)}>
                      <option>Sí</option><option>No</option>
                    </select>
                  </FormField>
                  <FormField label="Fecha ejecutada" span={3}>
                    <input type="date" className="form-input" max={FORMATION_DEMO_TODAY} value={form.fechaEjecutada || ''} onChange={e => set('fechaEjecutada', e.target.value)} />
                  </FormField>
                  <FormField label="Horas ejecutadas" span={3}>
                    <input type="number" min="0" className="form-input" value={form.horasEjecutadas || ''} onChange={e => set('horasEjecutadas', e.target.value)} />
                  </FormField>
                  <FormField label="Máquina / molino" span={3}>
                    <input className="form-input" value={form.maquina || ''} onChange={e => set('maquina', e.target.value)} />
                  </FormField>
                  <FormField label="Fecha en máquina/molino" span={3}>
                    <input type="date" className="form-input" max={FORMATION_DEMO_TODAY} value={form.fechaMaquina || ''} onChange={e => set('fechaMaquina', e.target.value)} />
                  </FormField>
                  <FormField label="Horas en máquina/molino" span={3}>
                    <input type="number" min="0" className="form-input" value={form.horasMaquina || ''} onChange={e => set('horasMaquina', e.target.value)} />
                  </FormField>
                  <FormField label="Solicitudes de auditoría" span={3}>
                    <select className="form-input" value={form.auditoria} onChange={e => set('auditoria', e.target.value)}>
                      <option>No</option><option>Sí</option>
                    </select>
                  </FormField>
                  <FormField label="Seguimiento GH" span={3}>
                    <select className="form-input" value={form.seguimientoGH} onChange={e => set('seguimientoGH', e.target.value)}>
                      <option>Abierto</option><option>Cerrado</option>
                    </select>
                  </FormField>
                </div>
                {form.fechaEjecutada && emp.frecuenciaReentrenoMeses && (
                  <p className="muted-xs" style={{ marginTop: 8 }}>Vencimiento calculado: <b className="mono">{_fd_labelCO(calcVencimientoEntrenamiento(form.fechaEjecutada, emp.frecuenciaReentrenoMeses))}</b> (fecha ejecutada + {emp.frecuenciaReentrenoMeses} meses).</p>
                )}
              </section>
            </>
          )}
        </div>
        {emp && (
          <div className="tr-side-head" style={{ borderTop: '1px solid var(--border)', borderBottom: 'none', justifyContent: 'flex-end', gap: 8 }}>
            <button className="btn" onClick={onClose}>Cancelar</button>
            <button className="btn primary" onClick={() => onSave(emp.id, form)}>Guardar</button>
          </div>
        )}
      </div>
    </div>
  );
};

const TrJobExecuted = ({ currentRole, toast }) => {
  const [rows, setRows] = React.useState(() => [...FORMATION_ENTRENAMIENTOS]);
  const [q, setQ] = React.useState('');
  const [cargoFiltro, setCargoFiltro] = React.useState('todos');
  const [estadoFiltro, setEstadoFiltro] = React.useState('todos');
  const [openRow, setOpenRow] = React.useState(null); // record | 'nuevo' | null

  const equipo = trJobEquipoDe(currentRole);
  const equipoIds = new Set(equipo.map(e => e.id));
  const cargos = [...new Set(equipo.map(e => e.cargo))];

  const filas = rows.filter(r => equipoIds.has(r.empId)).map(r => {
    const emp = getFormationEmployee(r.empId);
    return { ...r, emp, alertaCalc: r.estado === 'Pendiente por ejecutar' ? 'pendiente' : clasificarAlertaEntrenamiento(r.fechaEjecutada, emp?.frecuenciaReentrenoMeses) };
  })
    .filter(r => !q || r.emp.name.toLowerCase().includes(q.toLowerCase()))
    .filter(r => cargoFiltro === 'todos' || r.emp.cargo === cargoFiltro)
    .filter(r => estadoFiltro === 'todos' || r.estado === estadoFiltro)
    .sort((a, b) => (a.emp.name > b.emp.name ? 1 : -1));

  const persistir = (list) => { window.FORMATION_ENTRENAMIENTOS.length = 0; window.FORMATION_ENTRENAMIENTOS.push(...list); };

  const guardar = (empId, form) => {
    let next;
    if (openRow && openRow !== 'nuevo' && openRow.id) {
      next = rows.map(r => r.id === openRow.id ? { ...r, ...form, empId } : r);
    } else {
      const id = `ENT-${Date.now().toString(36)}`;
      next = [...rows, { id, empId, ...form }];
    }
    setRows(next);
    persistir(next);
    setOpenRow(null);
    toast && toast('Entrenamiento guardado');
  };

  return (
    <div className="card">
      <div className="card-head">
        <div><h3>Entrenamientos ejecutados</h3><div className="sub">{filas.length} registros</div></div>
        <button className="btn primary" onClick={() => setOpenRow('nuevo')}><IconPlus size={14} /> Registrar entrenamiento</button>
      </div>
      <div className="filters-bar">
        <div className="search" style={{ flex: 'none', width: 240, margin: 0 }}>
          <span className="icon"><IconSearch size={16} /></span>
          <input placeholder="Colaborador…" value={q} onChange={e => setQ(e.target.value)} style={{ background: 'white' }} />
        </div>
        <div className="filter-select">
          <span className="filter-label">Cargo</span>
          <select value={cargoFiltro} onChange={e => setCargoFiltro(e.target.value)}>
            <option value="todos">Todos</option>{cargos.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
          <IconChevronDown size={13} />
        </div>
        <div className="filter-select">
          <span className="filter-label">Estado</span>
          <select value={estadoFiltro} onChange={e => setEstadoFiltro(e.target.value)}>
            <option value="todos">Todos</option>{JOB_TRAINING_ESTADOS.map(s => <option key={s} value={s}>{s}</option>)}
          </select>
          <IconChevronDown size={13} />
        </div>
      </div>
      <div className="ep-table-wrap">
        <table className="data-table">
          <thead><tr><th>Colaborador</th><th>Cargo</th><th>Motivo</th><th>Estado</th><th>Alerta</th><th>Fecha ejecutada</th><th></th></tr></thead>
          <tbody>
            {filas.map(r => (
              <tr key={r.id} onClick={() => setOpenRow(r)} style={{ cursor: 'pointer' }}>
                <td style={{ fontWeight: 500 }}>{r.emp.name}</td><td>{r.emp.cargo}</td><td>{r.motivo}</td>
                <td><span className={`pill ${r.estado === 'Ejecutado' ? 'green' : r.estado === 'Vencido' ? 'rose' : r.estado === 'Pendiente por ejecutar' ? 'navy' : ''}`}>{r.estado}</span></td>
                <td><span className={`pill ${JOB_ALERTA_META[r.alertaCalc].tone}`}>{JOB_ALERTA_META[r.alertaCalc].label}</span></td>
                <td className="mono">{r.fechaEjecutada ? _fd_labelCO(r.fechaEjecutada) : '—'}</td>
                <td style={{ textAlign: 'right' }}><button className="btn" style={{ padding: '4px 10px', fontSize: 12 }} onClick={(e) => { e.stopPropagation(); setOpenRow(r); }}>Ver</button></td>
              </tr>
            ))}
            {filas.length === 0 && <tr><td colSpan={7} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>Ningún registro coincide con la búsqueda o los filtros.</td></tr>}
          </tbody>
        </table>
      </div>
      {openRow && <TrJobExecutedDrawer registro={openRow === 'nuevo' ? null : openRow} onClose={() => setOpenRow(null)} onSave={guardar} />}
    </div>
  );
};

// ───────────────────────────── Reentrenamientos ─────────
const TrRetrainingDrawer = ({ registro, onClose, onSave }) => {
  const emp = getFormationEmployee(registro.empId);
  const [form, setForm] = React.useState(registro);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const proximo = form.fechaEjecutada ? calcProximoReentrenamiento(form.fechaEjecutada, emp.frecuenciaReentrenoMeses) : null;
  return (
    <div className="tr-side-overlay" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="tr-side-panel" style={{ width: 640 }}>
        <div className="tr-side-head">
          <div><div className="tr-side-title">{emp.name}</div><div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{emp.cargo} · <span className={`pill ${emp.estadoLaboral === 'Retirado' ? '' : 'green'}`} style={{ marginLeft: 4 }}>{emp.estadoLaboral}</span></div></div>
          <button className="icon-btn" onClick={onClose} aria-label="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="tr-side-body">
          <section className="ic-prov-section">
            <div className="form-grid">
              <FormField label="Estado" span={3}>
                <select className="form-input" value={form.estado} onChange={e => set('estado', e.target.value)}>
                  <option>Pendiente por ejecutar</option><option>Ejecutado</option>
                </select>
              </FormField>
              <FormField label="Motivo" span={3}>
                <select className="form-input" value={form.motivo} onChange={e => set('motivo', e.target.value)}>
                  {JOB_TRAINING_MOTIVOS.map(m => <option key={m} value={m}>{m}</option>)}
                </select>
              </FormField>
              <FormField label="Novedad de seguimiento" span={6}>
                <input className="form-input" value={form.novedad || ''} onChange={e => set('novedad', e.target.value)} />
              </FormField>
              <FormField label="Soportes pendientes" span={3}>
                <select className="form-input" value={form.soportesPendientes} onChange={e => set('soportesPendientes', e.target.value)}>
                  <option>Sí</option><option>No</option>
                </select>
              </FormField>
              <FormField label="Horas ejecutadas" span={3}>
                <input type="number" min="0" className="form-input" value={form.horasEjecutadas || ''} onChange={e => set('horasEjecutadas', e.target.value)} />
              </FormField>
              <FormField label="Máquina, vehículo o molino" span={3}>
                <input className="form-input" value={form.maquina || ''} onChange={e => set('maquina', e.target.value)} />
              </FormField>
              <FormField label="Fecha ejecutada" span={3}>
                <input type="date" className="form-input" max={FORMATION_DEMO_TODAY} value={form.fechaEjecutada || ''} onChange={e => set('fechaEjecutada', e.target.value)} />
              </FormField>
              <FormField label="Horas de práctica" span={3}>
                <input type="number" min="0" className="form-input" value={form.horasPractica || ''} onChange={e => set('horasPractica', e.target.value)} />
              </FormField>
              <FormField label="Fecha de práctica" span={3}>
                <input type="date" className="form-input" max={FORMATION_DEMO_TODAY} value={form.fechaPractica || ''} onChange={e => set('fechaPractica', e.target.value)} />
              </FormField>
              <FormField label="Solicitudes de auditoría" span={3}>
                <select className="form-input" value={form.auditoria} onChange={e => set('auditoria', e.target.value)}>
                  <option>No</option><option>Sí</option>
                </select>
              </FormField>
              <FormField label="Seguimiento GH" span={3}>
                <select className="form-input" value={form.seguimientoGH} onChange={e => set('seguimientoGH', e.target.value)}>
                  <option>Abierto</option><option>Cerrado</option>
                </select>
              </FormField>
            </div>
            {proximo && <p className="muted-xs" style={{ marginTop: 8 }}>Próximo vencimiento calculado: <b className="mono">{_fd_labelCO(proximo)}</b>. Al guardar como Ejecutado se conserva este ciclo y se abre uno nuevo pendiente.</p>}
          </section>
        </div>
        <div className="tr-side-head" style={{ borderTop: '1px solid var(--border)', borderBottom: 'none', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn primary" onClick={() => onSave(form)}>Guardar</button>
        </div>
      </div>
    </div>
  );
};

const TrRetraining = ({ currentRole, toast }) => {
  const [rows, setRows] = React.useState(() => [...FORMATION_REENTRENAMIENTOS]);
  const [openRow, setOpenRow] = React.useState(null);
  const equipoIds = new Set(trJobEquipoDe(currentRole).map(e => e.id));

  const candidatosAutomaticos = FORMATION_ENTRENAMIENTOS
    .filter(r => equipoIds.has(r.empId) && (r.alerta === 'vencida' || r.alerta === 'proxima'))
    .filter(r => !rows.some(rt => rt.empId === r.empId && rt.origenEntrenamientoId === r.id));

  const persistir = (list) => { window.FORMATION_REENTRENAMIENTOS.length = 0; window.FORMATION_REENTRENAMIENTOS.push(...list); };

  const generarDesde = (entrenamiento) => {
    const nuevo = { id: `REENT-${Date.now().toString(36)}`, empId: entrenamiento.empId, origenEntrenamientoId: entrenamiento.id, estado: 'Pendiente por ejecutar', motivo: 'Vencimiento de periodo', novedad: 'Sin novedad', soportesPendientes: 'Sí', horasEjecutadas: null, maquina: entrenamiento.maquina, fechaEjecutada: null, horasPractica: null, fechaPractica: null, auditoria: 'No', seguimientoGH: 'Abierto' };
    const next = [...rows, nuevo];
    setRows(next); persistir(next);
    toast && toast('Reentrenamiento generado desde vencimiento');
  };

  const guardar = (form) => {
    let next = rows.map(r => r.id === form.id ? form : r);
    if (form.estado === 'Ejecutado' && openRow.estado !== 'Ejecutado') {
      const emp = getFormationEmployee(form.empId);
      const proximo = calcProximoReentrenamiento(form.fechaEjecutada, emp.frecuenciaReentrenoMeses);
      next = [...next, { id: `REENT-${Date.now().toString(36)}`, empId: form.empId, origenEntrenamientoId: null, estado: 'Pendiente por ejecutar', motivo: 'Vencimiento de periodo', novedad: `Ciclo siguiente al ejecutado el ${_fd_labelCO(form.fechaEjecutada)}`, soportesPendientes: 'Sí', horasEjecutadas: null, maquina: form.maquina, fechaEjecutada: null, horasPractica: null, fechaPractica: null, auditoria: 'No', seguimientoGH: 'Abierto', _proximoVencimiento: proximo }];
    }
    setRows(next); persistir(next);
    setOpenRow(null);
    toast && toast('Reentrenamiento actualizado');
  };

  return (
    <div>
      {candidatosAutomaticos.length > 0 && (
        <div className="ne-callout" style={{ marginBottom: 16 }}>
          <IconAlert size={16} />
          <div>
            <b>{candidatosAutomaticos.length} entrenamiento(s) vencidos o próximos sin reentrenamiento generado.</b>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 6 }}>
              {candidatosAutomaticos.map(c => (
                <div key={c.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
                  <span>{getFormationEmployee(c.empId)?.name} — {getFormationEmployee(c.empId)?.cargo}</span>
                  <button className="btn" style={{ padding: '3px 9px', fontSize: 11.5 }} onClick={() => generarDesde(c)}>Generar reentrenamiento</button>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
      <div className="card">
        <div className="card-head"><div><h3>Cola de reentrenamientos</h3><div className="sub">{rows.filter(r => equipoIds.has(r.empId)).length} registros</div></div></div>
        <div className="ep-table-wrap">
          <table className="data-table">
            <thead><tr><th>Colaborador</th><th>Estado laboral</th><th>Motivo</th><th>Estado</th><th>Fecha ejecutada</th><th></th></tr></thead>
            <tbody>
              {rows.filter(r => equipoIds.has(r.empId)).map(r => {
                const emp = getFormationEmployee(r.empId);
                return (
                  <tr key={r.id} onClick={() => setOpenRow(r)} style={{ cursor: 'pointer' }}>
                    <td style={{ fontWeight: 500 }}>{emp.name}</td>
                    <td><span className={`pill ${emp.estadoLaboral === 'Retirado' ? '' : 'green'}`}>{emp.estadoLaboral}</span></td>
                    <td>{r.motivo}</td>
                    <td><span className={`pill ${r.estado === 'Ejecutado' ? 'green' : 'navy'}`}>{r.estado}</span></td>
                    <td className="mono">{r.fechaEjecutada ? _fd_labelCO(r.fechaEjecutada) : '—'}</td>
                    <td style={{ textAlign: 'right' }}><button className="btn" style={{ padding: '4px 10px', fontSize: 12 }} onClick={(e) => { e.stopPropagation(); setOpenRow(r); }}>Ver</button></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
      {openRow && <TrRetrainingDrawer registro={openRow} onClose={() => setOpenRow(null)} onSave={guardar} />}
    </div>
  );
};

// ───────────────────────────── Formato GH-FO-24 V7 ─────────
const TrGhFo24 = ({ currentRole, toast }) => {
  const equipo = trJobEquipoDe(currentRole);
  const cargos = [...new Set(equipo.map(e => e.cargo))];
  const [cargo, setCargo] = React.useState(cargos[0] || '');
  const colaboradoresDelCargo = equipo.filter(e => e.cargo === cargo);
  const [empId, setEmpId] = React.useState((colaboradoresDelCargo[0] || {}).id || '');
  React.useEffect(() => { const first = equipo.filter(e => e.cargo === cargo)[0]; setEmpId(first ? first.id : ''); }, [cargo]);
  const [previewOpen, setPreviewOpen] = React.useState(false);

  const emp = getFormationEmployee(empId);
  const temas = emp ? FORMATION_TEMAS_CARGO.filter(t => t.cargoId === emp.cargoId) : [];

  const descargar = () => toast && toast('Simulación completada · GH-FO-24 V7 descargado');

  if (!emp) return <div className="card"><div className="card-body muted" style={{ textAlign: 'center', padding: 24 }}>No hay colaboradores disponibles para generar el formato.</div></div>;

  return (
    <div>
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head"><div><h3>Generar formato</h3><div className="sub">Selecciona cargo y colaborador</div></div></div>
        <div className="card-body">
          <div className="form-grid">
            <FormField label="Cargo" span={3}>
              <select className="form-input" value={cargo} onChange={e => setCargo(e.target.value)}>
                {cargos.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </FormField>
            <FormField label="Colaborador" span={3}>
              <select className="form-input" value={empId} onChange={e => setEmpId(e.target.value)}>
                {colaboradoresDelCargo.map(e => <option key={e.id} value={e.id}>{e.name}</option>)}
              </select>
            </FormField>
          </div>
        </div>
      </div>

      <div className="card tr-ghfo24-sheet">
        <div className="card-head">
          <div><h3>Formato GH-FO-24 V7 — Vista previa</h3><div className="sub">{FORMATION_DEMO_TODAY.slice(0, 7)} · Periodo actual</div></div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn" onClick={() => setPreviewOpen(true)}><IconExternal size={14} /> Vista previa</button>
            <button className="btn primary" onClick={descargar}><IconDoc size={14} /> Descargar formato</button>
          </div>
        </div>
        <div className="card-body">
          <div className="amp-resumen-grid" style={{ marginBottom: 14 }}>
            <div><span className="muted-xs">Cargo</span><div>{emp.cargo}</div></div>
            <div><span className="muted-xs">Colaborador</span><div>{emp.name}</div></div>
            <div><span className="muted-xs">Líder</span><div>{emp.jefeInmediato}</div></div>
            <div><span className="muted-xs">Periodo</span><div className="mono">{_fd_monthLabelCO(`${FORMATION_DEMO_TODAY.slice(0, 7)}-01`)}</div></div>
          </div>
          <table className="data-table">
            <thead><tr><th>Tema</th><th>Horas</th><th>Obligatorio</th><th>Versión</th></tr></thead>
            <tbody>
              {temas.map(t => (
                <tr key={t.id}><td>{t.tema}</td><td className="mono">{t.horas} h</td><td>{t.obligatorio ? 'Sí' : 'No'}</td><td className="mono">v{t.version}</td></tr>
              ))}
              {temas.length === 0 && <tr><td colSpan={4} className="muted" style={{ textAlign: 'center', padding: 16, fontSize: 12.5 }}>Este cargo no tiene temas asignados en la matriz.</td></tr>}
            </tbody>
          </table>
          <div className="ne-callout" style={{ marginTop: 14 }}>
            <IconInfo size={16} />
            <div>Estructura visual pendiente de validar contra el archivo oficial GH-FO-24 V7.</div>
          </div>
        </div>
      </div>

      {previewOpen && (
        <Modal open onClose={() => setPreviewOpen(false)} title="GH-FO-24 V7 · Vista previa de alta fidelidad" width={700}
          footer={<button className="btn primary" onClick={() => setPreviewOpen(false)}>Cerrar</button>}>
          <div className="tr-ghfo24-print">
            <div className="tr-ghfo24-print-head">
              <div><b>GH-FO-24 V7</b> · Formato de entrenamiento al cargo</div>
              <div className="muted-xs">Atica · Gestión Humana</div>
            </div>
            <div className="amp-resumen-grid" style={{ margin: '14px 0' }}>
              <div><span className="muted-xs">Cargo</span><div>{emp.cargo}</div></div>
              <div><span className="muted-xs">Colaborador</span><div>{emp.name}</div></div>
              <div><span className="muted-xs">Líder</span><div>{emp.jefeInmediato}</div></div>
              <div><span className="muted-xs">Planta</span><div>{emp.planta}</div></div>
            </div>
            <table className="data-table">
              <thead><tr><th>Tema</th><th>Horas</th><th>Firma</th></tr></thead>
              <tbody>{temas.map(t => <tr key={t.id}><td>{t.tema}</td><td className="mono">{t.horas} h</td><td className="muted">_____________</td></tr>)}</tbody>
            </table>
          </div>
        </Modal>
      )}
    </div>
  );
};

// ───────────────────────────── Capacitograma (Configuración) ─────────
const TR_CGR_FLUJOS = {
  Interno: ['Asignaciones internas (Capacitación interna)', 'Vencimientos', 'Formatos'],
  Externo: ['Catálogo externo (Capacitación externa)', 'Solicitudes', 'Vencimientos'],
  Inducción: ['Seguimiento de inducción', 'Reinducción'],
  Entrenamiento: ['Entrenamientos ejecutados', 'Formato GH-FO-24'],
  Reentrenamiento: ['Reentrenamientos', 'Vencimientos'],
};

const TrCapacitogramEditModal = ({ item, onClose, onSave }) => {
  const [form, setForm] = React.useState(item);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  return (
    <Modal open onClose={onClose} title={form.curso} subtitle={form.codigo} width={620}
      footer={<><button className="btn" onClick={onClose}>Cancelar</button><button className="btn primary" onClick={() => onSave(form)}>Guardar</button></>}>
      <div className="form-grid">
        <FormField label="Categoría" span={3}><input className="form-input" value={form.categoria} onChange={e => set('categoria', e.target.value)} /></FormField>
        <FormField label="Tipo" span={3}>
          <select className="form-input" value={form.tipo} onChange={e => set('tipo', e.target.value)}>
            {CAPACITOGRAMA_TIPOS.map(t => <option key={t} value={t}>{t}</option>)}
          </select>
        </FormField>
        <FormField label="Duración (horas)" span={2}><input type="number" className="form-input" value={form.duracionHoras} onChange={e => set('duracionHoras', Number(e.target.value))} /></FormField>
        <FormField label="Frecuencia (meses)" span={2}><input type="number" className="form-input" value={form.frecuenciaMeses || ''} onChange={e => set('frecuenciaMeses', Number(e.target.value) || null)} /></FormField>
        <FormField label="Vigencia (meses)" span={2}><input type="number" className="form-input" value={form.vigenciaMeses || ''} onChange={e => set('vigenciaMeses', Number(e.target.value) || null)} /></FormField>
        <FormField label="Aplica examen" span={3}>
          <div className="seg-pill">
            <button type="button" className={`seg-pill-btn ${form.aplicaExamen ? 'active' : ''}`} onClick={() => set('aplicaExamen', true)}>Sí</button>
            <button type="button" className={`seg-pill-btn ${!form.aplicaExamen ? 'active' : ''}`} onClick={() => set('aplicaExamen', false)}>No</button>
          </div>
        </FormField>
        <FormField label="Entidad regulatoria" span={3}><input className="form-input" value={form.entidadRegulatoria} onChange={e => set('entidadRegulatoria', e.target.value)} /></FormField>
        <FormField label="Estado" span={3}>
          <div className="seg-pill">
            <button type="button" className={`seg-pill-btn ${form.activo ? 'active' : ''}`} onClick={() => set('activo', true)}>Activo</button>
            <button type="button" className={`seg-pill-btn ${!form.activo ? 'active' : ''}`} onClick={() => set('activo', false)}>Inactivo</button>
          </div>
        </FormField>
      </div>
    </Modal>
  );
};

const TrCapacitogramDrawer = ({ item, onClose, onEdit }) => (
  <div className="tr-side-overlay" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
    <div className="tr-side-panel" style={{ width: 600 }}>
      <div className="tr-side-head">
        <div><div className="muted mono" style={{ fontSize: 11 }}>{item.codigo}</div><div className="tr-side-title" style={{ marginTop: 4 }}>{item.curso}</div></div>
        <button className="icon-btn" onClick={onClose} aria-label="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="tr-side-body">
        <section className="ic-prov-section">
          <h4 className="ic-cap-h3">Definición</h4>
          <div className="ic-prov-info">
            <div><div className="muted-xs">Categoría</div><div>{item.categoria}</div></div>
            <div><div className="muted-xs">Tipo</div><div>{item.tipo}</div></div>
            <div><div className="muted-xs">Duración</div><div className="mono">{item.duracionHoras} h</div></div>
            <div><div className="muted-xs">Frecuencia</div><div>{item.frecuenciaMeses ? `${item.frecuenciaMeses} meses` : 'Una vez'}</div></div>
            <div><div className="muted-xs">Vigencia</div><div>{item.vigenciaMeses ? `${item.vigenciaMeses} meses` : 'Indefinida'}</div></div>
            <div><div className="muted-xs">Aplica examen</div><div>{item.aplicaExamen ? `Sí · cada ${item.periodicidadExamenMeses || '—'} meses` : 'No'}</div></div>
            <div><div className="muted-xs">Entidad regulatoria</div><div>{item.entidadRegulatoria}</div></div>
            <div><div className="muted-xs">Versión</div><div className="mono">v{item.version} · {_fd_labelCO(item.fechaVigencia)}</div></div>
          </div>
          <div style={{ marginTop: 10 }}>
            <div className="muted-xs" style={{ marginBottom: 4 }}>Soportes obligatorios</div>
            {item.soportesObligatorios.map(s => <span key={s} className="pill" style={{ marginRight: 4 }}>{s}</span>)}
          </div>
        </section>
        <section className="ic-prov-section">
          <h4 className="ic-cap-h3">Flujos que alimenta este registro</h4>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 12.5, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {(TR_CGR_FLUJOS[item.tipo] || []).map(f => <li key={f}>{f}</li>)}
          </ul>
        </section>
      </div>
      <div className="tr-side-head" style={{ borderTop: '1px solid var(--border)', borderBottom: 'none', justifyContent: 'flex-end' }}>
        <button className="btn primary" onClick={() => onEdit(item)}>Editar</button>
      </div>
    </div>
  </div>
);

const TrCapacitogram = ({ toast }) => {
  const [rows, setRows] = React.useState(() => [...FORMATION_CAPACITOGRAMA]);
  const [q, setQ] = React.useState('');
  const [tipoFiltro, setTipoFiltro] = React.useState('todos');
  const [detalle, setDetalle] = React.useState(null);
  const [editing, setEditing] = React.useState(null);
  const [cargoSim, setCargoSim] = React.useState('');

  const cargosDisponibles = [...new Set(rows.flatMap(r => r.cargosAplicables))];
  const filas = rows
    .filter(r => !q || r.curso.toLowerCase().includes(q.toLowerCase()) || r.codigo.toLowerCase().includes(q.toLowerCase()))
    .filter(r => tipoFiltro === 'todos' || r.tipo === tipoFiltro);

  const persistir = (next) => { window.FORMATION_CAPACITOGRAMA.length = 0; window.FORMATION_CAPACITOGRAMA.push(...next); };

  const guardar = (form) => {
    const next = rows.map(r => r.id === form.id ? form : r);
    setRows(next); persistir(next);
    setEditing(null); setDetalle(null);
    toast && toast('Capacitograma actualizado');
  };

  const obligacionesSim = cargoSim ? obligacionesFormativasPorCargo(cargoSim) : [];

  return (
    <div>
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head"><div><h3>Simulador por cargo</h3><div className="sub">Elige un cargo y revisa todas sus obligaciones formativas</div></div></div>
        <div className="card-body">
          <select className="form-input" style={{ maxWidth: 320 }} value={cargoSim} onChange={e => setCargoSim(e.target.value)}>
            <option value="">— Selecciona un cargo —</option>
            {cargosDisponibles.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
          {cargoSim && (
            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {obligacionesSim.map(o => (
                <div key={o.id} className="tr-cal-item"><span className="pill navy">{o.tipo}</span><span style={{ fontWeight: 500 }}>{o.curso}</span><span className="muted-xs">{o.categoria}</span></div>
              ))}
              {obligacionesSim.length === 0 && <p className="muted-xs">Este cargo no tiene obligaciones formativas activas.</p>}
            </div>
          )}
        </div>
      </div>

      <div className="card">
        <div className="card-head"><div><h3>Capacitograma</h3><div className="sub">Catálogo maestro — alimenta inducción, entrenamiento, interna y externa</div></div></div>
        <div className="filters-bar">
          <div className="search" style={{ flex: 'none', width: 240, margin: 0 }}>
            <span className="icon"><IconSearch size={16} /></span>
            <input placeholder="Código o curso…" value={q} onChange={e => setQ(e.target.value)} style={{ background: 'white' }} />
          </div>
          <div className="filter-select">
            <span className="filter-label">Tipo</span>
            <select value={tipoFiltro} onChange={e => setTipoFiltro(e.target.value)}>
              <option value="todos">Todos</option>{CAPACITOGRAMA_TIPOS.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
            <IconChevronDown size={13} />
          </div>
        </div>
        <div className="ep-table-wrap">
          <table className="data-table">
            <thead><tr><th>Código</th><th>Categoría</th><th>Curso</th><th>Tipo</th><th>Duración</th><th>Frecuencia</th><th>Examen</th><th>Estado</th></tr></thead>
            <tbody>
              {filas.map(r => (
                <tr key={r.id} onClick={() => setDetalle(r)} style={{ cursor: 'pointer' }}>
                  <td className="mono">{r.codigo}</td><td>{r.categoria}</td><td style={{ fontWeight: 500 }}>{r.curso}</td><td>{r.tipo}</td>
                  <td className="mono">{r.duracionHoras} h</td><td>{r.frecuenciaMeses ? `${r.frecuenciaMeses} m` : 'Una vez'}</td>
                  <td>{r.aplicaExamen ? 'Sí' : 'No'}</td>
                  <td><span className={`pill ${r.activo ? 'green' : ''}`}>{r.activo ? 'Activo' : 'Inactivo'}</span></td>
                </tr>
              ))}
              {filas.length === 0 && <tr><td colSpan={8} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>Ningún curso coincide con la búsqueda o el filtro.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
      {detalle && <TrCapacitogramDrawer item={detalle} onClose={() => setDetalle(null)} onEdit={(it) => { setEditing(it); setDetalle(null); }} />}
      {editing && <TrCapacitogramEditModal item={editing} onClose={() => setEditing(null)} onSave={guardar} />}
    </div>
  );
};

window.TrJobMatrix = TrJobMatrix;
window.TrJobExecuted = TrJobExecuted;
window.TrRetraining = TrRetraining;
window.TrGhFo24 = TrGhFo24;
window.TrCapacitogram = TrCapacitogram;