// Formación y desarrollo — Capacitación interna (Programa anual, validación
// GH, seguimiento por personas, notificaciones) + vista personal simple para
// currentRole === 'nuevo'. Consume training-requirements-data.jsx.

const TR_INT_CARGOS_PUBLICO = ['Operario de Clasificación', 'Op. Aprovechamiento', 'Téc. Mantenimiento', 'Conductor', 'Líder de Aprovechamiento', 'Supervisor de Planta', 'Aux. Administrativo'];

// ───────────────────────────── Formulario de planeación ─────────
const TrPropuestaForm = ({ onClose, onSave, currentRole, diciembreSimulado, setDiciembreSimulado }) => {
  const [form, setForm] = React.useState({ proceso: INTERNAL_PROCESOS[0], tema: '', mes: FORMATION_DEMO_TODAY.slice(0, 7), publico: [], objetivo: '', material: null, preguntas: [] });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const esDiciembre = FORMATION_DEMO_TODAY.slice(5, 7) === '12';
  const bloqueadoJefe = currentRole === 'jefe' && !esDiciembre && !diciembreSimulado;

  const togglePublico = (cargo) => setForm(f => ({ ...f, publico: f.publico.includes(cargo) ? f.publico.filter(c => c !== cargo) : [...f.publico, cargo] }));

  const simularCargaMaterial = () => set('material', { tipo: Math.random() > 0.5 ? 'PDF' : 'Video', nombre: `${form.tema || 'material'}.${Math.random() > 0.5 ? 'pdf' : 'mp4'}`, tamKB: Math.round(400 + Math.random() * 12000) });

  const agregarPregunta = () => { if (form.preguntas.length >= 5) return; set('preguntas', [...form.preguntas, { enunciado: '', opciones: ['', '', '', ''], correcta: 0 }]); };
  const actualizarPregunta = (i, cambios) => set('preguntas', form.preguntas.map((p, idx) => idx === i ? { ...p, ...cambios } : p));
  const quitarPregunta = (i) => set('preguntas', form.preguntas.filter((_, idx) => idx !== i));

  const valido = form.tema.trim() && form.publico.length > 0 && form.objetivo.trim();

  const guardar = (estado) => {
    const propuesta = { id: `PRI-${Date.now().toString(36)}`, ...form, estado, creadoPor: currentRole === 'jefe' ? 'Luis Miguel Marín' : 'Carolina Restrepo S.' };
    onSave(propuesta);
  };

  return (
    <Modal open onClose={onClose} title="Planear capacitación interna" subtitle="Programa anual · Capacitación interna" width={760}
      footer={bloqueadoJefe ? <button className="btn" onClick={onClose}>Cerrar</button> : (
        <>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn" disabled={!valido} onClick={() => guardar('Borrador')}>Guardar como borrador</button>
          <button className="btn primary" disabled={!valido} onClick={() => guardar('En revisión')}>Enviar a revisión</button>
        </>
      )}>
      {bloqueadoJefe ? (
        <div>
          <div className="ne-callout" style={{ borderColor: 'var(--amber-600)' }}>
            <IconAlert size={16} />
            <div>
              <b>El registro solo está habilitado en diciembre.</b> Hoy es {_fd_labelCO(FORMATION_DEMO_TODAY)} — fuera de la ventana de planeación anual. Activa la simulación para recorrer el formulario en esta demostración.
            </div>
          </div>
          <button className="btn primary" style={{ marginTop: 14 }} onClick={() => setDiciembreSimulado(true)}>Simular ventana de diciembre</button>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {currentRole === 'jefe' && diciembreSimulado && !esDiciembre && (
            <div className="pill amber-soft" style={{ width: 'fit-content' }}>Ventana de diciembre simulada para esta demostración</div>
          )}
          <div className="form-grid">
            <FormField label="Proceso / Área" span={3}>
              <select className="form-input" value={form.proceso} onChange={e => set('proceso', e.target.value)}>
                {INTERNAL_PROCESOS.map(p => <option key={p} value={p}>{p}</option>)}
              </select>
            </FormField>
            <FormField label="Mes de planeación" span={3}>
              <input type="month" className="form-input" value={form.mes} onChange={e => set('mes', e.target.value)} />
            </FormField>
            <FormField label="Tema" span={6}>
              <input className="form-input" placeholder="Ej. Prevención de accidentes en banda transportadora" value={form.tema} onChange={e => set('tema', e.target.value)} />
            </FormField>
            <FormField label="Objetivo" span={6}>
              <textarea className="form-input" rows={2} value={form.objetivo} onChange={e => set('objetivo', e.target.value)} />
            </FormField>
          </div>

          <div className="form-field">
            <label>Público objetivo</label>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
              {TR_INT_CARGOS_PUBLICO.map(c => (
                <button key={c} type="button" className={`pill ${form.publico.includes(c) ? 'navy' : ''}`} style={{ cursor: 'pointer', border: form.publico.includes(c) ? 'none' : '1px solid var(--border)' }} onClick={() => togglePublico(c)}>{c}</button>
              ))}
            </div>
          </div>

          <div className="form-field">
            <label>Material (PDF o video)</label>
            {form.material ? (
              <div className="tr-file-chip"><IconDoc size={14} /> {form.material.nombre} · {(form.material.tamKB / 1024).toFixed(1)} MB <button type="button" className="icon-btn" onClick={() => set('material', null)}><IconTrash size={13} /></button></div>
            ) : (
              <div className="tr-dropzone" style={{ padding: 18 }} onClick={simularCargaMaterial}>
                <div className="muted-xs">Clic para simular la carga de un PDF o video</div>
              </div>
            )}
          </div>

          <div className="form-field">
            <label>Cuestionario (máximo 5 preguntas de selección múltiple)</label>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 6 }}>
              {form.preguntas.map((p, i) => (
                <div key={i} className="tr-pregunta-row">
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <input className="form-input" placeholder={`Pregunta ${i + 1}`} value={p.enunciado} onChange={e => actualizarPregunta(i, { enunciado: e.target.value })} />
                    <button type="button" className="icon-action danger" onClick={() => quitarPregunta(i)}><IconTrash size={14} /></button>
                  </div>
                  <div className="tr-opciones-grid">
                    {p.opciones.map((op, oi) => (
                      <label key={oi} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <input type="radio" name={`correcta-${i}`} checked={p.correcta === oi} onChange={() => actualizarPregunta(i, { correcta: oi })} style={{ accentColor: 'var(--navy-800)' }} />
                        <input className="form-input" placeholder={`Opción ${oi + 1}`} value={op} onChange={e => actualizarPregunta(i, { opciones: p.opciones.map((o, x) => x === oi ? e.target.value : o) })} />
                      </label>
                    ))}
                  </div>
                </div>
              ))}
              {form.preguntas.length < 5 && <button type="button" className="btn" style={{ width: 'fit-content' }} onClick={agregarPregunta}><IconPlus size={13} /> Agregar pregunta</button>}
            </div>
          </div>
        </div>
      )}
    </Modal>
  );
};

