Staff: campo tipo Doctor/Cosmetologa, filtro por tipo en agenda y selector editable en modulo Medicos

frontend/src/pages/Agenda.tsx

@@ -58,6 +58,7 @@ const Agenda: FC = () => {
   const [date, setDate] = useState<string>(() => searchParams.get('date') || new Date().toISOString().split('T')[0]);
   const [stateFilter, setStateFilter] = useState('');
   const [doctorFilter, setDoctorFilter] = useState(() => (medicoEmployeeId ? String(medicoEmployeeId) : ''));
+  const [staffTypeFilter, setStaffTypeFilter] = useState<'' | 'doctor' | 'cosmetologa'>('');
   const [viewMode, setViewMode] = useState<'lista' | 'doctores' | 'horas'>('doctores');
   const [quickFilter, setQuickFilter] = useState<'' | 'libres' | 'primera' | 'checkin' | 'noshow' | 'porconfirmar'>('');
   const [detailApt, setDetailApt] = useState<Appointment | null>(null);
@@ -228,9 +229,14 @@ const Agenda: FC = () => {
     (_, i) => GRID_START + i / SLOTS_PER_HOUR
   );
 
+  // Filtro por tipo de staff: las pills y las columnas del grid usan esta lista
+  const typedDoctors = doctors.filter(
+    (d) => !staffTypeFilter || (d.staff_type ?? 'doctor') === staffTypeFilter
+  );
+
   const gridDoctors = doctorFilter
-    ? doctors.filter((d) => String(d.id) === doctorFilter)
-    : doctors;
+    ? typedDoctors.filter((d) => String(d.id) === doctorFilter)
+    : typedDoctors;
   const hasUnassigned = !doctorFilter && gridAppointments.some((a) => !a.doctor_id);
   const gridColumns: { key: string; label: string; subtitle: string; doctorId: number | null }[] = [
     ...gridDoctors.map((d) => ({ key: `d-${d.id}`, label: d.name, subtitle: d.job_title || '', doctorId: d.id })),
@@ -873,6 +879,27 @@ const Agenda: FC = () => {
               )
             ) : (
               <div className="flex flex-wrap items-center gap-2">
+                {/* Selector de tipo de staff */}
+                <div className="flex items-center gap-1 mr-2 border-r border-theme-border pr-3">
+                  {([
+                    { key: '', label: 'Todos' },
+                    { key: 'doctor', label: 'Doctores' },
+                    { key: 'cosmetologa', label: 'Cosmetólogas' },
+                  ] as const).map((t) => (
+                    <button
+                      key={t.key}
+                      type="button"
+                      onClick={() => setStaffTypeFilter(t.key)}
+                      className={`px-2.5 py-1 rounded-full text-[11px] font-medium border transition-all ${
+                        staffTypeFilter === t.key
+                          ? 'bg-theme-accent text-theme-inverse border-theme-accent'
+                          : 'bg-theme-bg text-theme-muted border-theme-border hover:border-theme-border-strong'
+                      }`}
+                    >
+                      {t.label}
+                    </button>
+                  ))}
+                </div>
                 <button
                   type="button"
                   onClick={() => setDoctorFilter('')}
@@ -884,7 +911,7 @@ const Agenda: FC = () => {
                 >
                   Todos
                 </button>
-                {doctors.map((d) => {
+                {typedDoctors.map((d) => {
                   const active = doctorFilter === String(d.id);
                   return (
                     <button