// ───────────────────────────── Programa anual ─────────
const TrAnnualProgram = ({ currentRole, toast }) => {
  const [propuestas, setPropuestas] = React.useState(() => [...FORMATION_PROPUESTAS_INTERNAS]);
  const [vista, setVista] = React.useState('lista');
  const [procesoFiltro, setProcesoFiltro] = React.useState('todos');
  const [formOpen, setFormOpen] = React.useState(false);
  const [diciembreSimulado, setDiciembreSimulado] = React.useState(false);

  const visibles = propuestas.filter(p => !p.inactiva).filter(p => procesoFiltro === 'todos' || p.proceso === procesoFiltro);
  const asignadosPorTema = (propuestaId) => FORMATION_SEGUIMIENTO_INTERNO.filter(s => s.propuestaId === propuestaId).length;

  const guardarPropuesta = (propuesta) => {
    const next = [propuesta, ...propuestas];
    setPropuestas(next);
    window.FORMATION_PROPUESTAS_INTERNAS.unshift(propuesta);
    setFormOpen(false);
    toast && toast(propuesta.estado === 'Borrador' ? 'Propuesta guardada como borrador' : 'Propuesta enviada a revisión de GH');
  };

  const porMes = {};
  visibles.forEach(p => { (porMes[p.mes] = porMes[p.mes] || []).push(p); });

  return (
    <div className="card">
      <div className="card-head">
        <div><h3>Programa anual de capacitación interna</h3><div className="sub">{visibles.length} temas planeados</div></div>
        <button className="btn primary" onClick={() => setFormOpen(true)}><IconPlus size={14} /> Planear capacitación</button>
      </div>
      <div className="filters-bar">
        <div className="filter-select">
          <span className="filter-label">Proceso</span>
          <select value={procesoFiltro} onChange={e => setProcesoFiltro(e.target.value)}>
            <option value="todos">Todos</option>{INTERNAL_PROCESOS.map(p => <option key={p} value={p}>{p}</option>)}
          </select>
          <IconChevronDown size={13} />
        </div>
        <div className="seg-pill" style={{ marginLeft: 'auto' }}>
          <button className={`seg-pill-btn ${vista === 'lista' ? 'active' : ''}`} onClick={() => setVista('lista')}>Lista</button>
          <button className={`seg-pill-btn ${vista === 'calendario' ? 'active' : ''}`} onClick={() => setVista('calendario')}>Calendario</button>
        </div>
      </div>
      {vista === 'lista' ? (
        <div className="ep-table-wrap">
          <table className="data-table">
            <thead><tr><th>Proceso</th><th>Tema</th><th>Mes</th><th>Público</th><th>Personas asignadas</th><th>Estado</th></tr></thead>
            <tbody>
              {visibles.map(p => (
                <tr key={p.id}>
                  <td>{p.proceso}</td><td style={{ fontWeight: 500 }}>{p.tema}</td><td className="mono">{_fd_monthLabelCO(`${p.mes}-01`)}</td>
                  <td>{p.publico.join(', ')}</td><td className="mono">{asignadosPorTema(p.id)}</td>
                  <td><span className={`pill ${p.estado === 'Aprobada' ? 'green' : p.estado === 'Devuelta' ? 'rose' : p.estado === 'En revisión' ? 'navy' : ''}`}>{p.estado}</span></td>
                </tr>
              ))}
              {visibles.length === 0 && <tr><td colSpan={6} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>Ningún tema planeado con este filtro.</td></tr>}
            </tbody>
          </table>
        </div>
      ) : (
        <div className="card-body" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {Object.entries(porMes).sort().map(([mes, items]) => (
            <div key={mes}>
              <div className="section-title" style={{ margin: '0 0 8px', textTransform: 'capitalize' }}>{_fd_monthLabelCO(`${mes}-01`)}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {items.map(p => (
                  <div key={p.id} className="tr-cal-item">
                    <span className={`pill ${p.estado === 'Aprobada' ? 'green' : p.estado === 'Devuelta' ? 'rose' : 'navy'}`}>{p.estado}</span>
                    <span style={{ fontWeight: 500 }}>{p.tema}</span>
                    <span className="muted-xs">{p.proceso} · {asignadosPorTema(p.id)} asignados</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
      {formOpen && <TrPropuestaForm currentRole={currentRole} onClose={() => setFormOpen(false)} onSave={guardarPropuesta} diciembreSimulado={diciembreSimulado} setDiciembreSimulado={setDiciembreSimulado} />}
    </div>
  );
};

// ───────────────────────────── Validación GH ─────────
const TrValidationDrawer = ({ propuesta, onClose, onDevolver, onAprobar, onInactivar, tieneHistorial }) => {
  const [comentario, setComentario] = React.useState('');
  const [evalCapacitador, setEvalCapacitador] = React.useState(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">{propuesta.tema}</div><div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{propuesta.proceso} · {_fd_monthLabelCO(`${propuesta.mes}-01`)}</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">Contenido</h4>
            <div className="ic-prov-info">
              <div><div className="muted-xs">Objetivo</div><div>{propuesta.objetivo}</div></div>
              <div><div className="muted-xs">Público</div><div>{propuesta.publico.join(', ')}</div></div>
              <div><div className="muted-xs">Creado por</div><div>{propuesta.creadoPor}</div></div>
              <div><div className="muted-xs">Material</div><div>{propuesta.material ? `${propuesta.material.nombre} · ${(propuesta.material.tamKB / 1024).toFixed(1)} MB` : 'Sin información'}</div></div>
            </div>
          </section>
          <section className="ic-prov-section">
            <h4 className="ic-cap-h3">Cuestionario · {propuesta.preguntas.length} pregunta(s)</h4>
            {propuesta.preguntas.length === 0 ? <p className="muted-xs">Esta propuesta no incluyó cuestionario.</p> : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {propuesta.preguntas.map((p, i) => (
                  <div key={i} className="tr-pregunta-row">
                    <div style={{ fontWeight: 600, fontSize: 12.5 }}>{i + 1}. {p.enunciado || 'Sin enunciado'}</div>
                    <div className="muted-xs">Correcta: {p.opciones[p.correcta] || '—'}</div>
                  </div>
                ))}
              </div>
            )}
          </section>
          <section className="ic-prov-section">
            <h4 className="ic-cap-h3">Evaluación del capacitador</h4>
            {evalCapacitador ? (
              <div className="tr-file-chip"><IconDoc size={14} /> {evalCapacitador}</div>
            ) : (
              <button className="btn" onClick={() => setEvalCapacitador(`evaluacion-capacitador-${propuesta.id}.pdf`)}>Cargar evaluación del capacitador (simulado)</button>
            )}
          </section>
          <section className="ic-prov-section">
            <h4 className="ic-cap-h3">Decisión</h4>
            <div className="form-field">
              <label>Comentario (obligatorio para devolver)</label>
              <textarea className="form-input" rows={2} value={comentario} onChange={e => setComentario(e.target.value)} />
            </div>
          </section>
        </div>
        <div className="tr-side-head" style={{ borderTop: '1px solid var(--border)', borderBottom: 'none', justifyContent: 'space-between', gap: 8, flexWrap: 'wrap' }}>
          <button
            className="btn danger"
            disabled={tieneHistorial}
            title={tieneHistorial ? 'No se puede inactivar: ya tiene personas asignadas con historial.' : 'Inactivar borrador sin historial'}
            onClick={() => onInactivar(propuesta.id)}
          >Inactivar</button>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn" disabled={!comentario.trim()} onClick={() => onDevolver(propuesta.id, comentario)}>Devolver</button>
            <button className="btn primary" onClick={() => onAprobar(propuesta.id)}>Aprobar</button>
          </div>
        </div>
      </div>
    </div>
  );
};

const TrInternalValidation = ({ toast }) => {
  const [propuestas, setPropuestas] = React.useState(() => [...FORMATION_PROPUESTAS_INTERNAS]);
  const [estadoFiltro, setEstadoFiltro] = React.useState('todos');
  const [detalle, setDetalle] = React.useState(null);

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

  const filas = propuestas.filter(p => estadoFiltro === 'todos' || p.estado === estadoFiltro);

  const decidir = (id, cambios, msg) => {
    const next = propuestas.map(p => p.id === id ? { ...p, ...cambios } : p);
    setPropuestas(next); persistir(next);
    setDetalle(null);
    toast && toast(msg);
  };

  return (
    <div className="card">
      <div className="card-head"><div><h3>Validación de Gestión Humana</h3><div className="sub">Bandeja de propuestas de capacitación interna</div></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>{INTERNAL_PROPUESTA_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>Tema</th><th>Proceso</th><th>Mes</th><th>Creado por</th><th>Estado</th><th></th></tr></thead>
          <tbody>
            {filas.map(p => (
              <tr key={p.id} onClick={() => setDetalle(p)} style={{ cursor: 'pointer' }}>
                <td style={{ fontWeight: 500 }}>{p.tema}</td><td>{p.proceso}</td><td className="mono">{_fd_monthLabelCO(`${p.mes}-01`)}</td><td>{p.creadoPor}</td>
                <td><span className={`pill ${p.estado === 'Aprobada' ? 'green' : p.estado === 'Devuelta' ? 'rose' : p.estado === 'En revisión' ? 'navy' : ''}`}>{p.inactiva ? 'Inactiva' : p.estado}</span></td>
                <td style={{ textAlign: 'right' }}><button className="btn" style={{ padding: '4px 10px', fontSize: 12 }} onClick={(e) => { e.stopPropagation(); setDetalle(p); }}>Revisar</button></td>
              </tr>
            ))}
            {filas.length === 0 && <tr><td colSpan={6} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>No hay propuestas con este estado.</td></tr>}
          </tbody>
        </table>
      </div>
      {detalle && (
        <TrValidationDrawer
          propuesta={detalle}
          tieneHistorial={FORMATION_SEGUIMIENTO_INTERNO.some(s => s.propuestaId === detalle.id)}
          onClose={() => setDetalle(null)}
          onDevolver={(id, comentario) => decidir(id, { estado: 'Devuelta', comentario }, 'Propuesta devuelta con comentarios')}
          onAprobar={(id) => decidir(id, { estado: 'Aprobada' }, 'Propuesta aprobada e integrada al programa general')}
          onInactivar={(id) => decidir(id, { inactiva: true }, 'Propuesta inactivada — se conserva sin borrado físico')}
        />
      )}
    </div>
  );
};

// ───────────────────────────── Seguimiento por personas ─────────
const TrPresencialModal = ({ registro, onClose, onSave }) => {
  const [asistio, setAsistio] = React.useState(true);
  const [evaluacion, setEvaluacion] = React.useState(null);
  const [nota, setNota] = React.useState(80);
  return (
    <Modal open onClose={onClose} title="Registrar capacitación presencial" width={460}
      footer={<><button className="btn" onClick={onClose}>Cancelar</button><button className="btn primary" onClick={() => onSave({ asistio, evaluacion, nota: Number(nota) })}>Emitir diploma y guardar</button></>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
          <input type="checkbox" checked={asistio} onChange={e => setAsistio(e.target.checked)} style={{ accentColor: 'var(--navy-800)', width: 16, height: 16 }} />
          Marcar asistencia presencial
        </label>
        <div className="form-field">
          <label>Nota obtenida</label>
          <input type="number" min="0" max="100" className="form-input" value={nota} onChange={e => setNota(e.target.value)} />
        </div>
        <div className="form-field">
          <label>Evaluación física (adjunto)</label>
          {evaluacion ? <div className="tr-file-chip"><IconDoc size={14} /> {evaluacion}</div> : (
            <button className="btn" onClick={() => setEvaluacion('evaluacion-fisica-escaneada.pdf')}>Adjuntar evaluación (simulado)</button>
          )}
        </div>
      </div>
    </Modal>
  );
};

const TrInternalTracking = ({ currentRole, toast }) => {
  const [rows, setRows] = React.useState(() => [...FORMATION_SEGUIMIENTO_INTERNO]);
  const [envios, setEnvios] = React.useState(() => [...FORMATION_ENVIOS]);
  const [presencialFor, setPresencialFor] = React.useState(null);
  const [seleccion, setSeleccion] = React.useState(new Set());

  const equipoIds = new Set(trJobEquipoDe(currentRole).map(e => e.id));
  const filas = rows.filter(r => equipoIds.has(r.empId)).map(r => ({ ...r, emp: getFormationEmployee(r.empId) }));

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

  const guardarPresencial = (cambios) => {
    const nota = cambios.nota;
    const aprobado = nota >= 60;
    const next = rows.map(r => r.id === presencialFor.id ? {
      ...r, estadoOperativo: cambios.asistio ? 'Ejecutado' : 'Retirado',
      estadoAcademico: aprobado ? 'Aprobado' : 'Pendiente por ejecutar',
      fechaEjecucion: FORMATION_DEMO_TODAY, nota,
      soporte: aprobado ? { tipo: 'diploma', nombre: `diploma-${r.empId}.pdf` } : r.soporte,
      intentos: [...r.intentos, { fecha: FORMATION_DEMO_TODAY, nota, resultado: aprobado ? 'Aprobado' : 'Reprobado' }],
    } : r);
    setRows(next); persistir(next);
    setPresencialFor(null);
    toast && toast(aprobado ? 'Asistencia registrada · diploma emitido' : 'Asistencia registrada · evaluación reprobada, vuelve a Pendiente por ejecutar');
  };

  const toggleSel = (id) => setSeleccion(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });

  const notificar = (canal) => {
    const destinos = seleccion.size > 0 ? [...seleccion] : filas.filter(f => f.estadoOperativo !== 'Ejecutado').map(f => f.id);
    if (destinos.length === 0) { toast && toast('No hay destinatarios pendientes para notificar'); return; }
    const envio = { id: `ENV-${Date.now().toString(36)}`, fecha: `${FORMATION_DEMO_TODAY} ${new Date().toTimeString().slice(0, 5)}`, canal, destinatarios: destinos.length, asunto: 'Recordatorio: capacitación asignada', resultado: 'Enviado' };
    window.FORMATION_ENVIOS.unshift(envio);
    setEnvios([...window.FORMATION_ENVIOS]);
    toast && toast(`Recordatorio enviado por ${canal} a ${destinos.length} persona(s)`);
  };

  const diplomasAprobados = filas.filter(f => f.estadoAcademico === 'Aprobado' && f.soporte);

  return (
    <div>
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head">
          <div><h3>Seguimiento por personas</h3><div className="sub">{filas.length} asignaciones</div></div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <button className="btn" onClick={() => notificar('Correo')}><IconMegaphone size={14} /> Notificar por correo</button>
            <button className="btn" onClick={() => notificar('WhatsApp')}><IconMegaphone size={14} /> Notificar por WhatsApp</button>
            {currentRole === 'jefe' && diplomasAprobados.length > 0 && <button className="btn primary" onClick={() => toast && toast(`Simulación completada · ${diplomasAprobados.length} diploma(s) descargados en ZIP`)}><IconDoc size={14} /> Descargar diplomas del equipo</button>}
          </div>
        </div>
        <div className="ep-table-wrap">
          <table className="data-table">
            <thead>
              <tr><th></th><th>Cédula</th><th>Nombre</th><th>Cargo</th><th>Proceso</th><th>Tema</th><th>Mes</th><th>Académico</th><th>Operativo</th><th>Fecha ejecución</th><th>Nota</th><th>Soporte</th><th></th></tr>
            </thead>
            <tbody>
              {filas.map(r => (
                <tr key={r.id}>
                  <td><input type="checkbox" checked={seleccion.has(r.id)} onChange={() => toggleSel(r.id)} style={{ accentColor: 'var(--navy-800)' }} /></td>
                  <td className="mono">{r.emp.doc}</td><td style={{ fontWeight: 500 }}>{r.emp.name}</td><td>{r.emp.cargo}</td><td>{r.emp.proceso}</td>
                  <td>{r.tema}</td><td className="mono">{_fd_monthLabelCO(`${r.mes}-01`)}</td>
                  <td><span className={`pill ${r.estadoAcademico === 'Aprobado' ? 'green' : r.estadoAcademico === 'Inscrito' ? 'navy' : 'amber'}`}>{r.estadoAcademico}</span></td>
                  <td><span className={`pill ${r.estadoOperativo === 'Ejecutado' ? 'green' : r.estadoOperativo === 'Retirado' ? '' : 'navy'}`}>{r.estadoOperativo}</span></td>
                  <td className="mono">{r.fechaEjecucion ? _fd_labelCO(r.fechaEjecucion) : '—'}</td>
                  <td className="mono">{r.nota ?? '—'}</td>
                  <td>{r.soporte ? <button className="btn" style={{ padding: '3px 8px', fontSize: 11.5 }} onClick={() => toast && toast(`Simulación · abriendo ${r.soporte.nombre}`)}>Ver diploma</button> : <span className="muted-xs">Sin soporte</span>}</td>
                  <td style={{ textAlign: 'right' }}><button className="btn" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => setPresencialFor(r)}>Presencial</button></td>
                </tr>
              ))}
              {filas.length === 0 && <tr><td colSpan={13} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>Sin asignaciones para este equipo.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><div><h3>Historial de envíos</h3><div className="sub">Notificaciones simuladas por correo y WhatsApp</div></div></div>
        <div className="ep-table-wrap" style={{ maxHeight: 220 }}>
          <table className="data-table">
            <thead><tr><th>Fecha</th><th>Canal</th><th>Destinatarios</th><th>Asunto</th><th>Resultado</th></tr></thead>
            <tbody>
              {envios.map(e => (
                <tr key={e.id}><td className="mono">{e.fecha}</td><td>{e.canal}</td><td className="mono">{e.destinatarios}</td><td>{e.asunto}</td><td><span className="pill green">{e.resultado}</span></td></tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {presencialFor && <TrPresencialModal registro={presencialFor} onClose={() => setPresencialFor(null)} onSave={guardarPresencial} />}
    </div>
  );
};

// ───────────────────────────── Vista personal (currentRole === 'nuevo') ─────────
const TrPersonalView = ({ empId = 'E0247' }) => {
  const emp = getFormationEmployee(empId);
  const interno = FORMATION_SEGUIMIENTO_INTERNO.filter(r => r.empId === empId);
  const externo = FORMATION_SEGUIMIENTO_EXTERNO.filter(r => r.empId === empId);
  const entrenamientos = FORMATION_ENTRENAMIENTOS.filter(r => r.empId === empId);
  const pendientes = [
    ...interno.filter(r => r.estadoOperativo !== 'Ejecutado').map(r => ({ tipo: 'Interna', nombre: r.tema })),
    ...entrenamientos.filter(r => r.estado === 'Pendiente por ejecutar').map(r => ({ tipo: 'Entrenamiento al cargo', nombre: r.motivo })),
  ];
  const certificados = [
    ...interno.filter(r => r.soporte).map(r => ({ nombre: r.tema, archivo: r.soporte.nombre })),
    ...externo.filter(r => r.soportes.some(s => s.estado === 'Cargado')).map(r => ({ nombre: FORMATION_CAPACITOGRAMA.find(c => c.id === r.capacitogramaId)?.curso, archivo: r.soportes.find(s => s.estado === 'Cargado').nombre })),
  ];

  return (
    <div>
      <div className="page-head">
        <div>
          <h1 className="page-title">Mi formación</h1>
          <div className="page-subtitle">Cursos, pendientes, resultados y certificados de {emp.name}</div>
        </div>
      </div>
      <div className="tr-kpis">
        <div className="tr-kpi"><div className="tr-kpi-icon navy"><IconBook size={18} /></div><div><div className="tr-kpi-num">{interno.length + externo.length}</div><div className="tr-kpi-lbl">Cursos asignados</div></div></div>
        <div className="tr-kpi"><div className="tr-kpi-icon amber"><IconClock size={18} /></div><div><div className="tr-kpi-num">{pendientes.length}</div><div className="tr-kpi-lbl">Pendientes por ejecutar</div></div></div>
        <div className="tr-kpi"><div className="tr-kpi-icon green"><IconCheck size={18} /></div><div><div className="tr-kpi-num">{certificados.length}</div><div className="tr-kpi-lbl">Certificados obtenidos</div></div></div>
      </div>

      <div className="grid row-1-1" style={{ alignItems: 'start' }}>
        <div className="card">
          <div className="card-head"><div><h3>Pendientes</h3></div></div>
          <div className="card-body" style={{ paddingTop: 6 }}>
            {pendientes.length === 0 ? <p className="muted-xs">No tienes formación pendiente por ejecutar.</p> : pendientes.map((p, i) => (
              <div key={i} className="list-row"><div style={{ minWidth: 0, flex: 1 }}><div className="ttl">{p.nombre}</div><div className="sub">{p.tipo}</div></div></div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-head"><div><h3>Resultados</h3></div></div>
          <div className="card-body" style={{ paddingTop: 6 }}>
            {interno.filter(r => r.nota != null).length === 0 ? <p className="muted-xs">Aún no tienes resultados registrados.</p> : interno.filter(r => r.nota != null).map(r => (
              <div key={r.id} className="list-row"><div style={{ minWidth: 0, flex: 1 }}><div className="ttl">{r.tema}</div><div className="sub">Nota {r.nota} · {r.estadoAcademico}</div></div></div>
            ))}
          </div>
        </div>
      </div>

      <div className="card" style={{ marginTop: 18 }}>
        <div className="card-head"><div><h3>Certificados</h3></div></div>
        <div className="card-body" style={{ paddingTop: 6 }}>
          {certificados.length === 0 ? <p className="muted-xs">Todavía no tienes certificados.</p> : certificados.map((c, i) => (
            <div key={i} className="list-row"><div style={{ minWidth: 0, flex: 1 }}><div className="ttl">{c.nombre}</div><div className="sub mono">{c.archivo}</div></div></div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.TrAnnualProgram = TrAnnualProgram;
window.TrInternalValidation = TrInternalValidation;
window.TrInternalTracking = TrInternalTracking;
window.TrPersonalView = TrPersonalView;